Neu in den DevTools, Chrome 134

Sofia Emelianova
Sofia Emelianova
GitHub

Bereich „Datenschutz und Sicherheit“

Der alte Bereich Sicherheit wurde zum Bereich Datenschutz und Sicherheit weiterentwickelt und erhält einen neuen, datenschutzbezogenen Abschnitt. In diesem Abschnitt haben Sie folgende Möglichkeiten:

  • Wenn die Entwicklertools geöffnet sind, können Sie Drittanbieter-Cookies vorübergehend einschränken, mit oder ohne Ausnahmen, und testen, wie sich eine Website verhält.
  • Hier finden Sie eine Tabelle mit Informationen zu Drittanbieter-Cookies, einschließlich der Frage, ob sie durch den temporären Limit-Modus blockiert oder ausgenommen wurden und welche Art von Cookies betroffen sein kann.

Vor und nach dem Hinzufügen des Abschnitts „Datenschutz“ zum Sicherheitsbereich.

Chromium-Problem: 352364594.

Verbesserungen am Bereich „Leistung“

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

Kalibrierte Voreinstellungen für die CPU-Drosselung

Sie können jetzt automatisch kalibrieren und zwei zusätzliche CPU‑Drosselungsvoreinstellungen erhalten, die Low- und Mid-Tier-Mobilgeräte genauer simulieren.

Wählen Sie im Drop-down-Menü Leistung > CPU-Drosselung die Option Kalibrieren… aus. Klicken Sie dann in den Einstellungen auf Kalibrieren und Weiter und warten Sie, bis die DevTools die Verlangsamungsraten für Ihr Gerät berechnet haben. Die Optionen für die kalibrierte Drosselung finden Sie wieder im Drop-down-Menü Leistung > CPU-Drosselung.

Vor und nach dem Hinzufügen der Drosselungskalibrierung.

Verschiedene Leistungsereignisse im selben KI-Chat auswählen

Im Bereich KI-Unterstützung können Sie jetzt das ausgewählte Ereignis im Leistungs-Trace im selben Chat ändern. Sie müssen also keinen neuen Chat starten, um über ein anderes Ereignis zu sprechen.

Hervorhebung von Erst- und Drittanbietern bei der Leistung

Das Steuerfeld Leistung enthält auf dem Tab Zusammenfassung eine neue Tabelle, in der Sie zwischen selbst erhobenen Daten, Drittanbieterdaten und Erweiterungsdaten unterscheiden können.

Bewegen Sie den Mauszeiger auf Einträge in der Tabelle, um die entsprechenden Ereignisse im Leistungstrace hervorzuheben. Klicken Sie auf Drittanbieter ausblenden, um sich nur auf die selbst erhobenen Daten zu konzentrieren.

Klicken Sie außerdem neben einem hervorgehobenen Eintrag in der Tabelle auf das Symbol , um zur Registerkarte Bottom-up zu gelangen, die nach Drittanbietern gruppiert ist.

Felddaten in Markierungskurzinfos und ‑statistiken

Wenn Sie Felddaten aktiviert haben, können Sie sie jetzt in Kurzinfos für Messwertmarkierungen und auf dem Tab Statistiken sehen.

Vor und nach dem Hinzufügen von eingereichten Daten zu den Markertooltips und zum Tab „Statistiken“.

Chromium-Problem: 368135130.

Statistik „Erzwungener dynamischer Umbruch“

Auf dem Tab Leistung > Statistiken finden Sie jetzt eine neue Statistik: Erzwungener Neufluss. Ein erzwungener Neufluss tritt auf, wenn die Rendering-Engine die Scriptausführung anhält, um Stil und Layout zu berechnen. Erzwungene Umflüsse können Engpässe sein, die Sie vermeiden sollten.

Wenn Sie den Mauszeiger auf die neue Erkenntnis bewegen, wird der oberste Funktionsaufruf mit einem erzwungenen Neufluss, dem zugehörigen Stacktrace und der gesamten Neuflusszeit hervorgehoben.

Vor und nach dem Hinzufügen des Insights „Erzwungener Neufluss“

Chromium-Problem: 369766156.

Informationen zu „DOM-Größe optimieren“

Eine weitere neue Statistik ist DOM-Größe optimieren. Ein zu großer DOM-Baum kann die Leistung von Seiten beeinträchtigen.

Der Insight hebt lange dynamische Umbrüche im Layout und Stil-Neuberechnungen hervor, die durch eine große DOM-Größe im Leistungs-Trace beeinflusst wurden. Außerdem werden Statistiken zu Gesamtelementen, Tiefe und den meisten untergeordneten Elementen bereitgestellt.

Vor und nach dem Hinzufügen des Hinweises „DOM-Größe optimieren“

Leistungs-Trace mit console.timeStamp erweitern

Die Extensibility API unterstützt jetztconsole.timeStamp. Zusätzlich zu performance.measure und performance.mark können Sie jetzt benutzerdefinierte Tracks im Leistungs-Trace erstellen und benutzerdefinierte Markierungen mit console.timeStamp erfassen. Das ist eine schlankere Alternative, bei der keine Einträge in der internen Leistungszeitachse des Browsers hinzugefügt werden, sondern nur im Leistungs-Trace angezeigt werden.

Sie können beispielsweise die folgende Syntax verwenden:

console.timeStamp("Start");
// Some time later ...
console.timeStamp("End");
// Some time later ...
console.timeStamp("Measure 1", "Start", "End", "Track 1");
// Some time later ...
console.timeStamp("Measure 2", "Start", undefined, "Track 1");

Wenn Sie unter Aufnahmeeinstellungen > Benutzerdefinierte Tracks anzeigen die Option „Benutzerdefinierte Tracks anzeigen“ auswählen, wird Ihr benutzerdefinierter Track im Trace angezeigt:

Vor und nach dem Hinzufügen der Unterstützung für console.timeStamp.

Verbesserungen am Bereich „Elemente“

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

Echtzeitwerte von animierten Stilen

Auf dem Tab Elemente > Stile werden die Werte animierter Stile jetzt in Echtzeit aktualisiert.

Unterstützung der Pseudoklasse :open und verschiedener Pseudoelemente

Im Bereich Elemente wird jetzt die :open-Pseudoklasse im Bereich Stile > :hov > Bestimmten Elementstatus erzwingen für bestimmte HTML-Elemente wie <details>, <select>, <dialog> und <input> unterstützt.

Vor und nach dem Hinzufügen der Option „:open“.

Außerdem werden im Bereich Elemente jetzt auch mehrere neue Pseudoelemente unterstützt: ::checkmark, ::picker-icon und die karussellbezogenen Elemente ::column, ::scroll-button, ::scroll-marker und ::scroll-marker-group.

Chromium-Probleme: 383157184, 379805728.

Alle Konsolennachrichten kopieren

Sie können jetzt mit einem Rechtsklick alle Konsolennachrichten auf einmal kopieren.

Vor und nach dem Hinzufügen der Option „Konsole kopieren“.

Eine ähnliche Kopieroption finden Sie auch im Kontextmenü von Network > Request Payload.

Chromium-Probleme: 40206460, 384967020.

Byte-Einheiten im Bereich „Arbeitsspeicher“

Im Bereich Arbeitsspeicher werden jetzt Größen mit entsprechenden Byte-Einheiten anstelle großer Byte-Zahlen angezeigt.

Vorher und nachher werden Byte-Einheiten angezeigt.

Chromium-Problem: 388589515.

Sonstige Highlights

Hier sind einige wichtige Fehlerbehebungen und Verbesserungen in dieser Version:

  • Leistung:
    • Anmerkungen: Sie können jetzt auf Ihr Label klicken, um den entsprechenden Eintrag auszuwählen (crbug.com/388224764).
    • Statistiken: Wenn Sie auf dem Tab Statistiken auf „CLS“ klicken, wird jetzt das schlechteste Cluster anstelle des schlechtesten Shifts ausgewählt.
  • Ignorieren-Liste: Interna von Knoten, die mit node: beginnen, werden jetzt standardmäßig ignoriert (crbug.com/382453615).
  • Live-Ausdrücke: Es wurde ein Fehler behoben, der dazu führte, dass sich Live-Ausdrücke auf den Befehl $_ auswirkten (crbug.com/388437265).
  • Elemente > Stile: Für relative Längen wird jetzt ein Pop-over mit dem absoluten Wert angezeigt (crbug.com/40778486).
  • Barrierefreiheit: Bei Spaltenüberschriften wird jetzt angesagt, ob sie sortierbar sind.
  • Tab-Symbole befinden sich jetzt rechts neben den Tab-Namen statt links.

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 DevTools behandelt wurden.