Use the developer tools like a pro

20. Jun 2016

Andreas Fröwis

4 Min.

Effizienter hämmern mit den DevTools

Die Google Chrome DevTools (beziehungsweise deren Pendants in anderen Browsern) erleichtern jedem, der auch nur ansatzweise Webprogrammierung betreibt, das Leben. Sie sind unser tägliches Werkzeug. Wir debuggen damit, analysieren Requests, verändern das DOM und so weiter. Sie sind für uns so etwas Ähnliches, wie der Hammer für einen Handwerker. Doch was, wenn der Handwerker einen Hammer hätte, mit dem er nicht nur hämmern, sondern auch Schrauben eindrehen und Holz sägen könnte?

Auch wenn dieser All-in-one-Hammer nicht existiert (und wahrscheinlich äußerst unhandlich wäre), ist das mit den Chrome DevTools nicht so. Obwohl wir sie täglich verwenden, kennen die meisten Entwickler nur einen Bruchteil deren Features. Sie beinhalten viele verborgene Funktionen, die uns das Arbeiten erleichtern.

Elemente im DOM finden

Beginnen wir mit etwas Leichtem! Öffnen wir das DOM, dann können wir mit CTRL+F Elemente im DOM suchen. Neben einfachen Suchbegriffen (damit kann man bspw. nach einem Wort in einem <p>-Element suchen) ist es auch möglich, einen CSS-Selektor für die Suche zu verwenden.

Pro-Tipp: In der DevTools-Console speichert Chrome die zuletzt ausgewählten Elemente automatisch in einer Variable. Das zuletzt ausgewählte Element bekommen wir mit $0. Das Element, das davor ausgewählt wurde, mit $1 usw.

Workspaces

Mit Workspaces kann man Chrome in eine IDE verwandeln. Man kann lokale Dateien zu einem Workspace hinzufügen und dann die darin enthaltenen Dateien direkt im Browser bearbeiten. Änderungen werden sofort sichtbar und in die tatsächliche Datei geschrieben. Das ist besonders beim Bearbeiten von CSS- oder JavaScript-Dateien angenehm und erspart das ständige Wechseln zwischen Browser, DevTools und IDE.

Network Filmstrip

Mit dem Network Filmstrip können wir messen, wie genau unsere Seite aufgebaut wird und welche Teile davon wie schnell gerendert werden.Der Browser zeichnet hierbei nicht nur auf, welche Ressourcen nach einer bestimmten Zeit geladen wurden, sondern erstellt auch Screenshots der Seite zu dem Zeitpunkt.

Advanced Device Emulation

Natürlich kann Chrome mobile Geräte emulieren. Dabei werden unter anderem der Viewport, User-Agent und das Display emuliert. Es ist sogar möglich, Network-Throttling zu verwenden, um eine realitätsnahe Internetverbindung zu simulieren. Was die meisten nicht wissen, ist: Man kann unter anderem die Sensoren eines mobilen Gerätes emulieren. So ist es nicht nur möglich, die Geolocation des Devices zu simulieren, sondern auch das Accelerometer zu steuern. Somit kann auf dem Desktop eine Schwenkbewegung oder Ähnliches emuliert werden.

Inspect Animations

Animationen nachzuvollziehen ist alles andere als leicht. In sehr kurzer Zeit (oft nur einigen Millisekunden) werden meistens mehrere CSS-Properties gleichzeitig verändert. Doch auch hierbei helfen uns die DevTools weiter.

Chrome bemerkt, wenn auf einer Website eine Animation stattfindet, und zeichnet sie für uns auf. Wir können sie dann in verschiedenen Geschwindigkeiten abspielen. Zusätzlich werden die Werte der animierten CSS-Properties in einem Zeitdiagramm angezeigt.

Schneller Hämmern

Im Menü findet sich unter „Shortcuts“ eine Liste aller Tastatur-Shortcuts. Man kann nahezu alles mit der Tastatur steuern, was die Geschwindigkeit enorm erhöht. Arbeitet man ständig mit den DevTools, dann sollte man die wichtigsten Shortcuts definitiv beherrschen!

Die hier gezeigten Features sind nur ein Bruchteil dessen, was mit den DevTools möglich ist. Für weitere Tipps und Tricks kann ich den Twitter-Account von DevTools jedem ans Herz legen.