Neuerungen in den Entwicklertools (Chrome 101)

Jecelyn Yeen

Aufgezeichnete Nutzerflüsse als JSON-Datei importieren und exportieren

Im Bereich Rekorder können jetzt Nutzerfluss-Aufzeichnungen als JSON-Datei importiert und exportiert werden. Diese Ergänzung erleichtert das Teilen von User Flows und kann beim Melden von Fehlern hilfreich sein.

Laden Sie beispielsweise diese JSON-Datei herunter. Sie können ihn über die Schaltfläche „Importieren“ importieren und den Nutzerfluss noch einmal ansehen.

Abgesehen davon kannst du die Aufzeichnung auch exportieren. Klicken Sie nach dem Aufzeichnen des 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-Script exportieren: Laden Sie die Aufnahme als Puppeteer Replay-Skript herunter.
  • Als Puppeteer-Skript exportieren Laden Sie die Aufzeichnung als Puppeteer-Skript herunter.

In der Dokumentation finden Sie weitere Informationen zu den Unterschieden zwischen diesen Optionen.

Exportoptionen im Rekorder-Steuerfeld

Chromium-Problem: 1257499

Überlappende Ebenen im Bereich „Stile“ ansehen

Kaskadierende Ebenen ermöglichen eine detailliertere Steuerung Ihrer CSS-Dateien, um Stilkonflikte zu vermeiden. Dies ist besonders nützlich für große Codebasis, Designsysteme und die Verwaltung von Drittanbieter-Stilen in Anwendungen.

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

Klicken Sie auf den Namen der Ebene, um deren Reihenfolge zu sehen. Die Ebene page hat die höchste Spezifität, daher ist der Hintergrund box grün.

Überlappende Ebenen im Bereich „Stile“ ansehen

Chromium-Problem: 1240596

Unterstützung der Farbfunktion hwb()

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

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

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

Farbfunktion hwb()

Verbesserte Anzeige von Privatgrundstücken

Private Accessors werden in den Entwicklertools jetzt korrekt ausgewertet und angezeigt. Bisher war es in der Console und im Bereich Quellen nicht möglich, Kurse mit privaten Zugriffsfunktionen zu erweitern.

private Properties in der Console

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

Sonstige Highlights

Dies sind einige bemerkenswerte Korrekturen in dieser Version:

  • Im Back-Forward-Cache wird jetzt die Erweiterungs-ID angezeigt, die den bfcache blockiert, sofern vorhanden.( 1284548)
  • Die Unterstützung der automatischen Vervollständigung für Array-ähnliche Objekte, CSS-Klassennamen, map.get und HTML-Tags wurden korrigiert. (1297101, 1297491, 1293807, 1296983)
  • Falsche Hervorhebungen wurden behoben, die durch Doppelklicken auf Wörter und Rückgängigmachen der automatischen Vervollständigung entstanden sind. (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 Feld Quellen wird wieder aktiviert. (1304070)

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

Neben dem bisherigen Navigationsmodus unterstützt das Steuerfeld Lighthouse jetzt zwei weitere Modi zum Messen des Nutzerflusses: Zeitraum und Snapshot.

So lassen sich beispielsweise Nutzerinteraktionen mithilfe der Berichte zum Zeitraum analysieren. Öffne 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. Lesen Sie den Bericht, um die Total Blocking Time und Cumulative Layout Shift zu ermitteln, die durch die Interaktion verursacht wurden.

Jeder Modus hat eigene 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

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

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

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 Erste Schritte

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 abgebrochen.

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