Neuerungen in den Entwicklertools (Chrome 101)

Jecelyn Yeen

Aufgezeichnete Nutzerabläufe als JSON-Datei importieren und exportieren

Das Recorder-Panel unterstützt jetzt den Import und Export von Aufzeichnungen von Nutzerflows als JSON-Datei. Dadurch lassen sich User Flows leichter teilen, was z. B. bei der Fehlerberichterstattung hilfreich sein kann.

Laden Sie beispielsweise diese JSON-Datei herunter. Sie können ihn über die Importschaltfläche importieren und den Nutzerfluss noch einmal durchlaufen.

Außerdem können Sie die Aufnahme exportieren. Klicken Sie nach dem Aufzeichnen eines Nutzerablaufs auf die Schaltfläche „Exportieren“. Es gibt drei Exportoptionen:

  • Als JSON-Datei exportieren Laden Sie die Aufzeichnung als JSON-Datei herunter.
  • Als @puppeteer/replay-Script exportieren: Laden Sie die Aufzeichnung als Puppeteer Replay-Skript herunter.
  • Als Puppeteer-Script exportieren: Laden Sie die Aufzeichnung als Puppeteer-Skript herunter.

Weitere Informationen zu den Unterschieden zwischen diesen Optionen

Exportoptionen im Rekorder-Bereich

Chromium-Problem: 1257499

Kaskadenebenen im Bereich „Styles“ ansehen

Mit Kaskadenebenen können Sie Ihre CSS-Dateien expliziter steuern, um Konflikte bei der Stilspezifität zu vermeiden. Das ist besonders nützlich für große Codebases, Designsysteme und beim Verwalten von Drittanbieterstilen in Anwendungen.

In diesem Beispiel sind drei Kaskadenebenen definiert: page, component und base. Im Bereich Stile können Sie sich die einzelnen Ebenen und ihre Stile ansehen.

Klicken Sie auf den Namen der Ebene, um die Ebenenreihenfolge aufzurufen. Die Ebene page hat die höchste Spezifität. Daher ist der Hintergrund von box grün.

Kaskadenebenen im Bereich „Styles“ ansehen

Chromium-Problem: 1240596

Unterstützung für die Farbfunktion „hwb()“

Sie können das HWB-Farbformat jetzt in den DevTools ansehen und bearbeiten.

Halten Sie im Bereich Stile die Umschalttaste gedrückt und klicken Sie auf eine beliebige Farbvorschau, um das Farbformat zu ändern. Das HWB-Farbformat wurde hinzugefügt.

Alternativ können Sie das Farbformat in der Farbauswahl in HWB ändern.

Die Farbfunktion hwb()

Anzeige privater Attribute verbessert

In den Entwicklertools werden private Accessoren jetzt richtig ausgewertet und angezeigt. Bisher konnten Sie Klassen mit privaten Zugriffsmethoden in der Konsole und im Bereich Quellen nicht maximieren.

Private Properties in der Console

Chromium-Probleme: 1296855, https://crbug.com/1303407

Sonstige Highlights

Hier sind einige wichtige Korrekturen in dieser Version:

  • Im Back-Forward-Cache wird jetzt die Erweiterungs-ID angezeigt, die den bfcache blockiert hat, sofern vorhanden.( 1284548)
  • Die automatische Vervollständigung für arrayähnliche Objekte, CSS-Klassennamen, map.get- und HTML-Tags wurde korrigiert. (1297101, 1297491, 1293807, 1296983)
  • Falsche Markierungen beim Doppelklicken auf Wörter und beim Rückgängigmachen der automatischen Vervollständigung wurden behoben. (1298437, 1298667)
  • Die Tastenkombination für Kommentare im Bereich Quellen wurde korrigiert. (1296535)
  • Die Unterstützung für die Verwendung der Alt-Taste (Wahltaste) für die Mehrfachauswahl im Bereich Quellen wurde wieder aktiviert. (1304070)

[Experimentell] Neuer Zeitspannen- und Snapshotmodus im Lighthouse-Bereich

Neben dem vorhandenen Navigationsmodus unterstützt der Lighthouse-Bereich jetzt zwei weitere Modi zum Messen von Nutzerabläufen: Zeitspanne und Momentaufnahme.

Mit Zeitspannenberichten können Sie beispielsweise Nutzerinteraktionen analysieren. Öffnen Sie diese Demoseite. Wählen Sie den Modus Zeitraum aus und klicken Sie auf Zeitraum starten. Klicken Sie auf der Seite auf einen Kaffee und beenden Sie den Zeitraum. Im Bericht finden Sie die Gesamte Blockierzeit und die kumulative Layoutverschiebung, die durch die Interaktion verursacht wurden.

Jeder Modus hat seine eigenen Anwendungsfälle, Vorteile und Einschränkungen. Weitere Informationen finden Sie in der Lighthouse-Dokumentation.

Zeitspannen- und Snapshotmodus im Lighthouse-Bereich

Chromium-Problem: 772558

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.