Neuerungen in den Entwicklertools (Chrome 109)

Jecelyn Yeen

Recorder: Optionen zum Kopieren von Schritten, In-Page-Wiedergabe, Kontextmenü für Schritte

Neue Kopieroptionen im Rekorder-Bereich.

Öffnen Sie einen vorhandenen User Flow im Recorder. Bisher wurde die Wiedergabe des User Flows in den Entwicklertools immer durch Aufrufen oder Neuladen der Seite gestartet.

Mit den neuesten Updates wird der Navigationsschritt im Recorder separat angezeigt. Sie können mit der rechten Maustaste darauf klicken und sie entfernen, um die Wiedergabe auf der Seite zu starten.

Außerdem können Sie mit der rechten Maustaste auf einen Schritt klicken und ihn in die Zwischenablage kopieren, anstatt den gesamten Nutzerfluss zu exportieren. Es funktioniert auch mit Erweiterungen. Versuchen Sie beispielsweise, einen Schritt als Nightwatch-Test-Skript zu kopieren. Mit dieser Funktion können Sie jedes vorhandene Skript ganz einfach aktualisieren.

Bisher konnten Sie nur über die Dreipunkt-Schaltfläche 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 Leistungsaufzeichnungen anzeigen

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

Vergleich der Funktionsnamen vor und nach der Änderung im Bereich „Leistung“

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

Dateien vor und nach der Minimierung anzeigen.

Bisher wurden in einem Trace, den Sie im Bereich Leistung aufgezeichnet haben, nur die minimierten Funktionsnamen angezeigt. Das erschwerte die Fehlerbehebung.

Durch die neuesten Änderungen liest DevTools jetzt die Quellzuordnung und zeigt die tatsächlichen Funktionsnamen und den Quellspeicherort an.

Chromium-Probleme: 1364601, 1364601

Neue Tastenkürzel im Bereich „Konsole“ und „Quellen“

Sie können mit folgenden Tastenkombinationen zwischen Tabs im Bereich Quellen wechseln: Unter macOS: Funktionstaste + Befehlstaste + Aufwärtspfeil oder Abwärtspfeil Unter Windows und Linux: Strg + Bild auf oder Bild ab

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

Außerdem akzeptieren die Entwicklertools jetzt Pfeil nach rechts für die automatische Vervollständigung nur am Ende der Zeile. Ein Beispiel: Wenn Sie etwas in der Mitte des Codes bearbeiten, wird ein Dialogfeld für die automatische Vervollständigung angezeigt. Wenn Sie die Pfeil-rechts-Taste drücken, möchten Sie den Cursor wahrscheinlich auf die nächste Position setzen, anstatt die Autovervollständigung zu verwenden. Diese Änderung der Benutzeroberfläche ist besser auf Ihren Workflow abgestimmt.

Chromium-Problem: 1167965, 1172535, 1371585. 1369503

Verbesserte JavaScript-Fehlersuche

Hier sind einige Verbesserungen beim JavaScript-Debugging in dieser Version:

  • new.target ist eine Meta-Property, mit der Sie erkennen können, ob eine Funktion oder ein Konstruktor mit dem Operator „new“ aufgerufen wurde. Sie können new.target jetzt in der Konsole protokollieren, um den Wert während des Debuggens zu prüfen. Bisher wurden Fehler zurückgegeben, wenn Sie new.target eingegeben haben. Vergleich vor und nach dem Debugging der new.target-Auswertung.
  • Mit einem WeakRef-Objekt können Sie eine schwache Referenz auf ein anderes Objekt erstellen, ohne zu verhindern, dass dieses Objekt per Garbage Collection entfernt wird. In den DevTools wird jetzt eine Inline-Vorschau für den Wert angezeigt und die schwache Referenz wird während des Debuggens direkt in der Konsole ausgewertet. Bisher mussten Sie explizit „deref“ aufrufen, um das Problem zu beheben. Vorher-Nachher-Vergleich der WeakRef-Auswertung während des Debuggens anzeigen
  • Die Inline-Vorschau für schattierte Variablen wurde korrigiert. Zuvor war der Anzeigewert falsch. Inline-Vorschau für den Vergleich von „Vorher“ und „Nachher“ für die überschattete Variable anzeigen.
  • Sie können die Variablennamen in den Funktionen Generator und async im Bereich Bereich des Bereichs Quellen deobfuskieren.

Chromium-Probleme: 1267690, 1246863, 1371322, 1311637

Sonstige Highlights

Hier sind einige wichtige Korrekturen in dieser Version:

  • Es werden mehr Hinweise für inaktive CSS-Eigenschaften im Bereich Stile unterstützt, z. B. für Inline-Höhe und ‑Breite sowie für Flex- und Grid-Eigenschaften. (1373597, 1178508, 1178508,1178508)
  • Die Syntaxhervorhebung wurde korrigiert. Seit dem letzten Upgrade des Code-Editors in den Entwicklertools hat es nicht richtig funktioniert. (1290182)
  • Eingabeänderungsereignisse werden nach dem „onblur“-Ereignis im Recorder richtig erfasst. (1378488)
  • Das Puppeteer Replay-Script wird beim Export aktualisiert, um das Debugging im Recorder zu vereinfachen. (1351649)
  • Unterstützung von Aufzeichnung und Wiedergabe im Rekorder für das Remote-Debugging. (1185727)
  • Das Parsen spezieller CSS-Variablennamen in var() wurde korrigiert. Bisher wurden in DevTools keine Variablen mit Escape-Zeichen wie var(--fo\ o) unterstützt. , (1378992)

[Experimentell] Verbesserte UX beim Verwalten von Breakpoints

Das aktuelle Feld Breakpoints bietet nur wenig visuelle Unterstützung für die Übersicht aller Breakpoints. Außerdem sind häufig verwendete Aktionen im Kontextmenü verborgen.

Das experimentelle UX-Redesign sorgt für mehr Struktur im Bereich Breakpoints und ermöglicht Entwicklern den schnellen Zugriff auf häufig verwendete Funktionen wie das Bearbeiten und Entfernen von Breakpoints.

Hier einige Highlights:

  • Beide Pausenoptionen sind im Bereich Breakpoints (Haltepunkte) verfügbar. 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 Sie den Mauszeiger auf den Haltepunkt oder einen Dateinamen im Bereich Haltepunkt bewegen.

Die vollständigen Änderungen finden Sie in unserem RFC (geschlossen). Hier können Sie uns Feedback geben.

Das Breakpoint-Fenster vor und nach der Neugestaltung.

Chromium-Probleme: 1346231, 1324904

[Experimentell] Automatische direkte Formatierung

Im Bereich Quellen werden reduzierte Quellcode-Dateien jetzt automatisch formatiert. Sie können auf die Schaltfläche Pretty Print { } klicken, um die Formatierung rückgängig zu machen.

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

Zeigen Sie eine minimierte Datei vor und nach dem automatischen In-Place-Formatieren.

Chromium-Problem: 1164184

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.