Filmstrips, Device Mode und Breakpoints: Das muss man kennen!

10 Tipps für die Chrome Developer Tools
Kommentare

Die Google Chrome Entwickler-Tools können was! Viele Entwickler kennen aber nur die Grundfunktionen und wissen überhaupt nicht, was damit sonst noch alles möglich ist. Der Funktionsumfang der Tools ist nämlich weitaus größer, als man annehmen würde. Und spätestens dann, wenn man einen Blick in die experimentellen Features wirft, wird es richtig spannend!

Das console-Objekt dürfte den meisten dann doch noch bekannt sein. Über dieses Objekt wird die Browserkonsole geöffnet, die das Debuggen von JavaScript-Quellcode ermöglicht. Doch die bekannten Methoden wie console.log haben ihre Nachteile. Zwar können damit Ausgaben erzeugt werden; gezielt eine bestimmte Information abzufragen, ist aber nicht immer möglich.

Die Chrome DevTools richtig nutzen – mit diesen Tipps

Um dieses Problem zu lösen, gibt es so einige Tipps, mit denen sich die Arbeit mit den Chrome Developer Tools vereinfachen lässt. Zum Beispiel die folgenden zehn Tipps:

Tipp 1: Breakpoints

Breakpoints vereinfachen die Arbeit. Über das Sources-Tab der Konsole kann eine Codezeile in einer bestimmten Datei ausgewählt werden, an der die Ausführung des Codes gestoppt werden soll. Die Zeile wird mit einem Marker hervorgehoben, danach muss die Anwendung neu geladen werden. Der Browser hält bei der erneuten Ausführung dann an genau diesem Punkt an.

Für Fehler, die nicht bei jeder Ausführung des Codes auftreten, können außerdem Bedingungen für Breakpoints definiert werden. Der Code wird dann nur angehalten, wenn diese Bedingung erfüllt ist. Dazu wird zuerst ein Breakpoint gesetzt und per Rechtsklick ausgewählt. Im Kontextmenü erscheint nun die Option „Edit Breakpoint…“

Auch im DOM ist es möglich, Code auf vergleichbare Weise zu stoppen. Über das Elements-Tab kann eine Codezeile ausgewählt werden, nach einem Rechtsklick darauf wird im Kontextmenü „Break on“ ausgewählt.

Stellen Sie Ihre Fragen zu diesen oder anderen Themen unseren entwickler.de-Lesern oder beantworten Sie Fragen der anderen Leser.

Tipp 2: Inline JS Values

Um noch bequemer mit Breakpoints arbeiten zu können, ist es nun mit den Inline-JS-Values möglich, den aktuellen Status der angehaltenen Variable anzeigen zu lassen. Das verrät Umar Hansa in seinen 6 Tipps zu den Chrome DevTools. Wenn die Funktion nicht automatisch aktiviert ist, kann sie über die Einstellungen -> General -> Sources gefunden werden.

Tipp 3: DOM durchsuchen

Um aber überhaupt im DOM eine Codezeile auswählen zu können, muss diese erst einmal gefunden werden. Gerade in komplexem Code ist das gar nicht so einfach. Schneller geht es mit der Suche per CSS-Selector: Mit Strg + F wird wie gewohnt die Suche geöffnet, nun kann CSS-Code eingegeben werden. Die Code-Hierarchie kann bei der Suche berücksichtigt werden; es ist also möglich, beispielsweise eine Codezeile spezifisch in den Comments zu finden.

Tipp 4: Performance

Ladezeit ist sicherlich nicht alles im Web, aber eben doch ein wichtiges Thema bei der Entwicklung neuer Websites. Immerhin warten User nicht gerne, also darf dieser Aspekt bei der Entwicklung nicht vergessen werden.

Das Network und das Timeline-Tab sind hier ja schon ganz gut dazu geeignet, einen Eindruck der Ladezeit der verschiedenen Prozesse zu bekommen, aber nicht der einzige Weg in den Chrome DevTools. Im JavaScript-Quellcode lässt sich über die Methode window.performance.getEntries ein Array mit Informationen zu allen Requests erstellen.

Filmstrip-Darstellung im Network-Tab

Filmstrip-Darstellung im Network-Tab (Quelle: entwickler.de)

Tipp 5: Geheimtipp: Kamera!

Um einen besonders detaillierten Einblick in das Ladeverhalten einer Seite zu bekommen, hat Google Chrome eine ganz neue Funktion an Board. Mit dem Network Filmstrip werden Screenshots während des Ladens erzeugt, die dann in einer Zeitleiste im Network-Tab angezeigt werden. Das Tool ist allerdings noch in der Experimental-Phase und dementsprechend schwer zu finden. Und das aus gutem Grund – experimentelle Funktionen können zu unerwarteten Problemen führen. Wer den Filmstrip also nutzen möchte, sollte wissen, worauf er sich einlässt.

Immerhin hat es der Network Filmstrip aber schon in das Stable Release von Google Chrome geschafft, steht also der Allgemeinheit zur Verfügung. Zuerst müssen unter chrome://flags/ die experimentellen Entwicklertools aktiviert werden. Danach erscheint in den Einstellungen der Entwicklertools ein Menü, über das diese verschiedenen experimentellen Tools ausgewählt werden können. Die Network Filmstrips sind aber auch hier erst sichtbar, nachdem sechsmal die Shift-Taste gedrückt wurde. Nach der Auswahl der gewünschten Tools wird der Browser neu gestartet. Danach findet sich im Network-Tab ein Kamera-Symbol, über das die Network Filmstrips verwendet werden können.

Tipp 6: Device Mode

Auch für mobile Devices kann die Ladezeit direkt über die Chrome DevTools beurteilt werden. In der Kopfzeile der Entwicklertools befindet sich neben den Tabs ein Smartphone-Symbol. Darüber kann im Device Mode die Darstellung einer Seite auf verschiedenen mobile Devices emuliert werden; sogar Retina-Displays sind darstellbar. Auch über die Performance auf Mobilgeräten gibt der Device Mode Auskunft, inklusive einer Berechnung der Ladezeit unter Berücksichtigung mobiler Verbindungen.

Der Device Mode

Der Device Mode (Quelle: entwickler.de)

Tipp 7: Media Query Inspector

Im Device Mode steht auch der Media Query Inspector zur Verfügung. Dieser zeigt die Media Querys der Stylesheets an. Hier ist es dann beispielsweise möglich, über „reveal sourcecode“ direkt zur jeweiligen Codezeile zu gelangen. Steht der Mauszeiger über einem Segment, wird außerdem die genaue Regel angezeigt, die dieses Segment definiert.

Tipp 8: Response kopieren

Im Network-Tab erscheint die Funktion „copy response“ nach einem Rechtsklick auf ein Element. Der kopierte Inhalt wird dann dem Clipboard hinzugefügt und kann per Drag-and-Drop ins Sources-Panel eingefügt werden.

Tipp 9: Als cURL kopieren

An gleicher Stelle befindet sich die Option „copy as cURL“. Dabei wird ein terminal-taugliches Command im Clipboard abgelegt, das auch die original Request-Header enthält.

Tipp 10: Animation Inspection

Die Animation Inspection gehört auch wieder zu den experimentellen Funktionen der DevTools. Wer häufig mit CSS-Animationen arbeitet, sollte allerdings einen Blick darauf werfen. Über das neue Tool kann man das Debuggen nämlich viel einfacher machen! Durch die Animation Inspection können Animationen direkt in den DevTools verlangsamt und sogar angehalten werden.

Wer sich diese Tipps zu Nutze macht, kann schon viel effektiver mit den DevTools in Google Chrome arbeiten. Vor allem die noch experimentellen Funktionen können dabei echt Spaß machen und viele Arbeitsschritte vereinfachen. Aber auch, wer sich nicht so recht an experimentelle Funktionen heran traut, kann sich freuen: Bewährt sich eine Funktion, wird sie irgendwann zum Standard gehören. Gerade diese stetige Weiterentwicklung ist es wohl auch, die die Chrome DevTools zu einem eigentlich unverzichtbaren Helfer für Entwickler macht.

Aufmacherbild: Different kinds of tools on wooden background von Shutterstock.com / Urheberrecht: Sergiy Kuzmin

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -