Neu in den DevTools, Chrome 131

Sofia Emelianova
Sofia Emelianova
GitHub

CSS mit Gemini debuggen

Die Chrome DevTools erhalten das neue experimentelle Steuerfeld KI-Unterstützung, in dem Sie mit Gemini chatten und Hilfe beim Entfernen von Fehlern in Ihrem CSS erhalten können.

Jetzt testen 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 . In den DevTools wird das neue Steuerfeld KI-Unterstützung geöffnet.

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

Im neuen Steuerfeld werden Sie aufgefordert, die entsprechende Einstellung zu aktivieren. Prüfen Sie, ob Sie die Anforderungen erfüllen, aktivieren Sie die Einstellung und kehren Sie zum Bereich KI-Unterstützung zurück. Dabei wird das von Ihnen ausgewählte Element 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 coole Dinge, die Sie mit der KI-Unterstützung von DevTools tun können und KI-Unterstützung für das Styling.

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

KI-Funktionen auf einem 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 werden wichtige Aspekte aufgeführt, KI-Funktionen beschrieben und Sie können sie einzeln aktivieren und deaktivieren.

Der neue Tab „KI-Innovationen“.

Weitere Informationen finden Sie unter Einstellungen > KI-Innovationen.

Console Insights nur einen Klick entfernt

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 Design sind jetzt nur noch einen Klick entfernt.

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

Verbesserungen am Bereich „Leistung“

Diese Version enthält eine Reihe von Verbesserungen am Bereich Leistung.

Leistungsergebnisse annotieren und teilen

Im Bereich Leistung wird links in einer ausziehbaren Seitenleiste der neue Tab Anmerkungen angezeigt. Damit können Sie Notizen für die Analyse von Traces und die Zusammenarbeit erstellen, wenn Sie Leistungsergebnisse teilen.

Sie können Ereignisse jetzt direkt im Diagramm beschriften und mit Pfeilen verbinden sowie Zeiträume hervorheben. Sie können die kommentierten Traces dann speichern, freigeben und wieder in den Bereich Leistung hochladen.

Der neue Tab „Anmerkungen“ in der linken Seitenleiste und das angenotete Ereignis, der angenotete Bereich und die angenotete Verbindung.

Leistungsstatistiken direkt im Bereich „Leistung“ abrufen

Auf dem neuen Tab Statistiken in der linken Seitenleiste des Bereichs Leistung finden Sie jetzt umsetzbare Informationen. Die Statistiken werden aus dem Lighthouse-Bericht und dem Bereich Leistungsstatistiken zusammengefasst, der demnächst eingestellt wird.

Auf dem Tab Statistiken finden Sie eine Anleitung zur Analyse und umsetzbare Informationen zu Leistungsproblemen, die Ihre Website verlangsamen können. Wenn Sie Statistiken verwenden möchten, öffnen Sie den Tab in der linken Seitenleiste des Bereichs Leistung, maximieren Sie die verschiedenen Kategorien und bewegen Sie den Mauszeiger auf Elemente oder klicken Sie darauf. 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 mit anderen Tools wie PageSpeed Insights und Lighthouse. Du kannst uns gerne unter crbug.com/371170842 Feedback geben.

Übermäßige Layoutverschiebungen leichter erkennen

Der Track Layoutänderungen hat ein neues Design erhalten. Die Layoutänderungen sind jetzt mit (gut sichtbaren) lila Rauten gekennzeichnet und werden anhand ihrer Nähe auf der Zeitachse in Clustern gruppiert. Sowohl für die Schichten als auch für ihre Cluster wird auf dem Tab Zusammenfassung eine Tabelle mit Zeitangaben, Bewertungen, Elementen und potenziellen Ursachen angezeigt.

Vorher und nachher: Aktualisierung des Tracks „Layoutänderungen“ und Neuorganisation des Tabs „Zusammenfassung“.

Zusätzlich wird in der Ansicht mit den Live-Messwerten das Protokoll Layoutänderungen mit Bewertungen und Elementen neben dem Tab Interaktionen angezeigt.

Vorher- und Nachher-Vergleich: Das Protokoll „Layoutänderungen“ wurde der Livemesswertansicht hinzugefügt.

Chromium-Problem: 369100729.

Nicht zusammengesetzte Animationen erkennen

Im Bereich Animationen finden Sie jetzt nützliche Informationen zu nicht zusammengesetzten Animationen:

  • Die Animationen werden nach der entsprechenden CSS-Eigenschaft benannt, falls vorhanden.
  • Nicht zusammengesetzte Animationen werden im Track mit roten Dreiecken markiert.
  • Auf dem Tab Zusammenfassung wird der Grund für den Fehler beim Zusammensetzen angezeigt.

Die Animationsvorlage im Track wird mit „Vorher“ und „Nachher“ beschriftet, nicht zusammengesetzte Animationen werden markiert und der Grund für den Fehler wird angezeigt.

Weitere Informationen finden Sie unter Nur für den Compositor bestimmte Eigenschaften verwenden und die Anzahl der Ebenen verwalten.

Chromium-Problem: 41006273.

Hardware-Nebenläufigkeit wird zu „Sensoren“ verschoben

Die Einstellung Hardware-Parallelität wird aus dem Bereich Leistung an einen geeigneteren Ort verschoben: den Bereich Sensoren.

Die Einstellung „Hardware-Parallelität“ vor und nach dem Verschieben in den Bereich „Sensoren“.

Chromium-Problem: 371463665.

Ignorieren Sie anonyme Scripts und konzentrieren Sie sich auf Ihren Code in Stacktraces

In Stack-Traces in der Console werden Frames aus Dateien, die auf der Ignorierliste stehen, jetzt richtig erkannt, ignoriert, minimiert und (falls maximiert) ausgegraut. Bisher wurde der Funktionsname im erweiterten Trace nicht ausgegraut.

Sie können auch die neuen Einstellungen > Ignorierliste > Anonyme Scripts von eval oder console aktivieren, um in den DevTools anonyme Scripts ohne Quell-URL zu ignorieren.

Die Liste der ignorierten Elemente in Stack-Traces vor und nach der Verbesserung

Wenn Sie das Konsolenprotokoll mit der rechten Maustaste anklicken und Speichern als… auswählen, wird der Text Mehr/weniger anzeigen nicht gespeichert.

Chromium-Probleme: 40279542, 40945570, 345248263.

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

Auf dem Tab Elemente > Stile sind jetzt folgende Optionen verfügbar:

  • Das Raster-Overlay im Darstellungsbereich 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 angezeigt. Vorher- und Nachher-Beispiele für die Auflösung von CSS-Keywords

Chromium-Probleme: 40280717, 40706051, 40501131.

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

Lighthouse kann jetzt Berichte für nicht HTTP-Seiten im Zeitspanne- und Snapshot-Modus generieren.

Die Prüfung vor und nach der Aktivierung für eine nicht-HTTP-Seite im Zeitspannen- und Snapshot-Modus.

Bedienungshilfen

Diese Version enthält folgende Verbesserungen der Barrierefreiheit:

  • Unter Quellen > Editor können Tabs mit geöffneten Dateien jetzt geschlossen werden, indem Sie den Fokus auf das 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.
  • Auf der Seite Leistung ist der Tab Statistiken in der linken Seitenleiste über die Tastatur zugänglich und kann per Tabulatortaste durchgegangen werden.

Chromium-Problem: 372411090.

Sonstige Highlights

Hier sind einige wichtige Fehlerkorrekturen und Verbesserungen in dieser Version:

  • Die Einstellungen für die Drosselung werden jetzt zwischen den Bereichen Leistung und Netzwerk korrekt synchronisiert (370332090).
  • Unter Anwendung > Hintergrunddienste > Vorausschauende Ladevorgänge > Regeln gibt es jetzt eine {}-Schaltfläche für die Darstellung in schöner Ansicht, ä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 verlassen, 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 Richtung von anchor-size() weglassen können (343516786). Außerdem wurde das Fallback-Rendering korrigiert (365802559).
  • Netzwerk: GraphQL-Vorschauen wurden korrigiert (369931288).
  • Leistung: Es wird jetzt der inkrementelle Fortschritt beim Laden und Verarbeiten von Traces erfasst.
  • WebAuthn: Anmeldedaten, die mit signal*-Methoden geändert wurden, werden jetzt dynamisch aktualisiert (368467199).
  • WebAssembly: In der Konsole werden Sie jetzt durch eine Warnung darüber informiert, ob für ein WebAssembly-Modul mehrere Debugsymbole verfügbar sind und welches davon verwendet wird (40879198, 369515221).
  • Das Core Web Vitals-Overlay wird vom Tab Rendering 328487897 entfernt.
  • Für generative KI-Funktionen ist jetzt keine Synchronisierung der Chrome-Einstellungen mehr erforderlich.

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

Neu in den DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.