Neuerungen in den Entwicklertools (Chrome 109)

Jecelyn Yeen

Rekorder: Optionen zum Kopieren von Schritten, Wiedergabe auf der Seite, Kontextmenü des Schritts

Neue Kopieroptionen im Rekorderbereich

Öffnen Sie einen vorhandenen User Flow im Aufzeichnungstool. Bisher wurde die Wiedergabe des User Flows in den Entwicklertools immer gestartet, indem die Seite aufgerufen oder neu geladen wurde.

Mit den neuesten Updates wird der Navigationsschritt im Aufzeichnungstool separat angezeigt. Du kannst mit der rechten Maustaste darauf klicken und es entfernen, um eine Wiedergabe auf der Seite auszuführen.

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

Bisher war das Menü für Schritte nur über das Dreipunkt-Menü zugänglich. Sie können jetzt mit der rechten Maustaste auf eine beliebige Stelle im Schritt klicken, um das Menü aufzurufen.

Chromium-Probleme: 1322313, 1351649, 1322313, 1339767

In den Aufzeichnungen der Leistung tatsächliche Funktionsnamen anzeigen

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

Im Bereich „Leistung“ wird ein Vergleich der Funktionnamen vor und nach der Änderung 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 minimiert.

Dateien vor und nach der Minimierung anzeigen

Bisher wurden beim Aufzeichnen eines Tracings im Bereich Leistung nur die minimierten Funktionsnamen angezeigt. Das hat die Fehlerbehebung erschwert.

Durch die letzten Änderungen wird in den DevTools jetzt die Quellzuordnung gelesen und die tatsächlichen Funktionsnamen und der Quellspeicherort werden angezeigt.

Chromium-Probleme: 1364601, 1364601

Neue Tastenkürzel im Bereich „Konsole und Quellen“

So wechseln Sie zwischen den Tabs im Bereich Quellen: macOS: Funktionstaste + Befehlstaste + Pfeil nach oben und nach unten Windows und Linux: Strg + Bild auf oder Bild ab

Außerdem können Sie die Vorschläge für die automatische Vervollständigung mit Strg + N und Strg + P unter macOS aufrufen, ähnlich wie in Emacs. Sie können beispielsweise window. in das Console eingeben und diese Tastenkombinationen zur Navigation verwenden.

Außerdem wird in den DevTools die automatische Vervollständigung jetzt nur noch mit der Rechtstaste am Ende der Zeile akzeptiert. Ein Dialogfeld für die automatische Vervollständigung wird beispielsweise angezeigt, wenn Sie etwas in der Mitte des Codes bearbeiten. Wenn Sie die Taste Rechtspfeil drücken, möchten Sie wahrscheinlich den Cursor an die nächste Position setzen, anstatt die automatische Vervollständigung zu verwenden. Diese UX-Änderung passt besser zu Ihrem Workflow für die Erstellung von Inhalten.

Chromium-Problem: 1167965, 1172535, 1371585 1369503

Verbesserte JavaScript-Fehlerbehebung

In dieser Version wurden einige Verbesserungen beim JavaScript-Debugging vorgenommen:

  • new.target ist eine Metaeigenschaft, mit der Sie erkennen können, ob eine Funktion oder ein Konstruktor mit dem new-Operator aufgerufen wurde. Sie können new.target jetzt in der Konsole loggen, um den Wert während der Fehlerbehebung zu prüfen. Bisher wurden Fehler zurückgegeben, wenn Sie new.target eingegeben haben. Vorher-Nachher-Vergleich der Fehlerbehebung bei der Auswertung von new.target anzeigen
  • Mit einem WeakRef-Objekt können Sie eine schwache Referenz auf ein anderes Objekt halten, ohne zu verhindern, dass dieses Objekt durch die Garbage Collection gelöscht wird. In den DevTools wird jetzt eine Inline-Vorschau für den Wert angezeigt und die schwache Referenz wird beim Debuggen direkt in der Console ausgewertet. Bisher mussten Sie „deref“ explizit auf sie anwenden, um sie aufzulösen. Vorher-Nachher-Vergleich der WeakRef-Bewertung während der Fehlerbehebung anzeigen
  • Die Vorschau für schattierte Variablen wurde korrigiert. Bisher war der angezeigte Wert falsch. Vorher-Nachher-Vergleich in der Inline-Vorschau für die verschattete Variable anzeigen
  • Entfernen Sie die Verschleierung von Variablennamen in Generator- und async-Funktionen im Bereich Scope (Umfang) im Bereich Sources (Quellen).

Chromium-Probleme: 1267690, 1246863 1371322, 1311637

Sonstige Highlights

Hier sind einige bemerkenswerte Fehlerkorrekturen in dieser Version:

  • Unterstützung für mehr Hinweise zu inaktiven CSS-Eigenschaften im Bereich Stile: Inline-Höhe und ‑Breite, Flex- und Grid-Eigenschaften. (1373597, 1178508, 1178508,1178508)
  • Die Syntaxhervorhebung wurde korrigiert. Seit dem letzten Upgrade des Code-Editors in den Entwicklertools funktionierte er nicht mehr richtig. (1290182)
  • Im Aufzeichnen werden Eingabeänderungsereignisse nach dem Ereignis „on blur“ nicht richtig erfasst. (1378488)
  • Das Puppeteer-Wiedergabescript wird beim Export aktualisiert, um das Debugging im Aufzeichnungstool zu verbessern. (1351649)
  • Unterstützung für Aufzeichnung und Wiedergabe im Rekorder für die Remote-Fehlerbehebung. (1185727)
  • Das Parsen spezieller CSS-Variablennamen in var() wurde korrigiert. Bisher unterstützte DevTools nicht das Parsen von Variablen mit Escape-Zeichen wie var(--fo\ o). , (1378992)

[Experimentell] Verbesserte UX beim Verwalten von Breakpoints

Der aktuelle Bereich Breakpoints bietet nur wenig visuelle Unterstützung bei der Übersicht über alle Haltestellen. Außerdem sind häufig verwendete Aktionen im Kontextmenü versteckt.

Dieses experimentelle UX-Redesign bringt Struktur in den Bereich Breakpoints und ermöglicht Entwicklern schnellen Zugriff auf häufig verwendete Funktionen wie das Bearbeiten und Entfernen von Breakpoints.

Hier einige Highlights:

  • Beide Pausierungsoptionen finden Sie im Bereich Breakpoints. Sie sind durch eindeutige Textlabels gekennzeichnet, 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 (closed). Hier können Sie uns Ihr Feedback geben.

Bereich für Unterbrechungen vor und nach dem Redesign anzeigen

Chromium-Probleme: 1346231, 1324904

[Experimentell] Automatische direkte Formatierung

Im Bereich Quellen werden minimierte Quelldateien jetzt automatisch automatisch formatiert. Sie können auf die Schaltfläche Schönformatierung { } klicken, um die Änderung rückgängig zu machen.

Bisher wurden im Bereich Quellen standardmäßig minimierte Inhalte angezeigt. Sie mussten manuell auf die Schaltfläche „Schöner Ausdruck“ klicken, um den Inhalt zu formatieren. Außerdem wurden die schön formatierten Inhalte nicht in derselben Datei, sondern in einem anderen ::formatted-Tab angezeigt.

Eine minimierte Datei vor und nach der automatischen Formatierung anzeigen.

Chromium-Problem: 1164184

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

Neu in den DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.