Neu in den DevTools, Chrome 136

Sofia Emelianova
Sofia Emelianova

Verbesserungen am Bereich „Leistung“

Diese Version enthält eine Reihe von Verbesserungen für den Bereich Leistung.

Neue Leistungsstatistiken

Auf dem Tab Leistung > Statistiken finden Sie neue Statistiken:

  • Modernes HTTP: Hier werden Anfragen hervorgehoben, die das alte HTTP/1.1-Protokoll verwenden.
  • Effiziente Verweildauer im Cache verwenden: Hier werden Anfragen hervorgehoben, bei denen eine längere Verweildauer im Cache die Ladezeit Ihrer Website verkürzen könnte.
  • Schriftartdarstellung: Hier sehen Sie die geschätzte Zeitersparnis, wenn Sie font-display optimieren.

Drei neue Statistiken auf dem Tab „Statistiken“

Zum Markieren klicken

Sie können jetzt in den Tabellen Zusammenfassung, Bottom-up, Aufrufbaum und Ereignisprotokoll auf Elemente klicken, um die entsprechenden Ereignisse im Trace hervorzuheben und den Rest auszublenden, während Sie den Leistungstrace durchsuchen.

Server-Timings in der Zusammenfassung der Netzwerkanfragen

Auf dem Tab Zusammenfassung im Bereich Leistung sehen Sie jetzt Server-Timings für Netzwerkanfragen, bei denen Technologien für das serverseitige Rendern implementiert sind.

Die Tabelle „Server-Timings“ in der Zusammenfassung einer Netzwerkanfrage.

Die Daten im Bereich Leistung stammen aus dem Header Server-Timing-Antwortheader.

Cookies unter „Datenschutz und Sicherheit“ filtern

Die Tabelle im Abschnitt Datenschutz und Sicherheit > Datenschutz > Drittanbieter-Cookies erhält einen Filter, damit Sie die gewünschten Cookies schneller finden.

Der Filter in der Tabelle „Drittanbieter-Cookies“.

Größen in KB-Einheiten in Tabellen in allen Bereichen

Damit die Einheiten im selben Kontext gleich bleiben, werden in Tabellen in den Bereichen Netzwerk und Arbeitsspeicher sowie in der Tabelle für eigene / Drittanbieter-Ressourcen unter Leistung > Zusammenfassung jetzt alle Größen in kB angezeigt. So können Sie Zahlen in derselben Spalte und über Panels hinweg direkt vergleichen, ohne auf MB, kB oder B achten zu müssen.

Die Werte vor und nach der Vereinheitlichung der Größenangaben.

Die automatische Vervollständigung unterstützt corner-shape und corner-*-shape unter „Elemente“ > „Stile“

Die automatische Vervollständigung unter Elemente > Stile kann jetzt die entsprechenden Werte für die Attribute corner-shape und corner-*-shape vorschlagen.

Die Optionen für die automatische Vervollständigung für die Eigenschaft „corner-shape“.

Chromium-Problem: 402346406.

Experimentell: Probleme mit Elementen und Attributen im DOM hervorheben

Mit dieser neuen experimentellen Funktion können im Bereich Elemente Probleme mit DOM-Elementen oder Attributen jetzt mit einer roten geschwungenen Unterstreichung hervorgehoben werden. Bewegen Sie den Mauszeiger auf solche Elemente oder Attribute, um eine Kurzinfo mit einem Link zum entsprechenden Fehler im Bereich Probleme aufzurufen.

Vorher und nachher wird ein DOM-Problem im DOM-Baum mit einem Kurzinfo-Text und einem Link zum Bereich „Probleme“ hervorgehoben.

Im Bereich Elemente werden derzeit ungültige untergeordnete Elemente von <select>, nicht übereinstimmende ARIA-Definitionen und ungültige ARIA-Attribute hervorgehoben.

Chromium-Problem: 378738916.

Lighthouse 12.5.0

Im Bereich Lighthouse wird jetzt Lighthouse 12.5.0 ausgeführt.

In dieser Version wird für legacy-javascript jetzt Baseline anstelle von esmodules verwendet. Vollständige Liste der Änderungen

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

Chromium-Problem: 40543651.

Sonstige Highlights

Hier sind einige wichtige Fehlerbehebungen und Verbesserungen in dieser Version:

  • Leistung > Statistiken > Netzwerkabhängigkeitsbaum: Im Netzwerkbaum wird jetzt die Zeit für alle Netzwerkanfragen angezeigt (400708304).
    • Netzwerkabhängigkeitsbaum: Die Zeit für alle Netzwerkanfragen wird jetzt im Netzwerkbaum angezeigt (400708304).
  • Animationen: Ein Fehler wurde behoben, der dazu führte, dass abgetrennte Elemente aufgrund von erfassten Animationen im Bereich Arbeitsspeicher angezeigt wurden 400635410.
  • Recorder: Beim ersten Ausführen der Aufzeichnung wird jetzt dasselbe Bestätigungsdialogfeld wie beim Einfügen von Code verwendet.
  • Ebenen: In der Statusleiste unten wird jetzt die Gesamtzahl der Ebenen und der Gesamtspeicher für alle sichtbaren Ebenen angezeigt.
  • Arbeitsspeicher: Die Initialisierung von Heap-Snapshots wurde beschleunigt, indem Aufgaben auf zwei Worker parallelisiert wurden, anstatt nur einen zu verwenden (42203857).
  • Probleme: Es werden jetzt CORS-Fehler beim Zugriff auf das lokale Netzwerk (Local Network Access, LNA) gemeldet (395895368).
  • Barrierefreiheit:
    • Kurzinfos: Werden jetzt beim Drücken einer Tastenkombination anstelle des Fokus angezeigt (396311936).
    • Elemente > Stile: Die Funktion var() kann jetzt über die Tastatur aufgerufen werden. Sie können --custom-property auswählen und die Eingabetaste drücken, um zum Linkziel (401212692) zu gelangen.

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.