Entwicklertools: DevTools öffnen und verwenden

Jeder moderne Browser wird mit einer integrierten Sammlung von Entwicklerwerkzeugen ausgeliefert. Mit den DevTools können Sie HTML und CSS untersuchen, JavaScript debuggen, die Performance analysieren, Netzwerkanfragen überwachen und vieles mehr – alles, ohne den Browser zu verlassen.

Öffnen Sie die DevTools mit F12 (Windows/Linux) oder Cmd+Option+I (Mac). Sie können auch mit der rechten Maustaste auf ein beliebiges Element klicken und Inspect auswählen. Das Tastenkürzel Ctrl+Shift+J / Cmd+Option+J öffnet direkt die Console.

Das Elements panel zeigt den Live-DOM-Baum. Klicken Sie auf ein beliebiges Element, um es auszuwählen und seine berechneten Styles im Styles-Bereich anzuzeigen. Sie können HTML- oder CSS-Werte per Doppelklick direkt bearbeiten – die Änderungen werden sofort übernommen, aber nicht in Ihrer Datei gespeichert.

Klicken Sie im Styles-Bereich auf einen beliebigen Eigenschaftswert, um ihn zu ändern. Fügen Sie mit dem +-Button neue Regeln hinzu. Verwenden Sie die Kontrollkästchen, um Regeln zu deaktivieren. So können Sie CSS am schnellsten ausprobieren, ohne zum Editor zu wechseln.

Die Console zeigt protokollierte Nachrichten, Warnungen und Fehler an. Sie können dort auch direkt JavaScript eingeben und ausführen. Verwenden Sie console.log(), console.warn(), console.error() und console.table(), um während des Debuggings Daten auszugeben.

Das Network panel zeigt jede HTTP-Anfrage, die die Seite ausführt. Wählen Sie eine Anfrage aus, um ihre Header anzuzeigen, den Antwort-Body in der Vorschau zu öffnen und das Timing-Waterfall-Diagramm zu prüfen. Filtern Sie nach Typ: XHR/Fetch, JS, CSS, Images, Fonts.

Für jede Anfrage werden folgende Phasen angezeigt: Queued, DNS Lookup, Initial Connection, SSL, Request Sent, Waiting (TTFB) und Content Download. TTFB (Time To First Byte) gibt Aufschluss über die Antwortzeit des Servers.

Verwenden Sie das Drosselungsmenü des Network-Panels, um langsame 3G- oder Offline-Bedingungen zu simulieren. Dadurch werden Performance-Probleme sichtbar, die bei schnellen Breitbandverbindungen verborgen bleiben, und Sie können Benutzererfahrungen entwickeln, die auch bei schlechten Verbindungen funktionieren.

Klicken Sie auf das Gerätesymbol (Ctrl+Shift+M / Cmd+Shift+M), um den Device Mode zu öffnen. Simulieren Sie mobile Viewports, DPR, Touch-Events und Netzwerkbedingungen. Wählen Sie Voreinstellungen wie iPhone 14 oder legen Sie eine eigene Breite fest.

Im Sources panel können Sie Ihre JavaScript-Dateien lesen und Breakpoints setzen. Ein Breakpoint pausiert die Ausführung, sodass Sie Variablenwerte und den Call Stack untersuchen und den Code mit F10 (step over) und F11 (step into) Zeile für Zeile durchgehen können.

Fügen Sie einen Haltepunkt hinzu, indem Sie in Sources auf eine Zeilennummer klicken. Wenn die Ausführung pausiert, bewegen Sie den Mauszeiger über Variablen, um ihre Werte anzuzeigen, oder geben Sie sie in der Console ein. Im Bereich Call Stack sehen Sie, welche Funktionen zu diesem Punkt geführt haben.

Welches DevTools-Panel zeigt alle HTTP-Anfragen an, die die Seite sendet, einschließlich ihrer Statuscodes und Antwortzeiten?

Elements: Untersuchen und bearbeiten Sie das aktuelle DOM. Console: Protokollieren Sie Meldungen und führen Sie JavaScript aus. Network: Überwachen Sie den HTTP-Datenverkehr. Sources: Setzen Sie Haltepunkte und debuggen Sie. Device Mode: Testen Sie responsive Layouts. Die Beherrschung dieser vier Panels wird Ihren Debugging-Workflow grundlegend verändern.