Neu in den Entwicklertools in Chrome 144

Matthias Rohmer

In Chrome 144 hat das Team eine lang erwartete Funktion für den Chrome DevTools-MCP-Server eingeführt: den neuen Bereich „Anfragebedingungen“ sowie Verbesserungen für das Debuggen von Schriftarten und übernommenen Stylesheets.

Das war die bemerkenswerte Liste der Funktionen, die wir 2025 eingeführt haben. Möchtest du sehen, ob du etwas verpasst hast? Sehen Sie sich dann die Highlights an oder durchsuchen Sie unsere früheren Ausgaben von „Neues in DevTools“.

Updates für den MCP-Server der Entwicklertools

Wir haben verschiedene Fehler auf dem DevTools-MCP-Server behoben und Version 0.12.1 veröffentlicht. In dieser Version wird das wichtige neue Feature „Automatische Verbindung“ eingeführt, mit dem Sie eine vorhandene Browsersitzung wiederverwenden können. Mit der automatischen Verbindung können Sie das Debugging in Chrome starten und dann DevTools MCP auf dieselbe Chrome-Instanz verweisen, um dort weiterzumachen, wo Sie aufgehört haben.

Weitere Informationen zur automatischen Verbindung für DevTools MCP Eine vollständige Liste der Änderungen und Fehlerkorrekturen finden Sie im öffentlichen Changelog auf GitHub.

Drosselung einzelner Netzwerkanfragen

Der Bereich „Blockierung der Netzwerkanfrage“ wurde in Anfragebedingungen umbenannt. Neben dem Blockieren von Anfragen können Sie in diesem Bereich jetzt auch einzelne Anfragen drosseln.

Öffnen Sie den Bereich über ⋮ > Weitere Tools > Anfragebedingungen. Klicken Sie das Kästchen Blockieren und Drosseln aktivieren an, um die Anfrageblockierung zu aktivieren. Klicken Sie auf die Schaltfläche +, um ein neues Textmuster hinzuzufügen. Klicken Sie auf das Symbol , um alle Regeln zu verwerfen.

Hier finden Sie Informationen dazu, wie Sie einzelne Netzwerkanfragen drosseln.

@font-face- und @font-feature-values-Regeln bearbeiten

@font-face und @font-feature-values werden jetzt im Bereich Stile angezeigt und können dort bearbeitet werden.

Übernommene Stylesheets im Elementbereich

Im Bereich Elemente werden jetzt übernommene Stylesheets unter Shadow-Roots und Dokument-Roots angezeigt. So können Entwickler, die mit konstruierten Stylesheets arbeiten, leichter Stylesheets finden, die sich auf ihre Elemente auswirken, und Stile debuggen, insbesondere wenn sie unerwartet nicht angewendet werden.

Neues in den Entwicklertools 2025

KI‑Innovationen

Mit Console insights haben KI-Innovationen inzwischen einen festen Platz in den Chrome-Entwicklertools. Das AI Assistance-Panel ist der zentrale Ort für kontextbezogenes, KI-gestütztes Debugging. Mit Codevorschlägen in den Bereichen „Konsole“ und „Quellen“ sowie automatischen Anmerkungen von Gemini in Ihren Leistungstraces bietet DevTools eine umfassende Reihe von KI-basierten Tools, mit denen Sie Ihre Arbeitsabläufe optimieren können.

  • End-to-End-Styling-Korrekturen:Bitten Sie Gemini, CSS-Probleme zu beheben, und speichern Sie diese Änderungen in Kombination mit Workspaces direkt in Ihren Quelldateien auf der Festplatte.
  • Leistung analysieren:Sie können jetzt mit KI-Unterstützung einen vollständigen Leistungs-Trace analysieren, sich einen detaillierten Überblick über einen beliebigen Leistungs-Insight verschaffen oder Gemini verwenden, um einen Trace zu kommentieren.
  • Visuelles Debugging:Das KI-Unterstützungsfeld ist jetzt multimodal. Sie können Bilder hochladen oder Screenshots erstellen, damit Gemini visuelle Fehler besser nachvollziehen und Ihnen beim Debugging helfen kann.

Leistung

Wir haben den Bereich Leistung neu gestaltet, um die Fehlersuche bei Leistungsproblemen zu vereinfachen und umsetzbare Informationen zu liefern. Eine aufgezeichnete Ablaufverfolgung enthält jetzt beispielsweise kuratierte Statistiken, mit denen Sie Engpässe schneller erkennen und in Ablaufverfolgungen schneller navigieren können. Weitere Verbesserungen:

Webplattform

DevTools hat mit der sich entwickelnden Webplattform Schritt gehalten und spezielle Tools für die neuesten CSS-Spezifikationen hinzugefügt, während die Entwicklerfreundlichkeit etablierter Funktionen verbessert wurde.

Wir haben das Deep-Tracing für komplexe CSS-Variablenketten hinzugefügt, die Baseline-Verfügbarkeit in den Property-Tooltips und vor Kurzem die Unterstützung für das Debugging komplexer Entry-Animationen mit der Regel @starting-style und einem visuellen Editor für das neue display: masonry-Layout.

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.