Neue Funktionen in den Entwicklertools, Chrome 125

Sofia Emelianova

Fehler und Warnungen in der Console mit Gemini besser nachvollziehen

Diese Chrome-Version bietet Funktionen basierend auf generativer KI in der Entwicklertools-Konsole, damit du besser nachvollziehen kannst, welche Fehler und Warnungen auftreten.

Wenn Sie eine KI-generierte Erklärung eines Fehlers oder einer Warnung erhalten möchten, klicken Sie neben der Meldung in der Console auf die Schaltfläche Diesen Fehler verstehen (Warnung) und folgen Sie der Anleitung.

Weitere Informationen finden Sie im Hilfeartikel Fehler und Warnungen mit KI besser verstehen.

Unterstützung von @position-try-Regeln unter „Elemente“ > „Stile“

Zur Fehlerbehebung bei der Positionierung von CSS-Ankern werden auf dem Tab Elemente > Styles jetzt @position-try CSS-Regeln unterstützt. Auf dem Tab werden position-try-options-Werte aufgelöst und jede Option mit einem speziellen @position-try --name-Abschnitt verknüpft.

Weitere Informationen finden Sie unter Die CSS-API zur Positionierung von Ankern.

Chromium-Problem: 40279608.

Verbesserungen am Bereich „Quellen“

Diese Version enthält mehrere Verbesserungen am Bereich Quellen.

Automatisches Drucken in Klammern und Schließen von Klammern konfigurieren

Sie können jetzt das automatische Formatieren und Schließen von Klammern für den Editor unter Quellen aktivieren oder deaktivieren. Durch die Quelltextformatierung werden minimierte Dateien lesbar. Wenn Sie eine schließende Klammer eingeben, wird automatisch eine schließende Klammer () oder }) oder ein Tag (>) hinzugefügt, wenn Sie eine öffnende Klammer eingeben.

Um das entsprechende Verhalten zu konfigurieren, setzen oder entfernen Sie ein Häkchen in den neuen Optionen check_box Auto closing brackets (Klammern automatisch schließen) und check_box Automatically pretty print minified sources (Minimierte Quellen automatisch in schöner Darstellung anzeigen) unter settings Settings > Preferences > Sources.

Chromium-Probleme: 40865010, 324314570.

Gehandhabte abgelehnte Versprechen werden als erkannt erkannt

Im Bereich Quellen werden abgelehnte Versprechen jetzt korrekt als abgefangen erkannt, wenn Sie sie mit .catch() oder .then() mit zwei Argumenten verarbeitet haben.

Mit anderen Worten: Wenn Quellen > Haltepunkte > check_box Pause bei nicht abgefangenen Ausnahmen aktiviert ist, pausiert der Debugger nicht bei Anweisungen wie den folgenden:

Promise.reject(new Error('fail')).catch((e)=>console.log('caught'));

Chromium-Problem: 40283993.

Fehlerursachen in der Konsole

In der Console werden jetzt Ketten von Fehlerursachen im Stacktrace angezeigt, sofern vorhanden.

Um die Fehlerbehebung zu erleichtern, können Sie Fehlerursachen angeben, wenn Sie Fehler abfangen und noch einmal werfen. Wenn die Console die Ursache der Fehlerkette ermittelt, wird jeder Fehlerstapel mit dem Präfix Caused by: ausgegeben, damit Sie den ursprünglichen Fehler sehen können.

Chromium-Problem: 40182832.

Verbesserungen beim Netzwerkbereich

Diese Version enthält mehrere Verbesserungen am Bereich Netzwerk.

Header für Early Hints prüfen

Die Header „Early Hints“ erhalten im Bereich Network auf dem Tab Headers der Anfrage einen eigenen Abschnitt. Bisher waren die entsprechenden Header im Bereich Antwortheader zu finden.

Early Hints ist ein HTTP-Statuscode (103 Early Hints), mit dem vor einer endgültigen Antwort eine vorläufige HTTP-Antwort gesendet wird. So kann ein Server dem Browser Hinweise zu wichtigen Unterressourcen (z. B. ein Stylesheet oder kritisches JavaScript) oder Ursprüngen senden, die wahrscheinlich von der Seite verwendet werden, während der Server die Hauptressource generiert.

Weitere Informationen finden Sie unter Schnelleres Laden von Seiten mithilfe der Server-Überlegungszeit mit Early Hints.

Chromium-Problem: 40222701.

Spalte „Wasserfall“ ausblenden

Sie können die Spalte Abfolge im Bereich Werbenetzwerk jetzt wie andere Spalten ausblenden. Klicken Sie mit der rechten Maustaste auf einen beliebigen Spaltennamen und entfernen Sie das Häkchen im Drop-down-Menü bei check_box_outline_blank Abfolge.

Chromium-Problem: 40574989.

Verbesserungen im Bereich „Leistung“

Diese Version enthält mehrere Verbesserungen am Bereich Leistung.

CSS-Selektorstatistiken erfassen

Im Bereich Leistung gibt es eine neue Einstellung, mit der Sie CSS-Selektorstatistiken für langlaufende Stil neu berechnen-Ereignisse erfassen können.

Wenn Sie die Statistiken aufrufen möchten, wählen Sie ein Ereignis vom Typ Stil neu berechnen aus und öffnen Sie den neuen Tab Auswahlstatistiken. Auf dem Tab werden für jede Auswahl die verstrichene Zeit, die Anzahl der Übereinstimmungsversuche und die Anzahl der Nichtübereinstimmungen bei langsamen Pfaden in Prozent angezeigt.

Chromium-Problem: 324282954.

Reihenfolge ändern und Tracks ausblenden

Der Bereich Leistung erhält einen neuen Konfigurationsmodus, mit dem Sie die Reihenfolge der Titel ändern und sie ausblenden können.

Klicken Sie links neben dem Titelnamen auf die Schaltfläche Bearbeiten Bearbeiten, um den Konfigurationsmodus aufzurufen. Klicken Sie dann auf arrow_upward (nach oben) oder arrow_downward (nach unten), um den Titel zu verschieben, oder auf visibility_off (ausblenden). Klicke rechts neben dem Titelnamen auf die Schaltfläche Fertig (Häkchen).

In der nächsten Version, Chrome 126, gibt es weitere Verbesserungen.

Chromium-Problem: 311439339.

Retainer im Bereich „Arbeitsspeicher“ ignorieren

Sie können jetzt Retainers in Heap-Snapshots ignorieren, die Sie über den Bereich Speicher erfassen.

Um einen Retainer zu ignorieren, wählen Sie ein Objekt aus. Klicken Sie im Abschnitt Retainer mit der rechten Maustaste auf einen Retainer und wählen Sie im Drop-down-Menü Diesen Retainer ignorieren aus. Ignorierte Retainer werden in der Spalte Distance mit dem Wert ignored gekennzeichnet. Wenn Sie die ignorierten Abos wiederherstellen möchten, klicken Sie oben in der Aktionsleiste auf Ignorierte Abos wiederherstellen.

Außerdem unterstützen Heap-Snapshots jetzt eine größere Anzahl (Hunderte von Millionen) von Begrenzungskanten und ‑knoten (332350576).

Chromium-Problem: 327337527.

Lighthouse 11.7.1

Im Bereich Lighthouse wird jetzt Lighthouse 11.7.1 ausgeführt. Eine vollständige Liste der Änderungen finden Sie hier.

Zu den wichtigsten Änderungen gehört die Unterstützung des Plug-ins Publisher Ads, das in dieser Version veraltet ist.

Grundlegende Informationen zur Verwendung des Bereichs Lighthouse in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558.

Sonstige Highlights

Im Folgenden sind einige bemerkenswerte Fehlerbehebungen und Verbesserungen in dieser Version aufgeführt:

• Der Bereich Rekorder befindet sich nicht mehr in der Vorabversion (329271496).
• In der Console wird jetzt kein Fehler angezeigt, wenn ein benutzerdefinierter Formatierer eine null für die body()-Funktion zurückgibt. Das ist ein gültiges Verhalten (329400119).
• Im Bereich Quellen wurde die Syntaxhervorhebung aktualisiert. Insbesondere unterstützt sie jetzt die Flags v und d in regulären Ausdrücken.
• Auf dem Tab Netzwerk > Cookies wurde ein Fehler behoben, bei dem ausgenommene Cookies Antwort-Cookies zugeordnet wurden (41491846).
• Auf dem Tab Elemente > Stile können Sie jetzt Folgendes tun:
  • Zeigt vollständig überladene übernommene Regeln mit benutzerdefinierten Eigenschaften (41489874) an.
  • Hebt den angewendeten Wert je nach Farbdesign (331123816) in der Farbe „light-dark()“ hervor.

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

Verwende die folgenden Optionen, um die neuen Funktionen, Updates oder andere Aspekte der Entwicklertools zu besprechen.

• Unter crbug.com können Sie uns Feedback und Funktionsanfragen senden.
• Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf more_vert Weitere Optionen > Hilfe > Entwicklertools-Problem melden.
• Twittern Sie unter @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu den Neuigkeiten in den DevTools oder den YouTube-Videos mit Tipps zu den DevTools.

Neu in den Entwicklertools

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