Chrome Developer Tools Tutorial – 8 Schritte Guide (2024)

Brauchst Du eine Einführung in die Chrome Developer Tools?

Das mächtige Toolset sollte jeder Webentwickler aus dem Effeff kennen, weil nur mit einer tiefgreifenden Untersuchung von Webseiten gute Entwicklung möglich ist!

Starten wir…

Was sind die Browser Developer Tools?

Die Developer Tools sind eine Sammlung von verschiedenen Webseitenwerkzeugen, die bei der Entwicklung von Webseiten, Web-Apps und PWAs helfen.

Jeder bekannte Browser hat eine Form von Developer Tools integriert. Zwischen den Firefox und Chrome Dev Tools sind Unterschiede vorhanden, aber diese sind in den Details bzw. der Verwendung verborgen.

Wo finde ich diese?

Starte Deinen Chrome, Ungoogled Chromium, Edge, Brave und jeder andere Chromium-basierender Browser.

Gehe auf eine Webseite und dann drücke F12 oder ein Rechtsklick – Inspect / Untersuchen. Die Dev Tools erscheinen als Seiten-Menu oder als Boden-Menu. Die Developer Tools bestehen aus verschiedenen Komponenten, welche Du in der Regel isoliert voneinander verwendest.

Was kann ich den Chrome DevTools machen?

Die Dev Tools erlauben Dir (fast) alles an der Webseite zu ändern, hinzufügen oder zu löschen. Du kannst Übertragungen drosseln, verhindern und abändern. Die Tools erlauben ein Blick in die Speicher (Cookie, Local Storage und mehr), sowie eine Untersuchung der Webseitengeschwindigkeit im Detail.

Warum brauche ich das?

Eine gut aussehende Webseite ist noch lange kein performante, zuverlässige und sichere Anwendung. Sehr viele kleine Details im Hintergrund müssen aufeinander abgestimmt sein, damit der Nutzer kein Ruckler / Unstimmigkeiten bemerkt.

Die wichtigsten Komponenten

Mobile Ansicht checken – Device Frames

Deine Webseite muss funktionieren wie ein Chamäleon.

Sie passen sich ihrer Umgebung an.

Auf einem Smartphone ist die Struktur anders als auf einem 27-Zoll-Monitor oder einem 7-Zoll-Tablet. Die Browser präsentieren in unterschiedlichen Arten je nach Betriebssystem (Android, Windows, iOS, macOS) Inhalte.

Deshalb solltest Du eine Reihe an Geräten mit den „Device Fames“ durchtesten. Aufpassen! Die Simulation ist nicht so gut wie ein echter Test. Der finale Test sollte immer auf einem original Gerät stattfinden.

Mit JavaScript operieren – Console

Der Browser ist nicht nur ein Anzeigeprogramm, sondern kann mit JavaScript den Elementen leben einhauchen. Die JavaScript-Konsole findest Du im 2. Tab. Fehler, Infos und Probleme tauchen hier auf. Wenn Du hier viel rot siehst, hat der Entwickler keinen guten Job gemacht. Die Nachrichten kannst Du filtern (rechts neben der weißen Leiste) und durchsuchen (Leiste mitte).

Elemente in Realzeit ändern – Elements

Der Element-Tab zeigt das HTML und CSS hinter der Webseite. Dort kannst Du Elemente auswählen und bearbeiten. In Realzeit siehst, Du wie sich die Inhalte, Farben und Formen anpassen. Das ist ein absolutes Muss für den Designer. CSS-Styles kannst Du über einen Harken ein- und ausschalten. Hier siehst Du auch berechnete, implizite Stylesheets, Event-Listener und XML-Eigenschaften.

Der Online Datei Browser – Sources

Dieser Bereich ist für Dich interessant, wenn Du mit Chrome / Firefox debuggst. Bei anderen Programmen kannst Du direkt in der IDE Breakpoints setzen, um Variablen zu beobachten. Bei der Webentwicklung ist das schwieriger. Die Ausführungsumgebung einer JavaScript / TypeScript App ist nicht deine IDE, sondern der Browser. Erweiterungen für VSCode / VSCodium helfen Dir beim Debuggen zwischen den Programmen.

In dieser Ansicht siehst Du alle Dateien in kompilierter Form wie in einem Dateibrowser, sowie alle aktiven, verschiedenen Breakpoints.

Übertragungen checken – Network

Webseiten bestehen heute mehr als nur aus einer einzigen HTML-Datei. Der Browser lädt nach dem Grundgerüst Bilder, Inhalte, Videos, Script-Dateien und Styles nach. Dabei kann viel schieflaufen und verschiedene Fehler entstehen.

Der Tab Network hilft Dir bei der Fehlersuche. Jeder Verbindung zeigt eine HTTP-(Fehler)-Code auf und alle HTTP-Header an. Die „Rohantworten“ kannst Du Dir unter dem Subtab „Response“ genauer ansehen.

Zertifikaten prüfen – Security

Sicherheit hat vor neuen Funktionen Vorrang!

Der Tab Security zeigt Dir, ob eine Verschlüsselung (HTTPs) aktiv ist. Eine sichere Webseite braucht ein gültiges Zertifikat von einer anerkannten Certificate Authority. Zusätzlich können einzelne Bilder und Scripte von anderen Domains andere Zertifikate aufweisen. Dieser Tab gibt Dir die volle Übersicht über das Thema sichere Übertragung.

Offline Funktionalität prüfen – Application

Neue Web Anwendungen, die progressiven Web-Apps, ermöglicht das Verwenden einer Webseite ohne Internet.

Viele Funktionalitäten lassen sich mit einmalig downgeloadeten Inhalten darstellen. Eine Online-Taschenrechner-App oder eine Tabellen-Kalkulation brauchen keine permanente Backend-Kommunikation. Inhalte können in verschiedenen Offline-Speicher auf dem Clienten gespeichert sein. Diese kannst Du im Application Tab einsehen:

• IndexDB als Key-Value artige Datenbank
• Cookies als kleine Textdateien
• Permanenter Rohspeicher (File System API)
• Lokaler Speicher bis zu 5 MB
• Sitzungsspeicher bis zu 5 MB

Diese kannst Du alle in dem Tab Application einsehen, manipulieren oder löschen. Progressive Web-Apps leben von den lokalen Speichern. Die Offline-Webseiten nutzen diese Ressourcen für die Zwischenspeicherung.

Schnell, Schneller, Lighthouse

Die Webseiten Geschwindigkeit ist ein wichtiger Ranking-Faktor bei Suchmaschinen. Des Weiteren verlierst Du mit jeder Sekunde mehr an Ladezeit Neukunden, weil einige (sehr) ungeduldig sind. Lädt der Shop des Konkurrents schneller, dann käuft der Neukunde tendenziell dort ein.

Das Tool Lighthouse hilft Dir, die Geschwindigkeit zu optimieren. Caching, Parallelisierung und Vereinfachung helfen Dir, die Ladezeit zu verkürzen. Ligthouse bewertet die Geschwindigkeit und gibt „Optimierungstipps“. Ein Wert über 80 (besser 95) ist erstrebenswert, weil Zeit Geld bedeutet.

Was kann ich tun, damit mein Score steigt?

• Komprimierungen Gzip oder Brotli nutzen:
  Statt die Daten in vollem Rohformat zu übertragen, solltest Du diese „gezippt“ von Deinem Server entsenden. Weniger Brutto-Daten müssen dazu über die Leitung fließen.
• Bilder anpassen:
  Der Browser muss kein 16 Megapixel Bild als ein Vorschaubild laden. Reduziere die Größe und nutze eine (verlustfreie) Kompression. Neue Formate wie WebP geben Dir noch mehr extra Speed.
• Langsame Tabellen optimieren:
  Alte Datenbankinstallation können über die Jahre voll müllen, sodass eine frische Neuinstallation eine Performance Vorteil bringt. Die Cache-Dateien von vor 5 Jahren braucht keine mehr, genauso wenig wie alte „Papierkorb“-Daten.
• Minimalisierung überall:
  Gehe Deine Webseite durch und überlege, ob Du einzelnen Komponenten noch brauchst. Das Plugin, was Du vor 3 Jahren getestet hast, sollte deinstalliert werden. Die Funktion X, die quasi 4 Jahre in Entwicklung ist, braucht sowieso ein Neuanfang. Entferne Sie. Achte darauf Funktionen möglichst mit einem / wenigen Tools darzustellen und vermeide Funktionsüberschnitte z. B. 3 verschiedene grafische Webseiten-Editoren.
• HTTP 2 oder HTTP 3 aktivieren:
  Das HTTP-Update ermöglicht es viele kleine Dateien in einem Schub kompakt zu übertragen.