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 haben Sie die Möglichkeit, die Aufzeichnung zu 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.

Exportoptionen im Bereich „Rekorder“

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.

Kaskadenebenen im Bereich „Stile“ ansehen

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.

hwb()-Farbfunktion

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.

privaten Properties in der Console

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. Öffnen Sie diese Demoseite. 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.

Zeitspannen- und Snapshot-Modus im Lighthouse-Steuerfeld

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.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • 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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde gekündigt.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59