Neuerungen in den Entwicklertools (Chrome 101)

Jecelyn Yeen

Erfasste Nutzerflüsse als JSON-Datei importieren und exportieren

Im Bereich Rekorder können jetzt User Flow-Aufzeichnungen als JSON-Datei importiert und exportiert werden. 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 ihn mit der Schaltfläche „Importieren“ importieren und den User Flow noch einmal abspielen.

Außerdem können Sie die Aufzeichnung exportieren. Klicken Sie nach dem Aufzeichnen eines User Flows auf die Schaltfläche „Export“ (Exportieren). Es gibt drei Exportoptionen:

• Als JSON-Datei exportieren Laden Sie die Aufzeichnung als JSON-Datei herunter.
• Als @puppeteer/replay-Skript exportieren. Laden Sie die Aufzeichnung als Puppeteer Replay-Skript 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.

Chromium-Problem: 1257499

Kaskadenebenen im Bereich „Stile“ ansehen

Kaskadenebenen ermöglichen eine gezieltere Steuerung Ihrer CSS-Dateien, um Konflikte mit Stilspezifitäten zu vermeiden. Dies ist besonders nützlich bei großen Codebasen, Designsystemen und bei der Verwaltung 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 anzuzeigen. Die Ebene page hat die höchste Spezifität, daher ist der box-Hintergrund grün.

Chromium-Problem: 1240596

Unterstützung der Farbfunktion hwb()

Du kannst das HWB-Farbformat jetzt in den Entwicklertools ansehen und bearbeiten.

Wenn Sie im Bereich Stile das Farbformat ändern möchten, halten Sie die Umschalttaste gedrückt und klicken Sie auf eine Farbvorschau. Das HWB-Farbformat wurde hinzugefügt.

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

Verbesserte Anzeige privater Immobilien

In den Entwicklertools werden private Zugriffsfunktionen jetzt korrekt ausgewertet und angezeigt. Bisher konnten Kurse mit privaten Zugriffsfunktionen in der Console und im Bereich Quellen nicht maximiert werden.

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

Verschiedene Highlights

Im Folgenden sind einige wichtige Fehlerkorrekturen in dieser Version aufgeführt:

• Im Back-Forward-Cache wird jetzt die Erweiterungs-ID angezeigt, die bfcache blockiert hat, sofern 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)
• Falsche Hervorhebungen beim Doppelklick 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 (Optionen) für die Mehrfachauswahl im Bereich Quellen wird wieder aktiviert. (1304070)

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

Neben dem vorhandenen Navigationsmodus unterstützt der Lighthouse-Bereich jetzt zwei weitere Modi zur Messung von Nutzerflüssen: timespan und Snapshot.

Beispielsweise können Sie mithilfe der timespan-Berichte Nutzerinteraktionen analysieren. demo Wählen Sie den Modus Zeitspanne aus und klicken Sie auf Zeitspanne starten. Klicken Sie auf der Seite auf einen Kaffee und beenden Sie die Zeitspanne. 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.

Chromium-Problem: 772558

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools, kannst hochmoderne Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Kontaktaufnahme mit dem Team für Chrome-Entwicklertools

Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.

• Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
• Problem mit den Entwicklertools über Weitere Optionen melden > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
• Twittern Sie unter @ChromeDevTools.
• Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools