Neu in den DevTools, Chrome 134

Sofia Emelianova
Sofia Emelianova
GitHub

Bereich „Datenschutz und Sicherheit“

Das alte Steuerfeld Sicherheit wurde in das Steuerfeld Datenschutz und Sicherheit umgewandelt und es gibt einen neuen Bereich speziell für den Datenschutz. In diesem Abschnitt können Sie Folgendes tun:

  • Während die Entwicklertools geöffnet sind, können Sie Drittanbieter-Cookies vorübergehend mit oder ohne Ausnahmen einschränken und testen, wie sich eine Website verhält.
  • Hier finden Sie eine Tabelle mit Informationen zu Drittanbieter-Cookies, darunter, ob sie durch den vorübergehenden Grenzwertmodus blockiert oder ausgenommen wurden und welche Art von Cookies möglicherweise betroffen sind.

Vor und nach dem Hinzufügen des Abschnitts „Datenschutz“ zum Bereich „Sicherheit“

Chromium-Problem: 352364594.

Verbesserungen am Bereich „Leistung“

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

Kalibrierte Voreinstellungen für die CPU-Drosselung

Sie können die CPU-Drosselung jetzt automatisch kalibrieren und zwei zusätzliche Voreinstellungen verwenden, die besser auf Low- und Mid-Tier-Mobilgeräte abgestimmt sind.

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

Vor und nach der Drosselungskalibrierung

Unterschiedliche 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. Mit anderen Worten: Sie müssen keinen neuen Chat starten, um über ein anderes Ereignis zu sprechen.

Hervorhebung von selbst erhobenen Daten und Drittanbieterdaten in Performance Max-Kampagnen

Im Bereich Leistung gibt es auf dem Tab Zusammenfassung eine neue Tabelle, in der Sie selbst erhobene Daten, Drittanbieterdaten und Erweiterungsdaten unterscheiden können.

Bewegen Sie den Mauszeiger auf Einträge in der Tabelle, um die relevanten Ereignisse zu sehen, die im Leistungsverlauf hervorgehoben sind. Klicken Sie auf 3rd parties dimmen (Drittanbieter dimmen), um sich nur auf selbst erhobene Daten zu konzentrieren.

Sie können auch neben einem hervorgehobenen Eintrag in der Tabelle auf das Symbol klicken, um den Tab Bottom-Up aufzurufen, auf dem die Daten nach Drittanbietern gruppiert sind.

Felddaten in Kurzinfos zu Markierungen und Statistiken

Wenn Sie Felddaten aktiviert haben, werden sie jetzt in den Kurzinfos zu Messwertmarkierungen und auf dem Tab Statistiken angezeigt.

Vor und nach dem Hinzufügen von Datensätzen zu den Kurzinfos zu Markierungen und zum Tab „Statistiken“.

Chromium-Problem: 368135130.

Statistik „Erzwungener dynamischer Umbruch“

Auf dem Tab Leistung > Statistiken gibt es eine neue Statistik: Erzwungener Neuaufbau. Ein erzwungener Neuablauf tritt auf, wenn die Rendering-Engine die Scriptausführung anhält, um Stil und Layout zu berechnen. Erzwungene Neuformatierungen können zu Engpässen führen, die Sie vermeiden sollten.

Wenn Sie den Mauszeiger auf die neue Statistik bewegen, wird der oberste Funktionsaufruf mit einem erzwungenen Reflow, sein Stack-Trace und die Gesamtzeit des Reflows hervorgehoben.

Vor und nach dem Hinzufügen der Statistik „Erzwungene Neuformatierung“

Chromium-Problem: 369766156.

Statistik „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.

Die Statistik hebt lange Layout-Neuaufrufe und Stil-Neuberechnungen hervor, die durch eine große DOM-Größe im Leistungs-Trace beeinflusst wurden. Außerdem enthält sie Statistiken zur Gesamtzahl der Elemente, zur Tiefe und zu den meisten untergeordneten Elementen.

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

Leistungs-Trace mit console.timeStamp verlängern

Die Extensibility API unterstützt jetztconsole.timeStamp. Zusätzlich zu performance.measure und performance.mark können Sie jetzt benutzerdefinierte Tracks in der Leistungsaufzeichnung erstellen und mit console.timeStamp benutzerdefinierte Markierungen erfassen. Diese Option ist weniger umfangreich, da sie keine Einträge in der internen Leistungszeitachse des Browsers hinzufügt, sondern sie nur in der Leistungsaufzeichnung anzeigt.

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 Aufnahmeeinstellungen > Benutzerdefinierte Tracks anzeigen aktivieren, wird der benutzerdefinierte Track im Protokoll 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 am Bereich Elemente.

Echtzeitwerte für animierte Stile

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

Unterstützung für die Pseudoklasse :open und verschiedene Pseudoelemente

Im Bereich Elemente wird jetzt die Pseudoklasse :open im Bereich Stile > :hover > 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 Karussell-bezogenen ::column, ::scroll-button, ::scroll-marker und ::scroll-marker-group.

Chromium-Probleme: 383157184, 379805728.

Alle Konsolenmeldungen kopieren

Sie können jetzt alle Konsolennachrichten gleichzeitig kopieren, indem Sie mit der rechten Maustaste darauf klicken.

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

Eine ähnliche Kopieroption finden Sie auch im Kontextmenü unter Netzwerk > Request Payload.

Chromium-Probleme: 40206460, 384967020

Byte-Einheiten im Bereich „Speicher“

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

Vor und nach dem Anzeigen von Byte-Einheiten.

Chromium-Problem: 388589515.

Sonstige Highlights

Hier sind einige wichtige Fehlerkorrekturen und Verbesserungen in dieser Version:

  • Leistung:
    • Hinweise: 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 der schlechteste Cluster anstelle der schlechtesten Änderung ausgewählt.
  • Ignorierliste: Knoteninterne Werte, die mit node: beginnen, werden jetzt standardmäßig ignoriert (crbug.com/382453615).
  • Live-Ausdrücke: Fehler behoben, durch den sich Live-Ausdrücke auf den Befehl $_ auswirkten (crbug.com/388437265).
  • Elemente > Stile: Für relative Längen gibt es jetzt ein Pop-up-Fenster mit dem absoluten Wert (crbug.com/40778486).
  • Barrierefreiheit: Spaltenüberschriften werden jetzt vorgelesen, wenn sie sortierbar sind.
  • Tabsymbole sind jetzt rechts neben den Tabnamen zu sehen, statt links.

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. 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.