Verwendung der Entwicklerwerkzeuge Ihres Browsers

Spüren Sie die Kraft?

Jeder gängige Internetbrowser, den Sie nutzen, verfügt über sogenannte Entwicklertools. Dazu gehören Google Chrome, Safari, Firefox und Internet Explorer. Mit all diesen Optionen ist es also ganz einfach, mithilfe der Entwicklertools einige wirklich coole Dinge zu realisieren! Auf dieser Seite werde ich die Entwicklertools von Google Chrome verwenden, die Sie über einen Rechtsklick > „Untersuchen“ aufrufen können (für einen kurzen Überblick über die Chrome-Entwicklertools klicken Sie auf hier). Im Folgenden finden Sie einige grundlegende Hinweise dazu, was Sie mit den Entwicklertools Ihres Browsers erreichen können und in welchen Situationen diese für Sie nützlich sein können.

Prüfen Sie Konsolenfehler, um herauszufinden, warum etwas auf Ihrer Website nicht richtig funktioniert.

Wenn Sie feststellen, dass Inhalte auf Ihrer Seite nicht richtig geladen werden oder etwas ‘nicht stimmt’, ist es unerlässlich, lokale Fehler überprüfen zu können, die beim Laden einer Seite möglicherweise auftreten. Öffnen Sie dazu zunächst die Entwicklertools in Ihrem Browser und wechseln Sie zur Registerkarte “Konsole”. Aktivieren Sie dort oben unter den Hauptregisterkarten die Option „Protokoll beibehalten“ und klicken Sie auf „Aktualisieren“, falls keine Informationen angezeigt werden.

Sobald Sie dies getan haben, werden eventuelle Fehlermeldungen angezeigt. Wenn Sie sich nicht sicher sind, was eine Fehlermeldung bedeutet oder wie Sie das Problem beheben können, lohnt es sich, diesen Artikel zu lesen. hier. Falls Sie sich immer noch nicht sicher sind, wie Sie vorgehen sollen, senden Sie uns bitte einen Screenshot der aktuellen Anzeige zusammen mit einer kurzen Erklärung, was nicht funktioniert, in einer Support-Ticket.

Passen Sie Ihre CSS-Stilvorgaben an oder bearbeiten Sie sie und sehen Sie sich an, wie sich dies auf Ihre Website auswirkt, bevor Sie die Änderungen in Ihrem Theme oder Plugin speichern.

Wenn dir die Darstellung der CSS-Stile deines Themes oder von MemberPress nicht gefällt, oder Falls es nicht richtig angezeigt wird, lässt sich das in WordPress ganz einfach mit einem Plugin eines Drittanbieters bearbeiten. Wir empfehlen Ihnen, das Einfaches benutzerdefiniertes CSS-Pluginaber es gibt auch noch andere Optionen, wenn Sie einfach eine einfache Suche für WordPress-Plugins mit benutzerdefiniertem CSS. Der Sinn solcher Plugins besteht darin, dass Sie beliebiges benutzerdefiniertes CSS erstellen, es in das Plugin einfügen und es wird dann angewendet. Wenn Sie das CSS auf Ihr Theme beschränken können, bieten die meisten Themes eine Stelle, an der Sie benutzerdefiniertes CSS hinzufügen können. Fragen Sie daher Ihren Theme-Entwickler danach, falls Sie sich nicht sicher sind, wo Sie diese finden.

Nehmen wir für dieses Beispiel einmal an, ich möchte, dass die Bezeichnungen der Felder in meinem MemberPress-Anmeldeformular etwas größer sind als hier:

Am einfachsten ist es, mit der rechten Maustaste direkt auf das Element zu klicken, das Sie bearbeiten möchten. Wenn ich also mit der rechten Maustaste auf einen dieser Titel klicke und dann auf "Element inspizieren", sieht es so aus:

Sie werden feststellen, dass der grau hervorgehobene Bereich in den Entwicklertools genau das ist, was direkt mit diesem Formular-Label zusammenhängt. Hier suchen wir nach der `div`-Klasse, die uns verrät, welche CSS-Klasse aufgerufen und zur Darstellung des Textes verwendet wird. Wenn ich mit der Maus über die `div`-Klasse fahre, wird das betreffende Element blau hervorgehoben – so lässt sich gut überprüfen, ob man die richtige Klasse gefunden hat. Die Klasse hierfür lautet mp-form-label Und obwohl wir in diesem Artikel nicht allzu sehr ins Detail gehen werden, wie CSS funktioniert (wenn Sie jedoch mehr über CSS erfahren möchten, hier ist ein guter Ort, um zu beginnen), nur wissen, dass für dieses Beispiel, um den Text größer würde ich brauchen, um diese in der CSS Custom Manager Plugin eingeben:

Ein paar wichtige Punkte, die Sie hier beachten sollten: Sie müssen darauf achten, jede Klasse mit einem “.” (Punkt) zu beginnen, die Styling-Anweisungen in “{}” (geschweifte Klammern) zu setzen, und es empfiehlt sich immer, ein !important variabel. Der Grund, warum Sie möglicherweise die !important Der Grund dafür ist, dass Sie beim Hinzufügen von benutzerdefiniertem CSS in den meisten Fällen vorhandenes CSS überschreiben, wodurch sichergestellt wird, dass stattdessen Ihr benutzerdefiniertes CSS angezeigt wird. So würde diese Änderung aussehen:

Überprüfen Sie, über welchen Server Ihre Inhalte geladen werden, wenn sie nicht korrekt geladen werden.

Manchmal stellen Sie fest, dass ein bestimmter Teil Ihrer Website nicht korrekt geladen wird, beispielsweise Dateien, die durch benutzerdefinierte URI-Regeln geschützt sind. Dies wird in der Regel dadurch verursacht, dass der Inhalt von einem anderen Server als Apache geladen wird, beispielsweise von NGINX, was häufig zu Problemen führt. Um dies zu überprüfen, müssen Sie die Entwicklertools öffnen und dann zur Registerkarte „Netzwerk“ wechseln. Wenn dort nichts angezeigt wird, müssen Sie die Seite möglicherweise aktualisieren; andernfalls sehen Sie eine Liste aller Dateipfade, die zum Laden der Seite verwendet wurden. Scrollen Sie nach unten, bis Sie den Dateipfad finden, über den der Inhalt abgerufen wird, der nicht korrekt geladen wird (in der Regel erkennen Sie diesen daran, dass er eine Art von Fehlercode (zum Status) und klicken Sie auf den Link. Daraufhin werden verschiedene Informationen angezeigt, darunter der Statuscode. Hier sollten Sie jedoch unter der Überschrift “Response Headers” nachsehen, wie Sie hier sehen können:

Hier werden Sie feststellen, dass der Inhalt über Apache geladen wurde. Sollte es sich jedoch um etwas anderes handeln und Sie ein Problem haben, müssen Sie eine Änderung vornehmen. Konkret müssen Sie sich an Ihren Hosting-Anbieter wenden und klären, ob dieser Anfragen für diese Dateitypen zur Bearbeitung an Apache statt an NGINX weiterleiten kann.