Neu in den DevTools, Chrome 137

Sofia Emelianova
Sofia Emelianova
GitHub

Google I/O 2025

Die Chrome-Entwicklertools werden auf der diesjährigen Google I/O eine wichtige Rolle spielen. Es wird eine Mischung aus Live- und aufgezeichneten Sitzungen geben.

Hier erfährst du mehr über die neuen Funktionen:

Sehen Sie sich außerdem die What's new on the web session von Rachel Andrew am 20. Mai 2025 um 16:30 Uhr PT an.

In unserem neuesten Video findest du einen kurzen Überblick über die aktuellen Highlights:

CSS-Änderungen mit Gemini in Ihrem Arbeitsbereich vornehmen und speichern

Mit wenigen Klicks können Sie jetzt CSS von Gemini ändern und korrigieren lassen und Ihre Änderungen mit einem verbundenen Arbeitsbereichordner in den Quelldateien auf Ihrem Computer speichern.

Automatische Arbeitsbereiche sind eine experimentelle Funktion. Sie können Ihren vorhandenen Quellordner verbinden oder eine Demo ausprobieren.

Wenn ein Arbeitsbereichordner verbunden ist, klicken Sie im Bereich Elemente auf KI fragen, bitten Sie Gemini, CSS zu ändern, klicken Sie auf Weiter, um die Änderungen live zu testen, maximieren Sie Nicht gespeicherte Änderungen, klicken Sie auf Auf Arbeitsbereich anwenden, prüfen Sie den Unterschied und klicken Sie auf Alle speichern.

Arbeitsbereichordner verbinden und Änderungen in den Quelldateien speichern

Sie können jetzt automatisch (oder manuell) einen Arbeitsbereichordner verbinden, damit DevTools Änderungen an JavaScript-, HTML- und CSS-Dateien in den Quelldateien auf Ihrem Computer speichert.

So funktioniert es mit JavaScript:

Chromium-Problem: 404170628.

Gemini nach Leistungsstatistiken fragen

Mit einem Klick auf eine Schaltfläche können Sie jetzt einen Chat mit Gemini starten, um die folgenden Leistungsstatistiken zu analysieren und darauf zu reagieren:

  • LCP nach Phase
  • LCP-Anfrageerkennung
  • Anfragen zum Blockieren des Renderings
  • Verursacher von Layout Shifts
  • Latenz der Dokumentanfrage

Die Ansicht vor und nach dem Hinzufügen der Schaltfläche „KI fragen“ zu einem Insight im Bereich „Leistung“.

Sie können uns gerne Feedback zur Funktion unter crbug.com/371170842 geben.

Leistungsdaten mit Gemini kommentieren

Sie können Gemini jetzt auffordern, Anmerkungen zu Ereignissen im Leistungs-Trace zu generieren.

Doppelklicken Sie auf ein Ereignis im Haupt-Track und klicken Sie dann neben dem Eingabefeld auf Label generieren. Gemini kann basierend auf dem Stacktrace und dem Kontext ein Label vorschlagen.

Screenshots in Ihre Chats mit Gemini einfügen

Im Bereich KI-Unterstützung können Sie jetzt auf die Schaltfläche Screenshot erstellen klicken, um einen Screenshot der Seite zu erstellen und ihn an Ihren Chat mit Gemini zu senden.

Sie können Screenshots verwenden, um Ihren Prompts zusätzlichen visuellen Kontext zu geben, z. B. um zu prüfen, ob alle sichtbaren Schaltflächen den gleichen Abstand haben.

Das Bild zeigt die Ansicht vor und nach dem Hinzufügen der Schaltfläche „Screenshot erstellen“ zum Bereich „KI-Unterstützung“.

Neue Statistiken im Bereich „Leistung“

In dieser Version sind im Bereich Leistung zwei neue Statistiken verfügbar: Duplicated JavaScript (Dupliziertes JavaScript) und Legacy JavaScript (Altes JavaScript).

Dupliziertes JavaScript

Unter Leistung > Statistiken > Dupliziertes JavaScript werden im Netzwerk-Track die Anfragen für große duplizierte JavaScript-Module in Ihren Bundles hervorgehoben, sofern sie auf Ihrer Seite vorhanden sind.

Die Statistik „Duplicated JavaScript“ (Dupliziertes JavaScript) im Bereich „Leistung“.

Sie können auch im Statistikbereich auf Strukturkarte ansehen klicken, um JavaScript-Abhängigkeiten zu untersuchen.

Veraltetes JavaScript

Unter Leistung > Statistiken > Altes JavaScript werden im Netzwerk-Track die Anfragen für altes JavaScript hervorgehoben, sofern es auf Ihrer Seite vorhanden ist. Das können beispielsweise Polyfills und Transformationen sein, die es älteren Browsern ermöglichen, neue JavaScript-Funktionen zu nutzen. Bei modernen Browsern hingegen sind viele davon nicht erforderlich.

Die Erkenntnis „Altes JavaScript“ im Bereich „Leistung“.

Spekulationen unterstützen jetzt Regel-Tags

Unter Anwendung > Spekulative Ladevorgänge werden jetzt Tags anstelle von URLs für Regelsätze angezeigt, sofern Tags vorhanden sind.

Vorher und nachher: Ersetzen der Regelgruppe-URL durch ein Tag.

Chromium-Problem: 393408589.

Lighthouse 12.6.0

Im Bereich Lighthouse wird jetzt Lighthouse 12.6.0 ausgeführt.

Die wichtigste Änderung in dieser Version ist, dass Lighthouse zu Leistungsprüfungen übergeht. In der Kategorie Leistung des Lighthouse-Berichts können Sie jetzt Statistiken ausprobieren.

Vor und nach dem Hinzufügen der Option zum Wechseln zu Statistiken in einem Lighthouse-Bericht.

Vollständige Liste der Änderungen

Die Grundlagen zur Verwendung des Lighthouse-Bereichs in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 40543651.

Sonstige Highlights

Hier sind einige wichtige Fehlerbehebungen und Verbesserungen in dieser Version:

  • Netzwerk: Das Parsen bekannter Formate von Server-Timings wurde hinzugefügt.
  • Sie können jetzt Zeilen in Tabellen mit Befehlstaste/Strg + Klick abwählen (Chromium-Problem: 409474445).
  • Unter Leistung > Statistiken > Effiziente Cache-Lebensdauer verwenden werden Assets mit einer TTL von mindestens 30 Tagen jetzt ignoriert.

Bedienungshilfen

Diese Version bietet die folgenden Verbesserungen in Bezug auf die Barrierefreiheit:

  • Leistung: Initiatorpfeile im Trace sind jetzt besser sichtbar.
  • Elemente: Sie können jetzt die barrierefreie Baumansicht für die gesamte Seite mit der Tastenkombination A ein- und ausblenden (Chromium-Problem: 40888478).

  • Screenreader geben jetzt unter anderem Folgendes aus:

    • „In Zwischenablage kopiert“, wenn Sie aus Codeblöcken kopieren.
    • „Auf Arbeitsbereich anwenden“, wenn Sie Änderungen in Ihrem Arbeitsbereich im Chat mit KI-Unterstützung anwenden.
    • „Label wird erstellt“, wenn Sie KI bitten, es unter Leistung > Anmerkungen zu erstellen.
    • Im Chat KI-Unterstützung sind Vorschläge für Prompts verfügbar.
    • Lesen Sie die geschätzten Einsparungen für relevante Statistiken unter Leistung > Statistiken vor.

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.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.