Neue Funktionen in den Entwicklertools, Chrome 125

Mit Gemini Fehler und Warnungen in der Console besser verstehen

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 „Elements“ > Stile

Informationen zur Fehlerbehebung bei der Positionierung von CSS-Ankern finden Sie unter Elemente > Der Tab Stile unterstützt jetzt @position-try CSS-Regeln. Der Tab löst position-try-options-Werte auf und verknüpft jede Option mit einem eigenen @position-try --name-Abschnitt.

Weitere Informationen finden Sie unter Einführung in die CSS Anchor Positioning API.

Chromium-Problem: 40279608.

Verbesserungen im Quellenbereich

In dieser Version wurden mehrere Verbesserungen im Bereich Quellen vorgenommen.

Automatisches Drucken in Klammern und Schließen von Klammern konfigurieren

Sie können jetzt unter Quellen das automatische Ansprechen des Druckens und das Schließen von Klammern für den Editor aktivieren oder deaktivieren. Die Option Schönes Drucken macht komprimierte 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.

Aktivieren oder deaktivieren Sie zum Konfigurieren des entsprechenden Verhaltens die neuen Optionen check_box Automatisch schließende Klammern und check_box Reduzierte Quellen automatisch formatieren unter Einstellungen Einstellungen > Einstellungen > Quellen:

Chromium-Probleme: 40865010, 324314570.

Abgelehnte abgelehnte Zusagen werden als gefangen anerkannt

Im Steuerfeld Quellen werden abgelehnte Promis als abgefangen erkannt, wenn Sie sie mit .catch() oder .then() mit zwei Argumenten verarbeitet haben.

Wenn also 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.

Sie können die Fehlerbehebung vereinfachen, indem Sie Fehlerursachen angeben, wenn Sie Fehler abfangen und noch einmal ausgeben. Während die Konsole die Ursachen der Ursachen entlanggeht, wird jeder Fehlerstapel mit dem Präfix Caused by: ausgegeben, sodass Sie den ursprünglichen Fehler immer noch sehen können.

Chromium-Problem: 40182832.

Verbesserungen beim Netzwerkbereich

In dieser Version wurden einige Verbesserungen im Bereich Netzwerk vorgenommen.

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 befanden sich die relevanten Header im Abschnitt Response Headers (Antwortheader).

Early Hints ist ein HTTP-Statuscode (103 Early Hints), mit dem vor der endgültigen Antwort eine vorläufige HTTP-Antwort gesendet wird. Dadurch kann ein Server Hinweise zu wichtigen Unterressourcen (z. B. Stylesheets oder kritischem JavaScript) oder Ursprüngen an den Browser senden, die wahrscheinlich von der Seite verwendet werden, während der Server damit beschäftigt ist, die Hauptressource zu generieren.

Weitere Informationen finden Sie unter Schnelleres Laden von Seiten bei Verwendung der Server-Think-Time mit Early Hints.

Chromium-Problem: 40222701.

Spalte „Wasserfall“ ausblenden

Sie können jetzt im Steuerfeld Netzwerk die Spalte Wasserfall ausblenden – ähnlich wie andere Spalten. Klicken Sie mit der rechten Maustaste auf einen Spaltennamen und entfernen Sie das Häkchen aus dem Kästchen check_box_outline_blank Wasserfall im Drop-down-Menü.

Chromium-Problem: 40574989.

Verbesserungen im Bereich „Leistung“

In dieser Version wurden mehrere Verbesserungen im Bereich Leistung vorgenommen.

CSS-Selektorstatistiken erfassen

Der Bereich Leistung erhält eine neue Einstellung, mit der Sie CSS-Selektorstatistiken für lang andauernde Ereignisse vom Typ Stil neu berechnen erfassen können.

Um die Statistiken aufzurufen, wählen Sie ein Ereignis vom Typ Stil neu berechnen aus und öffnen Sie den neuen Tab Selektorstatistiken. Auf dem Tab werden für jeden Selektor Informationen zur verstrichenen Zeit, zu Übereinstimmungsversuchen und zur Anzahl sowie zum Prozentsatz der Nicht-Übereinstimmungen bei langsamen Pfaden angezeigt.

Chromium-Problem: 324282954.

Reihenfolge ändern und Tracks ausblenden

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

Klicken Sie links neben dem Tracknamen 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 Track zu verschieben, oder klicken Sie auf visibility_off zum Ausblenden. Wenn Sie fertig sind, klicken Sie rechts neben dem Namen des Tracks auf die Schaltfläche Fertig Prüfen.

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

Chromium-Problem: 311439339.

Retainer im Bereich „Arbeitsspeicher“ ignorieren

Sie können nun Retainer in Heap-Snapshots ignorieren, die Sie im Bereich Arbeitsspeicher erfassen.

Wenn Sie einen Retainer ignorieren möchten, wählen Sie ein Objekt aus. Klicken Sie dann 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 das Ignorieren beenden möchten, klicken Sie oben in der Aktionsleiste auf Ignorierte Retainer wiederherstellen.

Außerdem unterstützen Heap-Snapshots jetzt eine größere Anzahl (mehrere Hundert 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.

Verschiedene Highlights

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

• Der Vorschaustatus des Bereichs Rekorder ist jetzt offiziell nicht mehr verfügbar (329271496).
• In der Konsole wird jetzt kein Fehler angezeigt, wenn ein benutzerdefinierter Formatierer eine null für die Funktion body() zurückgibt. Dies ist ein gültiges Verhalten (329400119).
• Die Syntaxhervorhebung im Bereich Quellen wurde aktualisiert. Insbesondere werden jetzt v und d unterstützt. für reguläre Ausdrücke verwenden.
• Das Netzwerk > Auf dem Tab Cookies wurde ein Fehler behoben, bei dem ausgenommene Cookies den Antwortcookies zugeordnet wurden (41491846).
• Die Elemente > Auf dem Tab Stile ist jetzt Folgendes möglich:
  • 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. Über diese Vorschaukanäle erhalten Sie Zugriff auf die neuesten Entwicklertools, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, bevor Ihre Nutzer es tun.

Kontaktaufnahme mit dem Team für Chrome-Entwicklertools

Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.

• Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
• Problem mit den Entwicklertools über Weitere Optionen melden > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
• Twittern Sie unter @ChromeDevTools.
• Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools