Neu in den DevTools, Chrome 131

Sofia Emelianova
Sofia Emelianova
GitHub

CSS mit Gemini debuggen

In den Chrome-Entwicklertools gibt es jetzt den neuen experimentellen Bereich zur KI-Unterstützung, in dem Sie mit Gemini chatten und Hilfe beim Debuggen Ihres CSS erhalten können.

Jetzt ausprobieren Klicken Sie im Bereich Elemente mit der rechten Maustaste auf ein Element und wählen Sie KI fragen aus oder klicken Sie neben dem Element auf die entsprechende Schaltfläche . DevTools öffnet den neuen Bereich KI-Unterstützung.

Die Menüoption „KI fragen“ und die entsprechende Schaltfläche.

Im neuen Bereich werden Sie aufgefordert, die entsprechende Einstellung zu aktivieren. Prüfen Sie, ob Sie die Anforderungen erfüllen, aktivieren Sie den Schalter und kehren Sie zum Bereich KI-Unterstützung zurück. Das ausgewählte Element wird als Kontext verwendet. Geben Sie Ihre Frage zum Element ein.

Der neue Bereich für KI-Unterstützung, in dem ein Prompt beantwortet wird.

Weitere Informationen zur optimalen Verwendung des neuen Bereichs finden Sie unter 5 Cool Things To Do with DevTools AI Assistance und AI Assistance for Styling.

Das DevTools-Team freut sich auf Ihr Feedback. Sie können es unter crbug.com/364805393 hinterlassen.

KI-Funktionen über einen separaten Tab in den Einstellungen verwalten

Sie können jetzt alle KI-Funktionen an einem Ort verwalten: auf dem neuen Tab Einstellungen > KI-Innovationen. Dort finden Sie wichtige Überlegungen, Beschreibungen von KI‑Funktionen und die Möglichkeit, diese einzeln zu aktivieren und zu deaktivieren.

Der neue Tab „KI-Innovationen“

Weitere Informationen finden Sie unter Einstellungen > KI-Innovationen.

Console Insights mit einem Klick aufrufen

Für KI-Funktionen in den Entwicklertools ist keine aktivierte Synchronisierung der Einstellungen mehr erforderlich. Die zuvor veröffentlichten Console-Statistiken und die KI-Unterstützung für das Styling sind also nur einen Klick entfernt.

Wenn Sie in Chrome angemeldet sind, können Sie diese Funktionen unter Einstellungen >  KI-Innovationen aktivieren.

Verbesserungen am Bereich „Leistung“

Diese Version enthält eine Reihe von Verbesserungen für den Bereich Leistung.

Leistungsergebnisse mit Anmerkungen versehen und teilen

Das Steuerfeld Leistung enthält jetzt den neuen Tab Anmerkungen in einer maximierbaren Seitenleiste auf der linken Seite. So wird das Erstellen von Notizen für die Analyse von Traces und die Zusammenarbeit beim Teilen von Leistungsergebnissen vereinfacht.

Sie können jetzt Ereignisse direkt auf dem Trace mit Pfeilen kennzeichnen und verbinden sowie Zeiträume hervorheben. Sie können dann mit Anmerkungen versehene Traces speichern, freigeben und wieder in den Bereich Leistung hochladen.

Der neue Tab „Anmerkungen“ in der Seitenleiste auf der linken Seite sowie das mit Anmerkungen versehene Ereignis, der Bereich und die Verbindung.

Leistungsstatistiken direkt im Bereich „Leistung“ abrufen

Auf dem neuen Tab Statistiken in der linken Seitenleiste des Bereichs Leistung finden Sie jetzt umsetzbare Statistiken. Die Statistiken werden aus dem Lighthouse-Bericht und dem Steuerfeld „Leistungsstatistiken“ zusammengeführt, das demnächst eingestellt wird.

Der Tab Insights bietet geführte Analysen und umsetzbare Informationen zu Leistungsproblemen, die Ihre Website verlangsamen können. Wenn Sie Statistiken nutzen möchten, öffnen Sie den Tab in der linken Seitenleiste des Bereichs Leistung, maximieren Sie verschiedene Kategorien und bewegen Sie den Mauszeiger auf Elemente, um sie anzuklicken. Im Bereich Leistung werden die entsprechenden Ereignisse im Trace hervorgehoben.

Das DevTools-Team freut sich auf Ihr Feedback zur Nützlichkeit der Statistiken, zu Verbesserungsmöglichkeiten und zu Ihren Erfahrungen bei der Verwendung der Statistiken in Kombination mit anderen Tools wie PageSpeed Insights und Lighthouse. Sie können uns gerne Feedback unter crbug.com/371170842 geben.

Übermäßige Layout Shifts leichter erkennen

Der Track Layoutverschiebungen hat ein neues Design. Layoutverschiebungen werden jetzt mit (besser sichtbaren) lila Rauten gekennzeichnet und anhand ihrer Position auf der Zeitachse in Clustern gruppiert. Sowohl für die Schichten als auch für die Cluster wird auf dem Tab Zusammenfassung eine übersichtliche Tabelle mit Zeitangaben, Werten, Elementen und potenziellen Ursachen angezeigt.

Die Screenshots zeigen die Seite „Übersicht“ vor und nach der Aktualisierung des Tracks „Layoutverschiebungen“ und der Neuorganisation des Tabs „Zusammenfassung“.

Außerdem wird der Log Layoutverschiebungen mit Werten und Elementen neben dem Tab Interaktionen in der Ansicht mit Live-Messwerten angezeigt.

Die Ansicht der Livestatistiken vor und nach dem Hinzufügen des Logs „Layoutverschiebungen“.

Chromium-Problem: 369100729.

Nicht zusammengesetzte Animationen erkennen

Auf dem Tab Animationen finden Sie jetzt nützliche Informationen zu nicht zusammengesetzten Animationen:

  • Benennt die Animationen entsprechend der entsprechenden CSS-Property, falls vorhanden.
  • Nicht zusammengesetzte Animationen werden im Track mit roten Dreiecken markiert.
  • Auf dem Tab Zusammenfassung wird der Grund für das Fehlschlagen des Compositing angezeigt.

Die Animationen für die Namensgebung vor und nach dem Compositing werden im Track angezeigt. Nicht zusammengesetzte Animationen werden markiert und der Grund für den Fehler wird angegeben.

Weitere Informationen finden Sie unter Nur Compositor-Properties verwenden und Anzahl der Ebenen verwalten.

Chromium-Problem: 41006273.

Hardware-Nebenläufigkeit wird zu „Sensors“ verschoben

Die Einstellung Hardware-Concurrency wird vom Bereich Leistung in den Bereich Sensoren verschoben.

Die Einstellung „Hardware-Concurrency“ wurde in den Bereich „Sensoren“ verschoben.

Chromium-Problem: 371463665.

Anonyme Skripts ignorieren und sich auf Ihren Code in Stacktraces konzentrieren

Stapelüberprüfungen in der Console erkennen, ignorieren, minimieren und (falls maximiert) grauen jetzt Frames aus Dateien, die auf der Ignorierliste stehen. Bisher wurde der Funktionsname im erweiterten Trace nicht ausgegraut.

Sie können auch die neuen aktivieren: Einstellungen > Ignorierliste > Anonyme Skripts aus „eval“ oder der Konsole. Dadurch werden anonyme Skripts ohne Quell-URL in den DevTools ignoriert.

Die Vorher- und Nachher-Verbesserung der Ignorierliste in Stacks.

Wenn Sie mit der rechten Maustaste auf das Konsolenprotokoll klicken und Speichern unter… auswählen, wird der Text Mehr/Weniger anzeigen nicht gespeichert.

Chromium-Probleme: 40279542, 40945570, 345248263.

„Elemente“ > „Stile“: Unterstützung von sideways-*-Schreibmodi für Raster-Overlays und CSS-weiten Keywords

Auf dem Tab Elemente > Stile wird jetzt Folgendes unterstützt:

  • Das Raster-Overlay im Viewport zeigt jetzt Raster für die Schreibmodi sideways-rl und sideways-lr an.
  • Löst CSS-weite Keywords auf. Wenn inherit beispielsweise eine Farbe ist, wird auf dem Tab Stile eine Farbauswahl daneben angezeigt. Vor und nach dem Auflösen von CSS-weiten Keywords.

Chromium-Probleme: 40280717, 40706051, 40501131.

Lighthouse-Prüfungen für Nicht-HTTP-Seiten im Zeitspannen- und Snapshotmodus

Lighthouse kann jetzt Berichte für Nicht-HTTP-Seiten im Zeitrahmen- und Snapshot-Modus erstellen.

Die Ergebnisse vor und nach dem Aktivieren der Prüfung für eine Nicht-HTTP-Seite im Zeitspannen- und Snapshot-Modus.

Bedienungshilfen

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

  • Unter Quellen > Editor können Tabs mit geöffneten Dateien jetzt geschlossen werden, indem Sie den Fokus auf die Schaltfläche X legen und die Eingabetaste oder die Leertaste drücken.
  • Unter Leistung können Sie jetzt einen Eintrag im Trace auswählen und die Leertaste drücken, um das Kontextmenü zu öffnen.
  • Unter Leistung ist der Tab Statistiken in der Seitenleiste links über die Tastatur zugänglich und kann mit der Tabulatortaste durchlaufen werden.

Chromium-Problem: 372411090.

Sonstige Highlights

Hier sind einige wichtige Fehlerbehebungen und Verbesserungen in dieser Version:

  • Die Drosselungseinstellungen werden jetzt korrekt zwischen den Bereichen Leistung und Netzwerk synchronisiert (370332090).
  • Unter Anwendung > Hintergrunddienste > Spekulative Ladevorgänge > Regeln gibt es jetzt eine Schaltfläche zum Formatieren {}, ähnlich wie unter Quellen > Editor (40279147).
  • Live-Ausdrücke: Wenn Sie nach der Auswahl einer Option für die automatische Vervollständigung die Tabulatortaste drücken, wird das Bearbeitungsfeld jetzt geschlossen, anstatt den Text einzurücken (349939551).
  • Elemente > Stile: anchor() und anchor-size() unterstützen eine neue Syntax, mit der Sie Argumente neu anordnen und die anchor-size()-Richtung weglassen können (343516786). Außerdem wurde das Fallback-Rendering korrigiert (365802559).
  • Netzwerk: GraphQL-Vorschau korrigiert (369931288).
  • Leistung: Hier wird jetzt der inkrementelle Fortschritt beim Laden und Verarbeiten von Traces angezeigt.
  • WebAuthn: Anmeldedaten, die durch signal*-Methoden geändert wurden, werden jetzt dynamisch aktualisiert (368467199).
  • WebAssembly: In der Konsole wird jetzt eine Warnung angezeigt, wenn für ein WebAssembly-Modul mehrere Debugsymbole verfügbar sind und welches verwendet wird (40879198, 369515221).
  • Das Core Web Vitals-Overlay wird vom Tab Rendering entfernt 328487897.
  • Für auf generativer KI basierende Funktionen ist jetzt keine Synchronisierung der Chrome-Einstellungen mehr erforderlich.

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.