Neue Funktionen in den Entwicklertools, Chrome 125

Sofia Emelianova
Sofia Emelianova
GitHub

Fehler und Warnungen in der Console mit Gemini besser nachvollziehen

Diese Chrome-Version bietet generative KI-Funktionen in der Konsole der Entwicklertools, mit denen Sie Fehler und Warnungen besser nachvollziehen können.

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

Die KI-generierte Erklärung eines Fehlers.

Weitere Informationen finden Sie unter Fehler und Warnungen mithilfe von 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.

„Vor“ und „Nach“ unterstützen die CSS-Regeln vom Typ @position-try.

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.

Automatischen hübschen Ausdruck und automatisches 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 die Option „Klammer schließen“ aktivieren, wird automatisch eine schließende Klammer () oder }) oder ein schließendes Tag (>) eingefügt, sobald Sie eine öffnende Klammer eingeben.

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

Vorher und nachher: Hinzufügen neuer Einstellungen für den automatischen hübschen Ausdruck und das Schließen von Klammern

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.

Wenn also Quellen > Bruchstellen > Bei nicht abgefangenen Ausnahmen pausieren aktiviert ist, wird der Debugger nicht bei Anweisungen wie den folgenden pausiert:

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

Vor und nach der Erkennung von abgelehnten Bildern

Chromium-Problem: 40283993.

Fehlerursachen in der Console

In der Konsole werden jetzt im Stack-Trace gegebenenfalls Ketten von Fehlerursachen angezeigt.

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.

Die vor und nach dem Drucken gedruckten Stack-Traces mit dem Präfix „Verursacht durch“

Chromium-Problem: 40182832.

Verbesserungen am Netzwerkbereich

Diese Version enthält mehrere Verbesserungen am Bereich Netzwerk.

Header für frühzeitige Hinweise prüfen

Die Header für frühe Hinweise erhalten einen eigenen Bereich auf dem Tab Header der Anfrage im Bereich Netzwerk. 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.

Vor und nach dem Hinzufügen eines speziellen Abschnitts für frühe Hinweise.

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

Chromium-Problem: 40222701.

Die abfolgebasierte Spalte 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 Abfolge.

Die Ansicht vor und nach dem Hinzufügen der Option zum Ausblenden der abfolgebasierten Spalte.

Chromium-Problem: 40574989

Verbesserungen am 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. Der Tab enthält Informationen zur verstrichenen Zeit, zu den Übereinstimmungsversuchen und zur Anzahl sowie zum Prozentsatz der nicht übereinstimmenden Elemente im langsamen Pfad für jeden Selector.

Statistiken vor und nach dem Hinzufügen der Auswahl

Chromium-Problem: 324282954.

Reihenfolge ändern und Titel 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, um den Konfigurationsmodus aufzurufen. Klicken Sie dann auf (nach oben) oder (nach unten), um den Titel zu verschieben, oder auf (ausblenden). Klicke rechts neben dem Titelnamen auf die Schaltfläche Häkchen.

Die nächste Version, Chrome 126, wird weitere Verbesserungen an dieser Benutzeroberfläche bringen.

Chromium-Problem: 311439339.

Retainer im Bereich „Speicher“ ignorieren

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

Wenn Sie einen Retainer ignorieren möchten, wählen Sie ein Objekt aus und klicken Sie im Bereich Retainer mit der rechten Maustaste auf einen Retainer. Wählen Sie dann im Drop-down-Menü die Option Diesen Retainer ignorieren aus. Ignorierte Abos sind in der Spalte Entfernung mit dem Wert ignored gekennzeichnet. Wenn Sie die ignorierten Abos wiederherstellen möchten, klicken Sie oben in der Aktionsleiste auf Ignorierte Abos wiederherstellen.

Vorher und nachher: Hinzufügen der Option, Honorare zu ignorieren

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. Vollständige Liste der Änderungen

Zu den wichtigsten Änderungen gehört die Einstellung der Unterstützung für das Publisher Ads-Plug-in, das in dieser Version nicht mehr unterstützt wird.

Vorher und nachher: Unterstützung für das Publisher Ads-Plug-in

Informationen zu den Grundlagen der Verwendung des Lighthouse-Steuerfelds in den DevTools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558

Sonstige Highlights

Hier sind einige wichtige Fehlerkorrekturen und Verbesserungen in dieser Version:

  • 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).
  • Die Syntaxhervorhebung im Bereich Quellen wurde aktualisiert. Insbesondere werden jetzt die Flags v und d in regulären Ausdrücken unterstützt.
  • 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 Properties an (41489874).
    • Der angewendete Wert wird je nach Farbschema (331123816) in light-dark() hervorgehoben.

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.