Diese Seite wurde von der Cloud Translation API übersetzt.

Neuerungen in den Entwicklertools (Chrome 109)

Jecelyn Yeen

Rekorder: Optionen für Schritte kopieren, In-Page-Wiedergabe, Kontextmenü des Schritts

Neue Kopieroptionen im Rekorder-Bereich.

Öffnen Sie in der Rekorder App einen vorhandenen User Flow. Bisher haben die Entwicklertools beim Abspielen des User Flows immer die Wiederholung gestartet, indem sie zur Seite gingen oder sie neu geladen haben.

Seit den neuesten Updates zeigt der Rekorder den Navigationsschritt separat an. Sie können mit der rechten Maustaste klicken und sie entfernen, um die In-Page-Wiedergabe zu starten.

Abgesehen davon können Sie mit der rechten Maustaste auf einen Schritt klicken und ihn in die Zwischenablage im Rekorder-Bereich kopieren, anstatt den gesamten Nutzerfluss zu exportieren. Sie funktioniert auch mit Erweiterungen. Versuchen Sie beispielsweise, einen Schritt als Skript für den Nachtuhr-Test zu kopieren. Mithilfe dieser Funktion können Sie jedes vorhandene Script problemlos aktualisieren.

Bisher war es nur über das Dreipunkt-Menü möglich, auf das Menü zuzugreifen. Sie können jetzt mit der rechten Maustaste auf eine beliebige Stelle des Schritts klicken, um auf das Menü zuzugreifen.

Chromium-Probleme: 1322313, 1351649, 1322313, 1339767

Funktionsnamen in den Aufzeichnungen der Leistung zeigen

Im Bereich Leistung werden jetzt die tatsächlichen Funktionsnamen und ihre Quellen im Trace angezeigt, wenn eine Source Map vorhanden ist.

Der Vorher-Nachher-Vergleich von Funktionsnamen wird im Steuerfeld „Leistung“ angezeigt.

In diesem Beispiel wird eine Quelldatei während der Produktion minimiert. Die sayHi-Funktion wird in dieser Demo z. B. als n und die takeABreak-Funktion als o reduziert.

Zeigt Dateien vor und nach der Einschränkung an.

Bisher wurden beim Aufzeichnen eines Trace im Bereich Leistung nur die reduzierten Funktionsnamen im Trace angezeigt. Dadurch wurde die Fehlerbehebung erschwert.

Mit den neuesten Änderungen lesen die Entwicklertools jetzt die Source Map und zeigen die tatsächlichen Funktionsnamen und den Quellort an.

Chromium-Probleme: 1364601, 1364601

Neue Tastenkombinationen im Bereich „Konsole und Quellen“

Um zwischen den Tabs im Bereich Quellen zu wechseln, verwenden Sie unter macOS Funktion + Befehlstaste + Aufwärtspfeil und Abwärtspfeil Unter Windows und Linux Strg + Bild-auf-Taste oder Bild-auf-Taste

Außerdem können Sie unter macOS mit Strg + N und Strg + P in den Vorschlägen für die automatische Vervollständigung navigieren, ähnlich wie bei Emacs. Sie können beispielsweise window. in das Feld Console eingeben und mithilfe dieser Tastenkombinationen navigieren.

Außerdem wird in den Entwicklertools jetzt der Rechtspfeil für die automatische Vervollständigung nur am Zeilenende akzeptiert. Ein Dialogfeld zur automatischen Vervollständigung wird beispielsweise angezeigt, wenn Sie etwas mitten im Code bearbeiten. Wenn Sie den Rechtspfeil drücken, möchten Sie wahrscheinlich den Cursor auf die nächste Position anstelle der automatischen Vervollständigung setzen. Diese UX-Änderung passt besser zu Ihrem Authoring-Workflow.

Chromium-Problem: 1167965, 1172535, 1371585. 1369503

Verbessertes JavaScript-Debugging

Im Folgenden finden Sie einige Verbesserungen beim JavaScript-Debugging in dieser Version:

new.target ist ein Metaattribut, mit dem Sie feststellen können, ob eine Funktion oder ein Konstruktor mit dem neuen Operator aufgerufen wurde. Sie können jetzt new.target in der Console protokollieren, um während der Fehlerbehebung den Wert zu prüfen. Bisher wurden bei der Eingabe von new.target Fehler zurückgegeben.
Mit einem WeakRef-Objekt können Sie einen schwachen Verweis auf ein anderes Objekt haben, ohne zu verhindern, dass dieses Objekt durch die automatische Speicherbereinigung bereinigt wird. Die Entwicklertools zeigen jetzt eine Inline-Vorschau für den Wert an und wertet die schwache Referenz direkt in der Konsole während der Fehlerbehebung aus. Bisher mussten Sie explizit „deref“ aufrufen, um das Problem zu beheben.
Korrigierte Inline-Vorschau für verdeckte Variable. Zuvor war der Anzeigewert falsch.
Legen Sie Variablennamen in den Funktionen Generator und async im Bereich Umfang des Bereichs Quellen offen.

Chromium-Probleme: 1267690, 1246863 1371322, 1311637

Sonstige Highlights

Dies sind einige bemerkenswerte Korrekturen in dieser Version:

Im Bereich Styles werden weitere Hinweise für inaktive CSS-Eigenschaften unterstützt – Inline-Höhen- und -Breite, Flex- und Rastereigenschaften. (1373597, 1178508, 1178508,1178508)
Die Syntaxhervorhebung wurde korrigiert. Seit dem letzten Upgrade des Code-Editors in den Entwicklertools hat er nicht richtig funktioniert. (1290182)
Erfassen Sie Eingabeänderungsereignisse nach dem Unkenntlichmachen im Rekorder. (1378488)
Aktualisieren Sie das Puppeteer-Wiederholungsskript beim Export, um die Fehlerbehebung im Rekorder zu verbessern. (1351649)
Unterstütze die Aufzeichnung und Wiedergabe im Rekorder für Remote-Debugging. 1185727
Das Parsen spezieller CSS-Variablennamen in var() wurde korrigiert. Bisher wurde das Parsen von Variablen mit Escape-Zeichen wie var(--fo\ o) in den Entwicklertools nicht unterstützt. (1378992)

[Experimentell] Verbesserte UX für die Verwaltung von Haltepunkten

Der aktuelle Bereich Breakpoints bietet wenig visuelle Hilfe beim Überwachen aller Haltepunkte. Darüber hinaus sind häufig verwendete Aktionen hinter dem Kontextmenü verborgen.

Diese experimentelle Neugestaltung der UX gibt dem Bereich Breakpoints Struktur und ermöglicht Entwicklern, schnell auf häufig verwendete Funktionen wie das Bearbeiten und Entfernen von Haltepunkten zuzugreifen.

Hier sind einige der Highlights:

Beide Pausenoptionen befinden sich im Bereich Haltepunkte. Sie haben explizite Textlabels, die die Optionen selbsterklärend machen.
Haltepunkte werden nach Datei gruppiert und nach Zeilen- oder Spaltennummer sortiert. Sie können sie minimieren und maximieren.**
Neue Optionen zum Entfernen und Bearbeiten eines Haltepunkts, wenn der Mauszeiger im Bereich Haltepunkt auf den Haltepunkt oder einen Dateinamen bewegt wird.

Die vollständigen Änderungen findest du in unserem geschlossenen RFC. Wir freuen uns auch über dein Feedback.

Haltepunktfenster vor und nach der Neugestaltung anzeigen.

Chromium-Probleme: 1346231, 1324904

[Experimentell] Automatisches In-Place-Pretty-Print

Im Steuerfeld Quellen werden jetzt automatisch komprimierte Quelldateien an Ort und Stelle optimiert. Sie können auf die Schaltfläche Druck { } klicken, um den Vorgang rückgängig zu machen.

Bisher wurden im Bereich Quellen standardmäßig minimierte Inhalte angezeigt. Sie mussten manuell auf die Pretty Print-Schaltfläche klicken, um den Inhalt zu formatieren. Außerdem wurde der optimiert gedruckte Inhalt nicht in derselben Datei, sondern auf einem anderen ::formatted-Tab angezeigt.

Zeigt eine komprimierte Datei vor und nach der automatischen Direktdruck-Funktion an.

Chromium-Problem: 1164184

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

Leistungsmesswerte im Bereich „Leistung“ visualisieren
Textknoten in der DOM-Struktur markieren
Kopieren Sie den JS-Pfad in einen DOM-Knoten.
Aktualisierungen des Bereichs „Audits“, einschließlich einer neuen Prüfung, die JS-Bibliotheken und neue Schlüsselwörter für den Zugriff auf den Bereich „Audits“ über das Befehlsmenü erkennt
Bonustipp: Verwenden Sie den Gerätemodus, um Medienabfragen zu prüfen (Video)

Chrome 71

Bewegen Sie den Mauszeiger auf ein Ergebnis des Live-Ausdrucks, um einen DOM-Knoten hervorzuheben.
DOM-Knoten als globale Variablen speichern
Informationen zum Initiator und zur Priorität jetzt in HAR-Importen und -Exporten
Im Hauptmenü auf das Befehlsmenü zugreifen
Haltepunkte im Bild im Bild
Bonustipp: Mit monitorEvents() können Sie ausgelöste Knotenereignisse in der Console protokollieren (Video)