Neu in den DevTools (Chrome 152)

Matthias Rohmer

Veröffentlicht am 25. August 2026

Chrome 152 bietet erhebliche Verbesserungen beim Debuggen von Netzwerken, z. B. das erneute Senden von Anfragen und die Prüfung binärer Nutzlasten, benutzerdefinierte Elementverzierungen und eine verbesserte CSS-Verschachtelung in den Elementen, Core Web Vitals für Soft-Navigations in den Live-Messwerten zur Leistung, den Export strukturierter Tabellen in der Konsole und Verbesserungen für den DevTools MCP-Server.

Entwicklertools für Agents

Die neueste Version v1.7.0 des Chrome-Entwicklertools MCP-Servers erweitert die zuvor eingeführten Funktionen zum Debuggen des Arbeitsspeichers für Coding-Agents wie Antigravity, Claude, Codex und andere:

• Details zu Heap-Snapshot-Objekten (get_heapsnapshot_object_details) : Detaillierte JavaScript-Objekteigenschaften, Klassennamen und GC-Root-Pfade direkt aus Heap-Snapshots prüfen.
• Filterung nach nativem V8-Kontext:Heap-Snapshot-Objekte nach nativem Ausführungskontext filtern und native Kontexte in Snapshot-Zusammenfassungen prüfen.
• Verbesserungen der Daemon-Stabilität und des Lebenszyklus:Begrenzte Aufbewahrung von Netzwerkanfragen pro Navigation, Validierung der Sitzungs-ID, Warnungen bei Versionsunterschieden zwischen CLI und Daemon und ordnungsgemäße Worker-Beendigung bei der Kontextfreigabe hinzugefügt.

Weitere Informationen und eine Anleitung für den Einstieg finden Sie im DevTools for agents-Repository auf GitHub.

Netzwerk: Anfragen bearbeiten und noch einmal senden, Vorabladestatistiken und binäre Nutzlasten decodieren

• Fetch- und XHR-Anfragen noch einmal senden:Das bisherige Kontextmenüelement „XHR noch einmal senden“ heißt jetzt Nochmal senden. Es unterstützt jetzt alle abrufbaren Netzwerkanfragen, wobei Standardanfragen in fetch()-Aufrufe umgewandelt werden und die vollständige Wiedergabetreue neben XHR erhalten bleibt. Anfragen verfolgen und zeigen auch ihren Ausführungskontext und den Konsolenursprung an.
• Spalte „Vorab geladen“ und „Als Vorabladeelement kopieren“ : In der neuen Spalte Vorab geladen wird angezeigt, ob eine Netzwerkanfrage mit spekulativer Vorabladung initiiert wurde. Sie können auch mit der rechten Maustaste auf eine beliebige Anfrage klicken und Als Vorabladeelement kopieren auswählen, um ein <link rel="preload"> Tag zu generieren, das Sie in Ihr HTML einfügen können. Early Hints werden jetzt in der Spalte Initiator kategorisiert.
• Binärer Viewer für Anfragenutzlasten:Der Tab Nutzlast enthält jetzt Optionen für die Decodierungsmethode (Base64, Hex und UTF-8) für binäre und komprimierte Anfragenutzlasten, genau wie der Tab „Antwort“.
• Spalte „Angepinnte Anfragennummer“:Die Spalte „Anfrage #“ ist jetzt an der ersten Position im Datenraster „Netzwerk“ angepinnt, um das Referenzieren von Anfragen zu erleichtern.
• Filterung nach Host derselben Website:Wenn Sie in der Filterleiste „Netzwerk“ nach Domains, Hostnamen oder Ports suchen (z.B. localhost oder example.com), werden jetzt Anfragen derselben Website korrekt gefiltert.
• Standardmäßige Decodierung von Abfrageparametern:Abfrage- und Formularparameter auf dem Tab „Nutzlast“ werden jetzt für alle Anfragen automatisch decodiert.

Chromium-Probleme: 40726969, 41299075, 40138847, 40222701, 525848667, 507077182, 498482622, 520437951, 40267477

Elemente: Benutzerdefinierte Elementverzierungen, Interaktionen mit übergeordneten CSS-Selektoren und Auswahl von $0-Pseudoelementen

Das Prüfen und Erstellen von Webkomponenten und modernem CSS ist im Bereich Elemente schneller und intuitiver:

• Verzierungsbadge für benutzerdefinierte Elemente: Für benutzerdefinierte HTML-Elemente (die durch Tags mit Bindestrichen oder is="..." Attribute für angepasste integrierte Elemente gekennzeichnet sind) wird jetzt im DOM-Baum ein custom-element Verzierungsbadge angezeigt.
• Interaktionen mit übergeordneten CSS-Selektoren und Spezifität:Wenn Sie den Mauszeiger auf übergeordnete Selektoren in verschachtelten CSS-Regeln und geerbten verschachtelten Regeln bewegen, werden jetzt übereinstimmende Elemente auf der Seite hervorgehoben und die Filterung auf dem Tab „Stile“ wird berücksichtigt. Tooltips zur Spezifität für @nested-declarations-Regeln hinzugefügt.
• Auswahl von Pseudoelementen über $0: Wenn Sie Pseudoelemente wie ::before oder ::after im DOM-Baum „Elemente“ auswählen, werden sie jetzt direkt an die $0 Konsolenvariable gebunden, um sie sofort in JavaScript zu prüfen.
• Automatische Vervollständigung für text-wrap und <image>-Typen: Im Bereich „Stile“ werden jetzt alle Schlüsselwortwerte für text-wrap (wrap, nowrap, balance, pretty, stable) vorgeschlagen und CSS-Eigenschaften, die <image> Datentypen akzeptieren, automatisch vervollständigt.
• Berücksichtigung von Scrollbars im Box-Modell:Im Diagramm mit den Messwerten des Box-Modells werden jetzt die Abmessungen des Inhaltsfelds korrekt berechnet und gerendert, wenn Elemente sichtbare Scrollbars haben.

Chromium-Probleme: 367440148, 535517817, 535522242, 535523039, 537724428, 399305533, 334984154, 383355294, 326260752, 389342065

Leistung: Messwerte für Soft-Navigations in Live-Messwerten und benutzerdefinierte Screenshot-Voreinstellungen

• Unterstützung für Soft-Navigations in Live-Messwerten:In der Ansicht „Live-Messwerte“ werden jetzt standardmäßig Core Web Vitals (z. B. LCP und INP) für clientseitige Soft-Navigations in Single-Page-Anwendungen erfasst und gemeldet. Dies wird durch ein Upgrade auf web-vitals v6.0.0 ermöglicht.
• Benutzerdefinierte Voreinstellungen für Screenshots:Konfigurierbare Voreinstellungen für die Größe und Anzahl der Screenshot-Frames für das CDP-Tracing im Bereich „Leistung“ verfügbar gemacht, um die visuelle Aufzeichnungstreue innerhalb der Arbeitsspeicherbudgets anzupassen.
• Trace-Anzeige für console.profileEnd():Wenn Sie console.profileEnd() in Ihrem Code oder in der Konsole aufrufen, wird der aufgezeichnete Trace jetzt automatisch im Bereich „Leistung“ geöffnet und angezeigt.
• Zusammenfassung benutzerdefinierter Tracks der Extensibility API:In den Zusammenfassungen von Leistungstraces werden jetzt benutzerdefinierte Trackgruppen verarbeitet und präsentiert, die mit der Extensibility API registriert wurden.

Chromium-Probleme: 514721939, 490140054, 536954453, 535506117

Konsole: Tabellen als Markdown oder CSV exportieren und Schutz vor Nebeneffekten

• Konsolentabellen als Markdown oder CSV kopieren:Tabellen, die mit console.table() protokolliert wurden, können jetzt direkt über das Kontextmenü als formatierte Markdown-Tabellen oder CSV-Daten in die Zwischenablage kopiert werden.
• Schutz vor Nebeneffekten bei der Auswertung:Die Hover-Auswertung des Debuggers schützt jetzt vor Ausdrücken, die new, getaggte Template-Literale, dynamische import()- und delete-Operatoren enthalten, und verhindert so versehentliche Zustandsänderungen während der Pause.

Chromium-Probleme: 40924951, 40133606

Weitere Highlights

Eine Zusammenstellung bemerkenswerter Verbesserungen in anderen Entwicklertools-Subsystemen:

• Quellen: „Schnell öffnen“ priorisiert jetzt lokale Arbeitsbereichsdateien mit einer hohen Punktzahl, sodass Arbeitsbereichsdateien über Netzwerk ressourcen angezeigt werden. (Chromium-Problem: 40260136)
• Arbeitsspeicher: In der Ansicht „Heap-Snapshot-Zusammenfassung“ werden jetzt die Gesamtzahl der Objekte sowie die aggregierten flachen Größen für ausgewählte Typen angezeigt. Außerdem sind Filter für den nativen Ausführungskontext enthalten. (Chromium-Problem: 497855658)
• Anwendung: Im Bereich Anzeigen wurde die Schaltfläche Anzeigen hervorheben direkt in den Bereich verschoben. Außerdem wurden anklickbare Anzeigen-Iframe-Element-IDs hinzugefügt, um Frames in der Hierarchie anzuzeigen, und eine Tabelle mit einer Aufschlüsselung der Messwerte pro Frame eingeführt. (Chromium-Problem: 514957134)
• Anwendung: Der Bereich Websitedaten löschen im Bereich „Speicher“ wurde in eine einheitliche, konsolidierte Gruppe umgestaltet (Chromium-Problem: 375867286). Außerdem wurden doppelte Cache Storage-Einträge nach der Wiederherstellung aus dem Back-Forward-Cache behoben (Chromium-Problem: 484693244).
• Erweiterungen: Asynchrone Methoden in chrome.devtools.panels geben jetzt nativ JavaScript-Promise-Objekte zurück, wenn sie ohne Callback aufgerufen werden. (Chromium-Problem: 496604551)
• Einstellungen: Standardmäßige Voreinstellungen für die Netzwerkdrosselung und benutzerdefinierte Drosselung konfigurationen in separate Bereiche aufgeteilt. (Chromium-Problem: 342409451)
• Lighthouse: Das gebündelte Lighthouse-Modul auf Version 13.4.1 aktualisiert. (Chromium-Problem: 40543651)
• Probleme: DevTools gibt eine Warnung aus, wenn ein Bild mit loading="lazy" keine expliziten width oder height Abmessungen hat.
• Gerätemodus: Das Menü für die Zoomstufe wurde mit der einheitlichen Option An Fenster anpassen vereinfacht. Außerdem wurde die Schaltfläche Geräterahmen anzeigen deaktiviert, wenn keine Rahmengrafiken verfügbar sind.

Verbesserungen der Bedienungshilfen

Chrome 152 enthält die folgenden Verbesserungen der Bedienungshilfen:

• Elemente und Bedienungshilfen: Kontextmenüoptionen hinzugefügt, um nahtlos zwischen dem DOM-Baum „Elemente“ und der Baumansicht „Bedienungshilfen“ zu wechseln. Außerdem die Option „In Ansicht scrollen“ für Bedienungshilfenknoten. (Chromium-Probleme: 417929842)
• Bedienungshilfen: Unterstützung für das Kopieren von Bedienungshilfenknoten und -unterbäumen als Nur-Text über das Kontextmenü hinzugefügt. (Chromium-Problem: 417929842)
• Elemente: Farben für die Suche mit geringem Kontrast im Bereich „Elemente“ behoben, wenn der dunkle Modus verwendet wird. (Chromium-Problem: 491718898)
• Navigation: Wenn Sie DevTools in ein separates Fenster ausdocken oder wieder in den Tab einfügen, wird der Fokus nicht mehr auf die Schaltfläche des Hauptmenüs gesetzt.
• Einstellungen: Beschreibender zugänglicher Kontext für die Schaltflächen „Mehr anzeigen“ und „Weniger anzeigen“ in den KI-Einstellungen hinzugefügt.