Neuerungen in den Entwicklertools (Chrome 101)

Jecelyn Yeen

Aufgezeichnete Nutzerflüsse als JSON-Datei importieren und exportieren

Im Bereich Aufzeichnung können Sie jetzt Aufzeichnungen von Nutzerflüssen als JSON-Datei importieren und exportieren. Diese Ergänzung erleichtert das Teilen von User Flows und kann für Fehlerberichte hilfreich sein.

Laden Sie beispielsweise diese JSON-Datei herunter. Sie können es mit der Schaltfläche „Importieren“ importieren und den Nutzerfluss noch einmal durchlaufen.

Außerdem können Sie die Aufzeichnung exportieren. Nachdem Sie einen Nutzerfluss aufgezeichnet haben, klicken Sie 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-Script herunter.
  • Als Puppeteer-Skript exportieren Laden Sie die Aufzeichnung als Puppeteer-Skript herunter.

Weitere Informationen zu den Unterschieden zwischen diesen Optionen finden Sie in der Dokumentation.

Exportoptionen im Bereich „Rekorder“

Chromium-Problem: 1257499

Kaskadenebenen im Bereich „Stile“ ansehen

Mit Kaskadierungsebenen 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 die einzelnen Ebenen und ihre Stile ansehen.

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

Kaskadenebenen im Bereich „Stile“ ansehen

Chromium-Problem: 1240596

Unterstützung für die Farbfunktion hwb()

Sie können das HWB-Farbformat jetzt in den DevTools aufrufen 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 Farbpalette in HWB ändern.

Farbfunktion hwb()

Die Darstellung privater Unterkünfte wurde verbessert.

In den DevTools werden private Zugriffsmethoden jetzt korrekt ausgewertet und angezeigt. Bisher konnten Klassen mit privaten Zugriffsmethoden in der Konsole und im Bereich Quellen nicht maximiert werden.

private Properties in der Console

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

Sonstige Highlights

Hier sind einige bemerkenswerte Fehlerkorrekturen in dieser Version:

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

[Experimentell] Neuer Zeitspanne- und Snapshot-Modus im Lighthouse-Steuerfeld

Neben dem bestehenden Navigationsmodus unterstützt das Lighthouse-Steuerfeld jetzt zwei weitere Modi zur Messung von Nutzerflüssen: Zeitspanne und Snapshot.

Mit den Berichten zur Zeitspanne 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 erfahren Sie mehr über die Gesamtblockierungszeit und die Cumulative Layout Shift, 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.

Zeitspanne und Snapshot-Modus im Lighthouse-Steuerfeld

Chromium-Problem: 772558

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 mit allen Themen der Reihe Neuerungen bei den Entwicklertools