Neu in den DevTools, Chrome 131

Sofia Emelianova
Sofia Emelianova
GitHub

CSS mit Gemini debuggen

In den Chrome-Entwicklertools wird der neue experimentelle Bereich KI-Unterstützung angezeigt, in dem Sie mit Gemini chatten und Hilfe beim Debuggen Ihres CSS-Codes 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. Das ausgewählte Element wird als Kontext verwendet. Geben Sie Ihre Frage zum Element ein.

Antwort auf einen Prompt im neuen KI-Supportbereich.

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 dein Feedback. Sie können sie unter crbug.com/364805393 hinterlassen.

Steuere die KI-Funktionen über einen eigenen Tab „Einstellungen“

Du kannst jetzt alle KI-Funktionen an einem Ort verwalten: über den neuen Tab Einstellungen > KI-Innovationen. Darin finden Sie wichtige Überlegungen sowie Beschreibungen von KI-Funktionen. Außerdem können Sie 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 muss die Synchronisierung der Einstellungen nicht mehr aktiviert sein. Die zuvor veröffentlichten Console-Statistiken und die KI-Unterstützung beim Gestalten von Karteninhalten sind nur einen Klick entfernt.

Wenn du in Chrome angemeldet bist, kannst du diese Funktionen unter Einstellungen > KI-Innovationen aktivieren – und schon kann es losgehen.

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 Termine jetzt mit Pfeilen beschriften und verbinden und Zeitbereiche direkt im Trace hervorheben. Sie können die kommentierten Traces dann speichern, freigeben und wieder in den Bereich Leistung hochladen.

Der neue Tab für Anmerkungen in der linken Seitenleiste sowie mit Anmerkungen versehene Ereignisse, Bereiche und Verbindungen.

Leistungsstatistiken direkt im Bereich „Leistung“ abrufen

Auf dem neuen Tab Statistiken in der linken Seitenleiste des Bereichs Leistung finden Sie jetzt umsetzbare Informationen. Die konsolidierten Statistiken stammen aus dem Lighthouse-Bericht und dem Bereich Leistungsstatistiken, 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 nutzen möchten, öffnen Sie im Bereich Leistung in der linken Seitenleiste den Tab, maximieren Sie die verschiedenen Kategorien und bewegen Sie den Mauszeiger auf Elemente. Im Bereich Leistung werden die entsprechenden Ereignisse im Trace hervorgehoben.

Das Entwicklertools-Team freut sich auf Ihr Feedback zur Nützlichkeit von Statistiken, Verbesserungsmöglichkeiten und Ihre 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 Shifts erhält ein neues Design. Die Layoutänderungen sind jetzt mit (gut sichtbaren) lila Rauten gekennzeichnet und werden basierend auf 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“.

Darüber hinaus wird in der Live-Messwertansicht neben dem Tab Interaktionen das Log Layout Shifts mit Werten und Elementen angezeigt.

Das vor und nach dem Hinzufügen des Protokolls „Layout Shifts“ zur Live-Messwertansicht.

Chromium-Problem: 369100729.

Nicht zusammengesetzte Animationen erkennen

Im Track 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 Summary (Zusammenfassung) sehen Sie den Grund für den Compositing-Fehler.

Die Vorher- und Nachher-Benennung von Animationen im Track, die Markierung nicht zusammengesetzter Animationen und die Angabe der Fehlerursache.

Weitere Informationen finden Sie unter Nur Compositor-Eigenschaften beibehalten und Ebenenanzahl verwalten.

Chromium-Problem: 41006273.

Hardware-Nebenläufigkeit wird zu „Sensoren“ verschoben

Die Einstellung Hardware-Nebenläufigkeit wurde aus dem Bereich Leistung an eine passendere Stelle verschoben – in 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

Die Stacktraces in der Konsole erkennen, ignorieren, minimieren und (falls maximiert) ausgegraute Frames, die aus Dateien stammen, die auf der Ignorieren-Liste stehen. Bisher wurde der Funktionsname im erweiterten Trace nicht ausgegraut.

Sie können auch die neuen unter Einstellungen > Ignorieren-Liste > Anonyme Skripts aus der Evaluierung oder Konsole aktivieren, um die Entwicklertools so einzurichten, dass anonyme Skripts ohne Quell-URL ignoriert werden.

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. Das Vorher-Nachher-Lösen von Keywords für das gesamte Preisvergleichsportal.

Chromium-Probleme: 40280717, 40706051, 40501131.

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

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

Die Prüfung vor und nach der Aktivierung der Prüfung für Nicht-HTTP-Seiten im Zeitraum- und Snapshot-Modus.

Bedienungshilfen

In dieser Version wurden die Bedienungshilfen verbessert:

  • 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 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 Drosselungseinstellungen werden jetzt korrekt zwischen den Bereichen Leistung und Netzwerk (370332090) synchronisiert.
  • Unter Anwendung > Hintergrunddienste > Vorausschauende Ladevorgänge > Regeln gibt es jetzt eine Schaltfläche für die schöne Darstellung {}, ä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 die 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: Fehlerkorrekturen für GraphQL-Vorschauen (369931288).
  • Leistung: Es wird jetzt der inkrementelle Fortschritt beim Laden und Verarbeiten von Traces erfasst.
  • WebAuthn: Durch signal*-Methoden (368467199) geänderte Anmeldedaten werden jetzt dynamisch aktualisiert.
  • 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 Funktionen mit generativer KI ist jetzt keine Synchronisierung der Chrome-Einstellungen mehr erforderlich.

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Diese Vorabversionen bieten Zugriff auf die neuesten DevTools-Funktionen, ermöglichen den Test moderner Webplattform-APIs 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 DevTools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools