Neu in den DevTools, Chrome 136

Sofia Emelianova
Sofia Emelianova
GitHub

Verbesserungen am Bereich „Leistung“

Diese Version enthält eine Reihe von Verbesserungen am Bereich Leistung.

Neue Leistungsstatistiken

Auf dem Tab Leistung > Statistiken finden Sie neue Statistiken:

  • Modernes HTTP, das Anfragen hervorhebt, bei denen das alte HTTP/1.1-Protokoll verwendet wird.
  • Verwenden Sie eine effiziente Cache-Lebensdauer, um Anfragen zu identifizieren, die von einer längeren Cache-Lebensdauer profitieren könnten, und die Ladezeit Ihrer Website zu verkürzen.
  • Schriftanzeige, die die geschätzte Zeitersparnis bei der Optimierung von font-display zeigt

Drei neue Statistiken auf dem Tab „Statistiken“

Klicken, um zu markieren

Sie können jetzt auf Elemente in den Tabellen Zusammenfassung, Bottom-Up, Anrufbaum und Ereignisprotokoll klicken, um die entsprechenden Ereignisse im Trace hervorzuheben und den Rest abzudunkeln, während Sie sich den Leistungs-Trace ansehen.

Serverzeit in der Zusammenfassung der Netzwerkanfragen

Auf dem Tab Zusammenfassung im Bereich Leistung werden jetzt Serverzeitangaben für Netzwerkanfragen angezeigt, bei denen serverseitige Rendering-Technologien implementiert sind.

In der Tabelle „Serverzeit“ in der Zusammenfassung einer Netzwerkanfrage.

Im Bereich Leistung werden die Daten aus dem Header Server-Timing verwendet.

Cookies unter „Datenschutz und Sicherheit“ filtern

Die Tabelle im Bereich Datenschutz und Sicherheit > Datenschutz > Drittanbieter-Cookies wird um einen Filter ergänzt, damit Sie die gewünschten Cookies schneller finden.

Der Filter in der Tabelle „Drittanbieter-Cookies“.

Größen in KB in Tabellen in allen Bereichen

Damit die Einheiten im selben Kontext gleich bleiben, werden in den Bereichen Netzwerk und Speicher sowie in der Tabelle für 1p-/3p-Anwendungen unter Leistung > Zusammenfassung jetzt alle Größen in kB angezeigt. So können Sie Zahlen in derselben Spalte und in verschiedenen Bereichen direkt vergleichen, anstatt die Einheiten MB, kB und B im Auge behalten zu müssen.

Die vor und nach der Umstellung verwendeten Größeneinheiten.

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 Eigenschaften corner-shape und corner-*-shape vorschlagen.

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

Chromium-Problem: 402346406.

Experimentell: Hervorhebung von Problemen mit Elementen und Attributen im DOM

Mit dieser neuen experimentellen Funktion können Probleme mit DOM-Elementen oder ‑Attributen im Bereich Elemente jetzt durch eine rote gestrichelte Unterstreichung hervorgehoben werden. Bewegen Sie den Mauszeiger auf solche Elemente oder Attribute, um im Bereich Probleme eine Kurzinfo mit einem Link zum entsprechenden Fehler zu sehen.

Vorher-Nachher-Vergleich: Ein DOM-Problem im DOM-Baum wird mit einer Kurzinfo und einem Link zum Bereich „Probleme“ hervorgehoben.

Im Bereich Elemente werden derzeit ungültige Nachkommen 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 in legacy-javascript jetzt Baseline anstelle von esmodules verwendet. Vollständige Liste der Änderungen

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

Chromium-Problem: 40543651.

Sonstige Highlights

Hier sind einige wichtige Fehlerkorrekturen und Verbesserungen in dieser Version:

  • Leistung > Statistiken > Netzwerkabhängigkeitsstruktur: Es wird jetzt die Zeit für alle Netzwerkanfragen im Netzwerkbaum angezeigt (400708304).
    • Netzwerkabhängigkeitsbaum: Es wird jetzt die Zeit für alle Netzwerkanfragen im Netzwerkbaum angezeigt (400708304).
  • Animationen: Ein Fehler wurde behoben, durch den aufgrund von aufgezeichneten Animationen 400635410 im Bereich Erinnerungen losgelöste Elemente angezeigt wurden.
  • Aufzeichnungstool: Beim ersten Ausführen der Aufzeichnung wird jetzt dasselbe Bestätigungsdialogfeld verwendet wie beim Einfügen von Code.
  • Ebenen: In der Statusleiste unten werden jetzt die Gesamtzahl der Ebenen und der Gesamtspeicher für alle sichtbaren Ebenen angezeigt.
  • Speicher: Die Heap-Snapshot-Initialisierung wurde durch die Parallelisierung von Aufgaben zwischen zwei Workern beschleunigt, anstatt nur einen zu verwenden (42203857).
  • Probleme: Es werden jetzt CORS-Fehler für den lokalen Netzwerkzugriff (Local Network Access, LNA) gemeldet (395895368).
  • Barrierefreiheit:
    • Kurzinfos: Sie werden jetzt beim Drücken der Hotkey-Taste statt beim Fokussieren angezeigt (396311936).
    • Elemente > Stile: Die Funktion var() kann jetzt über die Tastatur gesteuert werden. Sie können also --custom-property auswählen und die Eingabetaste drücken, um das Ziel des Links aufzurufen (401212692).

Vorschaukanäle herunterladen

Sie können Chrome Canary, Chrome Dev oder Chrome 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

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

Neu in DevTools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.