Neue Funktionen in den Entwicklertools, Chrome 125

Sofia Emelianova
Sofia Emelianova
GitHub

Fehler und Warnungen in der Console mit Gemini besser verstehen

In dieser Chrome-Version werden Funktionen basierend auf generativer KI in die Konsole der Entwicklertools eingeführt, damit Sie die Fehler und Warnungen, die auftreten, besser nachvollziehen können.

Wenn Sie eine KI-generierte Erklärung für einen Fehler oder eine Warnung erhalten möchten, klicken Sie in der Console neben der Meldung auf die Schaltfläche Glühbirne, Funke. Diesen Fehler (diese Warnung) verstehen und folgen Sie der Anleitung.

Die KI-generierte Erklärung eines Fehlers.

Weitere Informationen

Unterstützung von @position-try-Regeln unter „Elements“ > „Styles“

Um Ihnen beim Debuggen der CSS-Ankerpositionierung zu helfen, werden auf dem Tab Elemente > Stile jetzt @position-try-CSS-Regeln unterstützt. Auf dem Tab werden position-try-options-Werte aufgelöst und jede Option wird mit einem entsprechenden @position-try --name-Abschnitt verknüpft.

Die Unterstützung der CSS-Regeln @position-try vor und nach dem Pod.

Weitere Informationen finden Sie unter Introducing the CSS anchor positioning API.

Chromium-Problem: 40279608.

Verbesserungen am Quellenbereich

Diese Version enthält mehrere Verbesserungen am Bereich Quellen.

Automatisches Formatieren und Schließen von Klammern konfigurieren

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

Wenn Sie das entsprechende Verhalten konfigurieren möchten, aktivieren oder deaktivieren Sie die neuen Optionen Klammern automatisch schließen und Minimierte Quellen automatisch formatieren in den Einstellungen > Einstellungen > Quellen.

Die Ansicht vor und nach dem Hinzufügen neuer Einstellungen für die automatische Formatierung und das automatische Schließen von Klammern.

Chromium-Probleme: 40865010, 324314570.

Abgelehnte Promises werden als abgefangen erkannt

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

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

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

Die Anzahl der abgefangenen Ablehnungen vor und nach der Erkennung.

Chromium-Problem: 40283993.

Fehlerursachen in der Console

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

Um das Debugging zu erleichtern, können Sie Fehlerursachen angeben, wenn Sie Fehler abfangen und neu auslösen. Da die Konsole die Ursachenkette durchläuft, wird jeder Fehlerstack mit dem Präfix Caused by: ausgegeben, sodass Sie den ursprünglichen Fehler weiterhin sehen können.

Die Stacktraces vor und nach dem Drucken mit dem Präfix „Caused by“.

Chromium-Problem: 40182832.

Verbesserungen am Netzwerkbereich

Diese Version enthält mehrere Verbesserungen am Bereich Netzwerk.

Header für frühzeitige Hinweise prüfen

Die Early Hints-Header erhalten im Netzwerkbereich auf dem Tab Header der Anfrage einen eigenen Bereich. Bisher fanden Sie die relevanten Header im Abschnitt Response Headers (Antwortheader).

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

Vor und nach dem Hinzufügen eines speziellen Abschnitts für Early Hints.

Weitere Informationen finden Sie unter Schnellere Seitenladezeiten durch Server-Denkzeit mit Early Hints.

Chromium-Problem: 40222701.

Spalte „Wasserfall“ ausblenden

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

Die Ansicht vor und nach dem Hinzufügen der Option zum Ausblenden der Spalte „Wasserfall“.

Chromium-Problem: 40574989.

Verbesserungen am Bereich „Leistung“

Diese Version enthält mehrere Verbesserungen am Bereich Leistung.

CSS-Selektorstatistiken erfassen

Das Leistungssteuerfeld erhält eine neue Einstellung, mit der Sie CSS-Selektorstatistiken für lang andauernde Recalculate Style-Ereignisse erfassen können.

Wenn Sie die Statistiken aufrufen möchten, wählen Sie das Ereignis Stil neu berechnen aus und öffnen Sie den neuen Tab Selektorstatistiken. Auf dem Tab sehen Sie Informationen zur verstrichenen Zeit, zu Versuchen und Anzahl von Übereinstimmungen sowie zum Prozentsatz der Slow-Path-Nichtübereinstimmungen für jeden Selector.

Die Statistiken vor und nach dem Hinzufügen des Selektors.

Chromium-Problem: 324282954.

Reihenfolge ändern und Tracks ausblenden

Das Leistungsübersicht-Feld hat einen neuen Konfigurationsmodus, mit dem Sie die Reihenfolge von Tracks ä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 Track zu verschieben, oder auf , um ihn auszublenden. Wenn Sie fertig sind, klicken Sie rechts neben dem Titelnamen auf die Schaltfläche Prüfen.

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

Chromium-Problem: 311439339.

Retainer im Bereich „Arbeitsspeicher“ ignorieren

Sie können jetzt Retainer in Heap-Snapshots ignorieren, die Sie mit dem Memory-Panel aufnehmen.

Wenn Sie einen Retainer ignorieren möchten, wählen Sie ein Objekt aus, klicken Sie im Bereich 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 Distanz mit dem Wert ignored gekennzeichnet. Wenn Sie das Ignorieren beenden möchten, klicken Sie oben in der Aktionsleiste auf Ignorierte Retainer wiederherstellen.

Die Ansicht vor und nach dem Hinzufügen einer Option zum Ignorieren von Retainern.

Außerdem werden in Heap-Snapshots jetzt eine größere Anzahl (Hunderte von Millionen) von Containment-Kanten und ‑Knoten unterstützt (332350576).

Chromium-Problem: 327337527.

Lighthouse 11.7.1

Im Bereich Lighthouse wird jetzt Lighthouse 11.7.1 ausgeführt. Vollständige Liste der Änderungen

Eine wichtige Änderung ist die Einstellung der Unterstützung für das Publisher Ads-Plug-in, das in dieser Version veraltet ist.

Vor und nach dem Hinzufügen bzw. Entfernen der Unterstützung für das Publisher Ads-Plug-in.

Die Grundlagen zur Verwendung des Lighthouse-Bereichs in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558.

Sonstige Highlights

Hier sind einige wichtige Fehlerbehebungen und Verbesserungen in dieser Version:

  • Der Bereich Rekorder ist jetzt offiziell nicht mehr in der Vorschauphase (329271496).
  • In der Konsole wird jetzt kein Fehler mehr angezeigt, wenn ein benutzerdefinierter Formatierer für die Funktion body() den Wert null zurückgibt. Das ist ein gültiges Verhalten (329400119).
  • Der Bereich Quellen wurde mit einer aktualisierten Syntaxhervorhebung versehen. Insbesondere werden jetzt die Flags v und d in regulären Ausdrücken unterstützt.
  • Auf dem Tab Netzwerk > Cookies wurde ein Fehler bei der Zuordnung von ausgenommenen Cookies zu Antwort-Cookies behoben (41491846).
  • Auf dem Tab Elemente > Stile ist jetzt Folgendes möglich:
    • Zeigt vollständig überlastete geerbte Regeln mit benutzerdefinierten Eigenschaften an (41489874).
    • Hebt den angewendeten Wert in light-dark() je nach Farbdesign hervor (331123816).

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.