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 die Freigabe von Nutzerflüssen und kann für die Fehlermeldung nützlich sein.

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

Außerdem können Sie die Aufnahme 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-Script exportieren Laden Sie die Aufzeichnung als Puppeteer-Script 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 sich 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 wird 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 arraysä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)
  • Unterstützung für die Verwendung der Taste Alt (Optionen) für die Mehrfachauswahl im Bereich Quellen wieder aktivieren (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 sehen 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.

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 Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, 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.