So verwenden Sie die Chrome-Entwicklertools zur Verbesserung Ihrer WordPress-Website

Chrome Developer Tools (DevTools) ist eine erstaunliche Sammlung von Web-Authoring- und Debug-Tools für Google Chrome. Die devtools bieten Zugriff auf die Elemente, die Webseiten erstellen. Sie können die DevTools verwenden, um Probleme mit dem Layout zu beheben, CSS anzuzeigen und zu ändern, JavaScript-Haltepunkte festzulegen, den Code auf Optimierung zu untersuchen und vieles mehr. Die DevTools sind kostenlos und bereits in Ihren Chrome-Browser integriert. Wenn Sie also Chrome haben, dann haben Sie sie bereits.

In diesem Artikel erhalten wir einen Überblick darüber, was die Tools sind und wie Sie sie verwenden können, um Ihre WordPress-Website zu verbessern.

Öffnen der Werkzeuge

Es gibt mehrere Möglichkeiten, die Tools zu öffnen:

1. Wählen Sie das Chrome-Menü, wählen Sie Tools und dann Developer Tools.
2. Klicken Sie mit der rechten Maustaste auf ein beliebiges Element auf dem Bildschirm und wählen Sie Element prüfen (meine bevorzugte Methode).
3. Strg + Umschalt + I (für PC) | Cmd + Opt + I (für Mac)

Das DevTools-Fenster

Das Werkzeugfenster enthält zwei Bedienfelder. Beide enthalten Werkzeuge, die zusammen verwendet werden können. Hier ist ein Blick auf die Werkzeuge.

Die erste enthält 8 Werkzeuggruppen. Zu den Werkzeugen gehören:

• Elemente
• Netzwerk
• Quellen
• Zeitleiste
• Profile
• Ressourcen
• Prüfungen
• Konsole

Der zweite Abschnitt enthält:

• Stile
• Berechnet
• Ereignis-Listener
• DOM (Document Object Model) Haltepunkte
• Eigenschaften

Es gibt verschiedene Möglichkeiten, wie Sie die Werkzeuge anzeigen können. Sie können die Fenstergröße ändern, um Platz zu schaffen. Sie können die Fenster auch auf die rechte Seite des Bildschirms verschieben, um einen geteilten Bildschirm mit den Tools auf der einen Seite und Ihrer Website auf der anderen Seite zu erhalten.

Elemente

Dieses Bedienfeld zeigt Ihnen den DOM-Baum, der die HTML-Elemente Ihrer Seite darstellt, und lässt Sie jedes der Elemente überprüfen oder bearbeiten. Sie können CSS-Anpassungen in Echtzeit sehen.

Sie können jedes der Bedienfelder öffnen und reduzieren, um es einfacher zu sehen und zu navigieren, indem Sie auf die Knoten klicken (sie sehen aus wie Pfeile oder Dreiecke). Die DOM-Baumansicht zeigt den aktuellen Status des Baums und nicht den ursprünglichen HTML-Code (der beispielsweise durch JavaScript geändert wurde).

Wenn Sie mit der Maus über ein Element in der Baumansicht fahren, wird das Element auf der Webseite hervorgehoben. Es zeigt Ihnen Informationen wie Schriftart, Bildgröße usw.

Wenn Sie auf eines der Elemente klicken, zeigt das Fenster rechts das CSS an. Hier können Sie Stile auswählen und Änderungen an Schriftarten, Farben, Größen, Rändern, Rahmen, Auffüllung usw. vornehmen.

In der Fußzeile sehen Sie Breadcrumbs, damit Sie bei Bedarf zurückgehen können. Sie können jedes der Elemente bearbeiten, indem Sie einfach darauf klicken und Ihre Änderungen eingeben. Wenn Sie die Eingabetaste drücken, sehen Sie, dass die Änderungen stattfinden.

Dieses Bild ist beispielsweise derzeit 600 Pixel breit. Ich kann die Breite auswählen und einen neuen Wert eingeben und die Eingabetaste drücken.

Das Bild ändert sich sofort in die neue Größe.

Um den Stil der Schriftart zu ändern, wählen Sie einfach die Schriftart aus und wählen Sie im Stilfenster rechts aus, was Sie ändern möchten.

Sie können die Elemente sogar verschieben und an neuen Stellen ablegen, um das Layout Ihrer Seite zu ändern.

Ich verschiebe die letzten Kommentare über die letzten Posts, indem ich einfach das div ziehe.

Ein Rechtsklick gibt Ihnen eine neue Reihe von Funktionen. Sie können verschiedene Elementzustände sehen, als HTML modifizieren, Unterbrechungen setzen, den CSS-Pfad kopieren und vieles mehr. Sie können auch mit der rechten Maustaste auf einen Knoten klicken und ihn löschen. Es ist so einfach, dass es fast beängstigend ist.

Ich habe dieses Tool verwendet, um Bildgrößen zu finden und Code-Snippets zu untersuchen.

Netzwerk

Das Netzwerk-Panel zeigt, welche Ressourcen von Ihrer Website angefordert und heruntergeladen werden. Es wird in Echtzeit grafisch dargestellt. Wenn Sie sehen, welche Elemente am längsten zum Herunterladen benötigen, erhalten Sie Einblicke, welche Probleme behoben werden müssen, um Ihre Seite zu optimieren.

Sie können verschiedene Ansichten und Arten von Diagrammen wie Wasserfall filtern und anzeigen. Sie können Netzwerkaktivitäten aufzeichnen und speichern, um sie später zu analysieren.

Sie können Details zu Ressourcen anzeigen. Zu den Einzelheiten gehören:

• HTTP-Anforderungs- und Antwort-Header – zeigt die Anforderungs-URL, HTTP-Methode, Antwortstatuscodes an und listet die HTTP-Antwort- und Anforderungs-Header mit ihren Werten und Abfragezeichenfolgeparametern auf.
• Ressourcenvorschau – zeigt eine Vorschau für Bild- und JSON-Ressourcen.
• HTTP-Antwort – zeigt den unformatierten Inhalt der Ressource.
• Cookie-Namen und -Werte – Dies zeigt die Cookies, die in den HTTP-Anforderungs- und -Antwort-Headern der Ressource übertragen werden, und löscht Cookies.
• WebSocket-Nachrichten – diese zeigt Nachrichten, die über eine WebSocket-Verbindung gesendet oder empfangen werden.
• Ressourcennetzwerk-Timing – Dies zeigt ein Diagramm der Zeit, die für Netzwerkphasen aufgewendet wird, die am Laden der Ressource beteiligt sind.

Die Wasserfallansicht ist eine großartige Möglichkeit, um zu sehen, wie lange es dauert, bis jedes Element vom Beginn der Anfrage geladen wird, bis das letzte Byte des Elements geliefert wird. Indem Sie sehen, welche Elemente die meiste Zeit in Anspruch nehmen, können Sie besser verstehen, wo Sie Anpassungen vornehmen müssen.

Sie können die Netzwerkdaten für zukünftige Analysen speichern.

Quellen

Sie können das Quellfenster verwenden, um Ihren Code wie JavaScript und Skripts, die Teil der geladenen Seite sind, anzuzeigen und zu debuggen. Sie können den Code anhalten, fortsetzen, schrittweise durchlaufen und bei Ausnahmen anhalten. Es enthält die grundlegenden Codeausführungsfunktionen, sodass Sie Unterbrechungspunkte überspringen, betreten, verlassen und umschalten können. Sie können die Breakpoints verwenden, um JavaScript, DOM-Updates und Netzwerkaufrufe zu debuggen. Sie können auch bedingte Haltepunkte festlegen, an denen jeder Ausdruck als wahr oder falsch zurückgegeben werden kann. Der Haltepunkt hält dann den Code an, wenn die Bedingung erfüllt ist.

Es gibt eine hübsche Druckfunktion, die den minimierten Code leicht lesbar macht. Dies macht es auch einfacher zu sehen, wo Sie Ihre Haltepunkte platzieren müssen. Wenn dies nicht so funktioniert, wie Sie es benötigen, können Sie ein JSON-basiertes Zuordnungsformat namens Source Map verwenden. Quellkarten werden von einem Minifier erstellt, in den diese Funktion integriert ist.

Zeitleiste

Das Zeitachsenfenster zeigt, wo Zeit für das Laden und die Nutzung von Seiten aufgewendet wird. Es zeichnet und zeichnet jedes Ereignis auf der Zeitleiste. Es zeigt Ressourcen wie JavaScript, das Berechnen von Stilen und das Neuzeichnen an. Sie können die Ereignisse aufzeichnen und schrittweise analysieren. Es gibt drei Modi:

• Veranstaltungen – eine Liste aller Veranstaltungen, die nach Typ geordnet sind. Dies zeigt Ihnen, welche Aufgaben die meiste Zeit in Anspruch nehmen.
• Frames – Dies zeigt die Arbeit, die in jedem Frame der Rendering-Leistung Ihrer Website geleistet werden muss. Wenn Ihre Website beispielsweise mit 60 Bildern pro Sekunde gerendert wird, zeigt sie Ihnen die Arbeit an, die in 1/60 Sekunde erledigt ist. Dazu gehören das Laden von Skripten, das Zeichnen des Layouts, das Behandeln von Ereignissen usw. Sie können dies verwenden, um anormale Aktivitäten beim Laden von Seiten anzuzeigen.
• Speicher – dies stellt Ihre Speichernutzung im Laufe der Zeit dar. Es zeigt Ihnen alle Dokumente, Knoten und Ereignis-Listener, die im Speicher gehalten werden. Dies hilft dabei, herauszufinden, was Speicherlecks verursacht.

Profile

Hier können Sie die Ausführungszeit und den Speicherverbrauch von Webseiten und Apps profilieren. Dies zeigt Ihnen, wo die Ressourcen verwendet werden. Dies ist ein gutes Werkzeug, um Ihren Code zu optimieren.

Es werden drei Profiltypen aufgezeichnet:

• Collect JavaScript CPU Profile – dies zeigt die Ausführungszeit Ihrer JavaScript-Funktionen.
• Take Heap Snapshot – dies zeigt die Speichernutzung und Verteilung Ihrer JavaScript-Objekte.
• Heap-Zuweisungen aufzeichnen – dies zeichnet Ihre Objektzuweisungen auf, um Speicherlecks im Laufe der Zeit anzuzeigen.

Ressourcen

Sie können dieses Panel verwenden, um Ressourcen zu überprüfen. Es zeigt Ihnen Informationen zu IndexedDB, Web-SQL-Datenbank, App-Cache-Cookies, lokalem und Sitzungsspeicher und mehr. Sie können auch Ihre visuellen Ressourcen wie Schriftarten, Bilder und Stylesheets überprüfen.

Auf der Registerkarte IndexedDB können Sie Ihre IndexedDB-Datenbanken und Objektspeicher überprüfen und Datensätze anzeigen und löschen.

Sie können SQL-Befehle ausführen und die Ergebnisse in Tabellenform anzeigen. Während Sie die Befehle eingeben, erhalten Sie Hinweise für Tabellennamen, Befehle und Klauseln.

Die Registerkarte Cookies zeigt Informationen zu Cookies, die von HTTP oder JavaScript erstellt wurden. Sie können sie einzeln oder in Gruppen löschen.

Chrome speichert Anwendungsressourcen im Cache. Auf der Registerkarte Anwendungscache können Sie den Status dieser Ressourcen anzeigen. Es zeigt Ihnen auch die URL der Ressource, die Art der Ressource und ihre Größe.

Das Lokal und die Sitzung Im Speicherbereich können Sie lokale und Sitzungsspeicher-Schlüssel/Wert-Paare anzeigen, erstellen, löschen und bearbeiten, die mit der Speicher-API erstellt wurden.

Prüfungen

Das Audit-Panel analysiert die Seite beim Laden und schlägt Korrekturen vor, um das Laden der Seite zu optimieren. Es verfügt über zwei Audits, die die Informationen in zwei Kategorien einteilen: Netzwerknutzung und Webseitenleistung. Sie können beide Audits ausführen oder nur das gewünschte. Sie können die Prüfungen im aktuellen Zustand der Seite ausführen oder die Seite neu laden und beim Laden prüfen.

Es geht nicht so sehr ins Detail wie Google PageSpeed ​​Insights, aber es gibt Ihnen genügend Informationen, um die tief hängenden Früchte zu beheben. Nachdem ich PageSpeed ​​Insights durchlaufen hatte, war meine Seite in einem anständigen Zustand, aber sie gab mir einige Informationen über meine Website, die Insights nicht hatte.

Konsole

Die Konsole wird zum Debuggen verwendet. Sie können Diagnosen protokollieren, Befehle eingeben, JavaScript auswerten, JavaScript-Profile erstellen usw. Sie können Informationen über die Befehlszeile in die Konsole schreiben. Über die Befehlszeile können Sie Funktionen verwenden, um Elemente im DOM auszuwählen und zu untersuchen, Ereignisse zu überwachen und den Profiler zu stoppen und zu starten.

Gerätemodus

Eine meiner Lieblingsfunktionen ist der Gerätemodus. Sie können darauf mit der kleinen Schaltfläche links neben Elemente im Menü zugreifen. Im Gerätemodus können Sie aus 23 verschiedenen gängigen Mobilgeräten (Kindle Fire, mehrere iPhones, mehrere Galaxies, Laptops usw.) auswählen und sehen, wie Ihre Website auf diesem Gerät aussieht und reagiert.

Sie können den Bildschirm auch ziehen, um Ihre eigene benutzerdefinierte Bildschirmgröße zu erstellen. Der Cursor ahmt Ihre Fingerspitze nach, sodass der Bildschirm mit der Maus genauso reagiert wie mit Ihrem Finger. Sie können im Einstellungsbildschirm auch Ihre eigenen benutzerdefinierten Geräte erstellen.

Sie können auch den Netzwerktyp (3G, 4G, Wi-Fi usw.) auswählen, damit Sie analysieren können, wie die Site über die verschiedenen Netzwerke und Geschwindigkeiten aussieht und reagiert.

Schublade

Am unteren Rand des Bildschirms finden Sie die Schublade. Dies kann mit der Schaltfläche >_ auf der rechten Seite der Symbolleiste ein- oder ausgeschaltet werden. Die Schublade enthält:

• Konsole – die Konsolenbefehlszeile. Dadurch wird die Konsole verfügbar, wenn andere Panels verwendet werden.
• Suchen – jede Quelle finden. Sie können Groß- und Kleinschreibung ignorieren und nach regulären Ausdrücken suchen.
• Emulation – Werkzeuge und Einstellungen für den Gerätemodus. Es enthält Funktionen wie Beschleunigungsmesser und Geolokalisierungskoordinaten.
• Rendering – zeigt Rendering-Funktionen wie FPS-Meter, zusammengesetzte Schichtgrenzen usw. Das Beste daran ist, dass es potenzielle Engpässe aufzeigt.

Es ist nützlich, diese Werkzeuge in der Schublade zu haben, da einige der Bedienfelder keinen Zugriff auf diese Werkzeuge bieten.

Abschließende Gedanken

Chrome Developer Tools (DevTools) ist eine erstaunliche Sammlung von Web-Authoring- und Debug-Tools, mit denen Sie Ihre Website verbessern können. Sie können Elemente schnell ziehen und ablegen, um das Layout Ihrer Website zu ändern, Speicherlecks zu beheben, Probleme beim Laden von Seiten zu beheben, Ihre Website auf praktisch jedem Mobilgerät und jeder Bildschirmgröße anzuzeigen und vieles mehr. Diese Übersicht kratzt nur an der Oberfläche dessen, wie leistungsfähig diese Tools sind. Das Beste daran ist, dass es bereits in Google Chrome integriert ist, sodass Sie nichts herunterladen müssen.

Ich würde gerne von Ihnen hören. Verwenden Sie die Chrome-Entwicklertools? Was sind Ihre Lieblingsfunktionen? Was benutzt du am meisten? Haben Sie Tipps zur Verwendung der Tools? Erzähl uns davon in den Kommentaren.