Versteckte Funktionen in den Chrome DevTools
Sie öffnen die Chrome DevTools wahrscheinlich dutzende Male am Tag. Console, Elements, Network – die übliche Routine. Aber die DevTools haben sich still und leise zu einer deutlich leistungsfähigeren Umgebung entwickelt, und die meisten ihrer besten Funktionen befinden sich eine Menüebene tiefer, als die meisten Entwickler schauen.
Hier sind die weniger bekannten Chrome DevTools-Funktionen, die es wert sind, in Ihren regulären Workflow aufgenommen zu werden.
Wichtigste Erkenntnisse
- CSS Overview bietet ein vollständiges Audit von Farben, Schriftarten und Spezifitätsproblemen – ideal, um Inkonsistenzen in Stylesheets vor einem Refactoring zu erkennen.
- Logpoints und Conditional Breakpoints ermöglichen das Debugging ohne Änderung des Quellcodes, überstehen Hot Reloads und erfordern kein erneutes Deployment.
- Der Coverage-Tab quantifiziert ungenutztes JavaScript und CSS pro Datei und liefert konkrete Ansatzpunkte für Code Splitting und Lazy Loading.
- Die Layout Shift Regions und die Main-Thread-Aufschlüsselung im Performance-Panel helfen Ihnen, CLS-Verursacher und kostspielige Style-Neuberechnungen zu identifizieren.
- Das Network Conditions-Panel, Request-Blocking-Tools und der Initiator-Tab bieten granulare Kontrolle über Request-Simulation und präzises Call-Stack-Tracing.
CSS Overview: Der Gesundheitscheck für Ihre Stylesheets
So öffnen Sie es: Klicken Sie auf das Drei-Punkte-Menü (⋮) → More Tools → CSS Overview.
Führen Sie eine Erfassung durch und Sie erhalten eine vollständige Aufschlüsselung aller Farben, Schriftfamilien, Schriftgrößen, Media Queries und Spezifitätsprobleme auf der Seite. In großen Codebasen ist dies von unschätzbarem Wert, um nahezu doppelte Farben wie #fff und #ffffff oder Selektoren mit so hoher Spezifität zu finden, dass sie sich nicht sauber überschreiben lassen.
Der Abschnitt Font Info ist besonders nützlich – er zeigt die tatsächliche Verteilung der gerenderten Schriftgrößen und -gewichte, was oft Inkonsistenzen aufdeckt, die Design Tokens eigentlich verhindern sollten.
Tipp: Verwenden Sie CSS Overview vor einem Design-System-Refactoring. Es gibt Ihnen ein klares Bild des Durcheinanders, bevor Sie mit dem Aufräumen beginnen. Weitere Details finden Sie in der offiziellen CSS Overview-Dokumentation.
Fortgeschrittenes Chrome DevTools-Debugging: Logpoints statt console.log
Hören Sie auf, Ihren Quellcode mit console.log zu übersäen. Klicken Sie im Sources-Panel mit der rechten Maustaste auf eine beliebige Zeilennummer und wählen Sie Add Logpoint. Geben Sie einen beliebigen Ausdruck ein – er wird in der Konsole protokolliert, ohne Ihren Code zu berühren.
Dies ist eine der am wenigsten genutzten Chrome DevTools-Debugging-Techniken. Logpoints überstehen Hot Reloads, erfordern kein erneutes Deployment und verschwinden sauber, wenn Sie fertig sind. Kombinieren Sie sie mit Conditional Breakpoints (Rechtsklick → Add Conditional Breakpoint), um die Ausführung nur dann anzuhalten, wenn ein bestimmter Ausdruck wahr ist – nützlich zum Debuggen intermittierender Bugs, die erst nach der 50. Iteration einer Schleife auftreten.
Coverage-Tab: Ungenutzten Code finden und eliminieren
So öffnen Sie es: Drei-Punkte-Menü → More Tools → Coverage.
Starten Sie die Aufzeichnung, interagieren Sie mit Ihrer Seite und stoppen Sie dann. Die DevTools zeigen Ihnen genau, welcher Prozentsatz jeder JS- und CSS-Datei nie ausgeführt wurde. Eine Datei mit 60–70% ungenutztem Code ist ein Kandidat für Code Splitting oder Lazy Loading.
Der Workflow ist unkompliziert: Coverage → toten Code identifizieren → aufteilen oder verzögern → LCP- und TTI-Verbesserung messen. Dies wirkt sich direkt auf Ihre Core Web Vitals-Werte aus.
Tipp: Coverage berücksichtigt keinen durch Interaktion ausgelösten Code. Zeichnen Sie auf, während Sie Ihre wichtigsten User Flows durchklicken, nicht nur beim Seitenladen.
Discover how at OpenReplay.com.
Performance-Panel-Einblicke: Debugging von Layout Shifts und Style Recalculation
Das Performance-Panel hat sich erheblich weiterentwickelt. Zeichnen Sie eine Session auf und schauen Sie sich die Main Thread-Aufschlüsselung an – insbesondere Style Recalc- und Layout-Events. Eine einzelne CSS-Property-Änderung an einem übergeordneten Element kann eine vollständige Layout-Neuberechnung über Hunderte von DOM-Knoten auslösen.
Für CLS-Debugging aktivieren Sie Layout Shift Regions über die Rendering-Drawer (Drei-Punkte-Menü → More Tools → Rendering), bevor Sie aufzeichnen. Verschobene Elemente werden Frame für Frame mit einem blauen Overlay hervorgehoben, sodass sofort ersichtlich ist, welches Element sich wann bewegt hat.
Vermeiden Sie es, Layout-Properties wie offsetHeight oder getBoundingClientRect() innerhalb von Schleifen abzufragen – jeder Aufruf erzwingt ein synchrones Layout, was sich schnell summiert.
Network Conditions-Panel: Granulare Request-Simulation und Tracing
Die meisten Entwickler kennen die globale Netzwerkdrosselung im Network-Tab. Weniger bekannt sind das Request Blocking- und das Network Conditions-Panel, die über das Drei-Punkte-Menü → More Tools zugänglich sind.
Das Network Conditions-Panel ermöglicht es Ihnen, den User Agent zu überschreiben und das Caching global zu deaktivieren. Die Netzwerkdrosselung selbst wird typischerweise über das Throttling-Dropdown im Network-Tab gesteuert, das langsamere Verbindungen zum Testen simuliert. Neuere Versionen der DevTools unterstützen auch eine granularere Request-Level-Drosselung über Request-Condition-Tools.
Request Blocking (More Tools → Network Request Blocking) ermöglicht es Ihnen, bestimmte URL-Muster vollständig zu blockieren – nützlich zum Testen, wie sich Ihre App verhält, wenn ein bestimmtes Drittanbieter-Script nicht geladen werden kann.
Um nachzuverfolgen, woher ein Request in Ihrem Code stammt, klicken Sie auf einen beliebigen Request im Network-Tab und öffnen Sie den Initiator-Tab. Er zeigt den exakten Call Stack, der den Request ausgelöst hat – eine schnelle Möglichkeit, unbekannte API-Aufrufe per Reverse Engineering zu analysieren oder herauszufinden, wo ein Fetch unerwartet ausgelöst wird.
Fazit
Die oben genannten Funktionen sind nicht um ihrer selbst willen obskur – sie lösen reale Probleme schneller als die Alternativen. CSS Overview ersetzt manuelle Stylesheet-Audits. Logpoints ersetzen Wegwerf-Console-Statements. Coverage macht Bundle-Optimierung konkret statt spekulativ.
Die besten Chrome DevTools-Debugging-Techniken haben eine Gemeinsamkeit: Sie reduzieren die Lücke zwischen „irgendetwas fühlt sich falsch an” und „ich weiß genau, was falsch ist”. Beginnen Sie mit einer Funktion aus dieser Liste, bauen Sie sie in Ihren Workflow ein, und der Rest folgt ganz natürlich.
FAQs
Logpoints sind an Ihre DevTools-Session und das spezifische Source-File-Mapping gebunden. Sie bleiben erhalten, solange der Seitenquellcode unverändert bleibt und die DevTools ihren Workspace-Status beibehalten. Sie werden jedoch nicht dauerhaft über Browser-Neustarts hinweg gespeichert, es sei denn, Sie verwenden einen Workspace mit lokalen File Overrides, die im Sources-Panel konfiguriert sind.
Tree-Shaking entfernt Code, der zur Build-Zeit basierend auf statischer Analyse nie importiert oder referenziert wird. Der Coverage-Tab misst die Laufzeitausführung und zeigt Code, der an den Browser ausgeliefert, aber während einer Session nie tatsächlich ausgeführt wurde. Sie ergänzen sich gegenseitig: Tree-Shaking erfasst tote Exports, während Coverage Code erfasst, der erreichbar, aber in der Praxis ungenutzt ist.
CSS Overview bietet keine integrierte Export-Funktion. Sie können jedoch Daten aus jedem Abschnitt manuell kopieren oder Screenshots erstellen. Für einen automatisierteren Ansatz sollten Sie Tools wie cssstats.com oder Wallace CLI in Betracht ziehen, die Stylesheets parsen und exportierbare Reports mit ähnlichen Farb-, Schrift- und Spezifitätsaufschlüsselungen erstellen.
Die Aktivierung von Layout Shift Regions über die Rendering-Drawer fügt ein visuelles Overlay hinzu, verzerrt aber Ihre Performance-Panel-Metriken nicht nennenswert. Die Kosten für das Rendering des Overlays sind vernachlässigbar. Für die genauesten Profiling-Ergebnisse schließen Sie andere Tabs, deaktivieren Sie Browser-Erweiterungen und verwenden Sie ein Inkognito-Fenster, um Störungen durch Hintergrundprozesse zu minimieren.
Understand every bug
Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
