Neuerungen in den Entwicklertools (Chrome 109)

Jecelyn Yeen

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

Neue Kopieroptionen im Bereich „Rekorder“.

Öffnen Sie einen vorhandenen User Flow im Rekorder. Wenn Sie bisher den User Flow wiederholt haben, starteten die Entwicklertools die Wiedergabe immer durch Aufrufen oder Aktualisieren der Seite.

Nach den neuesten Updates zeigt der Rekorder den Navigationsschritt separat an. Sie können sie mit der rechten Maustaste anklicken und entfernen, um eine In-Page-Neuwiedergabe durchzuführen.

Außerdem können Sie mit der rechten Maustaste auf einen Schritt klicken und ihn im Steuerfeld Rekorder in die Zwischenablage kopieren, anstatt den gesamten User Flow zu exportieren. Das funktioniert auch mit Erweiterungen. Versuchen Sie beispielsweise, einen Schritt als Skript für den Nightwatch-Test zu kopieren. Mit dieser Funktion können Sie vorhandene Skripts problemlos aktualisieren.

Bisher konnten Sie nur über die Schaltfläche mit den drei Punkten auf das Schrittmenü zugreifen. Sie können jetzt mit der rechten Maustaste auf eine beliebige Stelle im Schritt klicken, um auf das Menü zuzugreifen.

Chromium-Probleme: 1322313, 1351649, 1322313, 1339767

Tatsächliche Funktionsnamen in den Aufzeichnungen der Aufführung anzeigen

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

Die Anzeige des Vorher-Nachher-Vergleichs von Funktionsnamen wird im Steuerfeld „Leistung“ angezeigt.

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

Dateien vor und nach der Komprimierung anzeigen.

Wenn Sie bisher im Bereich Leistung ein Trace aufgezeichnet haben, wurden darin nur die reduzierten Funktionsnamen angezeigt. Das erschwert die Fehlerbehebung.

Mit den neuesten Änderungen liest DevTools jetzt die Source Map und zeigt die tatsächlichen Funktionsnamen und den Quellort an.

Chromium-Probleme: 1364601, 1364601

Neue Tastenkombinationen in der Konsole und im Bereich „Quellen“

So wechseln Sie zwischen den Tabs im Bereich Quellen: Unter macOS: Funktion + Befehlstaste + Aufwärtspfeil und Abwärtspfeil Windows und Linux: Strg + Bild-auf-Taste oder Bild-ab-Taste

Außerdem können Sie unter macOS mit Strg + N bzw. Strg + P durch die Vorschläge zur automatischen Vervollständigung navigieren, ähnlich wie bei Emacs. Sie können beispielsweise window. in die Console eingeben und diese Tastenkombinationen zur Navigation verwenden.

Darüber hinaus akzeptiert die Entwicklertools jetzt auch einen Rechtspfeil für die automatische Vervollständigung nur am Zeilenende. Ein Dialogfeld für die automatische Vervollständigung wird beispielsweise angezeigt, wenn Sie etwas in der Mitte des Codes bearbeiten. Wenn Sie den Rechtspfeil drücken, wird der Cursor wahrscheinlich auf die nächste Position gesetzt, anstatt die automatische Vervollständigung zu verwenden. Diese UX-Änderung passt besser zu Ihrem Authoring-Workflow.

Chromium-Probleme: 1167965, 1172535, 1371585 1369503

Verbessertes JavaScript-Debugging

Im Folgenden sind einige Verbesserungen beim JavaScript-Debugging in dieser Version aufgeführt:

  • new.target ist eine Metaeigenschaft, mit der 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 anmelden, um seinen Wert während der Fehlerbehebung zu prüfen. Bisher wurden bei der Eingabe von new.target Fehler zurückgegeben. Vorher und nach dem Vergleich der Fehlerbehebung für die Bewertung „new.target“ anzeigen.
  • Mit einem WeakRef-Objekt können Sie einen schwachen Verweis auf ein anderes Objekt speichern, ohne zu verhindern, dass dieses Objekt automatisch durch die automatische Speicherbereinigung gelöscht wird. Die Entwicklertools zeigen jetzt eine Inline-Vorschau für den Wert an und wertet die schwache Referenz während der Fehlerbehebung direkt in der Konsole aus. Bisher mussten Sie bei ihnen explizit „deref“ aufrufen, um das Problem zu beheben. Zeigt den Vorher-Nachher-Vergleich der WeakRef-Auswertung während der Fehlerbehebung an.
  • Die Inline-Vorschau für verdeckte Variablen wurde korrigiert. Bisher war der angezeigte Wert falsch. Inline-Vorschau vor und nach dem Vergleich für verdeckte Variablen anzeigen.
  • Geben Sie Variablennamen in den Funktionen Generator und async im Bereich Umfang des Bereichs Quellen offen.

Chromium-Probleme: 1267690, 1246863 1371322, 1311637

Verschiedene Highlights

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

  • Unterstützung weiterer Hinweise für inaktive CSS-Eigenschaften im Bereich Styles (Inline-Höhe und -Breite, Flex- und Rastereigenschaften) (1373597, 1178508, 1178508,1178508)
  • Feste Syntaxhervorhebung. Seit der letzten Aktualisierung des Code-Editors in den Entwicklertools hat er nicht mehr richtig funktioniert. (1290182)
  • Im Rekorder werden Eingabeänderungen nach einem Weichzeichner-Ereignis korrekt erfasst. (1378488)
  • Aktualisieren Sie das Puppeteer-Wiederholungsskript beim Export, um die Fehlerbehebung im Rekorder zu verbessern. (1351649)
  • Aufzeichnung und Wiedergabe im Rekorder für Remote-Debugging unterstützen (1185727)
  • Das Parsen von speziellen CSS-Variablennamen in var() wurde behoben. Bisher haben die Entwicklertools das Parsen von Variablen mit Escape-Zeichen wie var(--fo\ o) nicht unterstützt. , (1378992)

[Experimentell] Verbesserte UX beim Verwalten von Haltepunkten

Der aktuelle Bereich Haltepunkte bietet wenig visuelle Hilfe bei der Überwachung aller Haltepunkte. Außerdem sind häufig verwendete Aktionen durch das Kontextmenü ausgeblendet.

Diese experimentelle UX-Neugestaltung verleiht dem Bereich Haltepunkte eine Struktur und ermöglicht Entwicklern schnellen Zugriff auf häufig verwendete Funktionen wie das Bearbeiten und Entfernen von Haltepunkten.

Hier einige Highlights:

  • Beide Pausenoptionen befinden sich im Bereich Haltepunkte. Sie verfügen über explizite Textbeschriftungen, die die Optionen selbsterklärend machen.
  • Haltepunkte werden nach Datei gruppiert, 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 RFC (closed). Hier kannst du uns Feedback geben.

Haltepunktbereich vor und nach der Neugestaltung anzeigen.

Chromium-Probleme: 1346231, 1324904

[Experimentell] Automatischer Direktdruck

Im Bereich Quellen werden reduzierte Quelldateien jetzt automatisch optimiert. Mit der Schaltfläche Zierdruck { } können Sie den Vorgang rückgängig machen.

Bisher wurden im Bereich Quellen standardmäßig reduzierte Inhalte angezeigt. Um den Inhalt zu formatieren, mussten Sie manuell auf die Schaltfläche „Zierdruck“ klicken. Außerdem wurde der schön gedruckte Inhalt nicht in derselben Datei, sondern auf einem anderen ::formatted-Tab angezeigt.

Zeigt eine komprimierte Datei vor und nach dem automatischen Direktdruck an der richtigen Stelle an.

Chromium-Problem: 1164184

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