Neuerungen in den Entwicklertools (Chrome 104)

Jecelyn Yeen

Frame während der Fehlerbehebung neu starten

Die Funktion Frame neu starten ist zurück! Sie können den Code davor noch einmal ausführen, wenn er irgendwo in einer Funktion pausiert wurde. Diese Funktion wurde in Chrome 92 aufgrund von Stabilitätsproblemen eingestellt und entfernt.

In diesem Beispiel wurde der Debugger anfangs am Haltepunkt (Zeile 343) nahe dem Ende der Funktion toggleColorScheme angehalten. Wenn Sie das Debugging vom Anfang der Funktion toggleColorScheme aus neu starten möchten, maximieren Sie im Bereich Debugger den Abschnitt Call Stack, klicken Sie mit der rechten Maustaste auf toggleColorScheme und wählen Sie Frame neu starten aus.

Frame während der Fehlerbehebung neu starten

Chromium-Problem: 1303521

Optionen für die Zeitlupenwiedergabe im Steuerfeld für den Rekorder

Sie können Nutzerflüsse jetzt mit einer langsameren Geschwindigkeit wiedergeben: langsam, sehr langsam und extrem langsam. Mit diesen Optionen können Sie die einzelnen Schritte besser auf dem Bildschirm verfolgen.

Öffnen Sie den Bereich Aufnahme und starten Sie eine neue Aufnahme. Wenn die Aufnahme abgeschlossen ist, klicke auf das Drop-down-Menü Wiedergabe. Wählen Sie eine Geschwindigkeit aus, um eine Wiederholung zu starten.

Optionen für die Zeitlupenwiedergabe im Steuerfeld für den Rekorder

Chromium-Problem: 1306756

Erweiterung für den Rekorder erstellen

Sie können jetzt eine Chrome-Erweiterung erstellen oder installieren, um Replay-Scripts in Ihrem bevorzugten Format zu exportieren. In der Dokumentation zur Recorder-Erweiterungs-API erfährst du, wie du eine erste Erweiterung erstellst.

Folgen Sie dieser Anleitung, um eine Demoerweiterung zu installieren.

Benutzerdefinierte Erweiterung für den Rekorder

Chromium-Problem: 1325751

Dateien im Bereich „Quellen“ nach „Erstellt“/„Bereitgestellt“ gruppieren

Aktivieren Sie die neue Option Dateien nach Autor / Bereitgestellt gruppieren, um Ihre Dateien im Bereich „Quellen“ zu organisieren. Bei der Entwicklung von Webanwendungen mit Frameworks (z. B. React, Angular) kann es aufgrund der minimierten Dateien, die von den Build-Tools (z. B. Webpack, Vite) generiert werden, schwierig sein, sich in den Quelldateien zurechtzufinden.

Mit diesem Kästchen können Sie Dateien in zwei Kategorien gruppieren, um die Dateisuche zu beschleunigen:

  • Autorisiert Ähnlich wie die Quelldateien, die Sie in Ihrer IDE sehen. Diese Dateien werden in den DevTools anhand von Quellzuordnungen generiert, die von Ihren Build-Tools bereitgestellt werden.
  • Bereitgestellt. Die tatsächlichen Dateien, die vom Browser gelesen werden. Normalerweise werden diese Dateien minimiert.

Probieren Sie es selbst mit dieser React-Demo aus.

Dateien im Bereich „Quellen“ nach „Erstellt“/„Bereitgestellt“ gruppieren

Chromium-Problem: 960909

Neue Nutzerzeitmessung im Bereich „Leistungsstatistiken“

Mit dem neuen Nutzerzeitmesswert-Track im Bereich Leistungsstatistiken können Sie performance.measure()-Markierungen in Ihrer Aufnahme visualisieren.

Auf dieser Webseite wird beispielsweise die Methode performance.measure() verwendet, um die verstrichene Zeit beim Laden von Text zu berechnen.

Wenn Sie mit dem Messen des Seitenladevorgangs beginnen, wird der Track Nutzerzeitmessung in der Aufzeichnung angezeigt. Klicken Sie auf den Zeitplan, um die Details im Seitenbereich aufzurufen.

Nutzertimings im Bereich „Leistungsstatistiken“ erfassen

Chromium-Problem: 1322808

Zugewiesenen Slot eines Elements anzeigen

Elemente mit Steckplätzen im Bereich Elemente sind jetzt mit dem neuen Symbol slot gekennzeichnet. Wenn Sie Layoutprobleme beheben, können Sie mit dieser Funktion das Element schneller identifizieren, das sich auf das Layout des Knotens auswirkt.

Dieses Beispiel enthält Karten mit einigen benannten Slots. Prüfen Sie den person-occupation-Steckplatz einer Karte und klicken Sie auf das slot-Symbol daneben, um den zugewiesenen Steckplatz aufzurufen.

Informationen zum Erstellen einer flexiblen Vorlage mit den Elementen <template> und <slot>, die dann zum Ausfüllen des Shadow-DOM einer Webkomponente verwendet werden kann

Zugewiesenen Slot eines Elements anzeigen

Chromium-Problem: 1018906

Hardware-Parallelität für Leistungsaufzeichnungen simulieren

Mit der neuen Einstellung Hardware-Parallelität im Bereich Leistung können Entwickler den von navigator.hardwareConcurrency gemeldeten Wert konfigurieren.

Einige Anwendungen verwenden navigator.hardwareConcurrency, um den Grad der Parallelität ihrer Anwendung zu steuern, z. B. die Größe des Emscripten-pthread-Pools. Mit dieser Funktion können Entwickler die Anwendungsleistung mit unterschiedlicher Kernanzahl testen.

Hardware-Parallelität für Leistungsaufzeichnungen simulieren

Chromium-Problem: 1297439

Vorschau eines anderen Werts als Farbwert beim automatischen Ausfüllen von CSS-Variablen

Beim automatischen Vervollständigen von CSS-Variablen wird in DevTools jetzt eine sinnvolle Angabe für die Variable ohne Farbe eingefügt, damit Sie eine Vorschau der Auswirkungen des Werts auf den Knoten sehen können.

Vorschau für nicht farbliche Werte beim automatischen Ausfüllen von CSS-Variablen anzeigen

Chromium-Problem: 1285091

Blockierende Frames im Bereich „Back-Forward-Cache“ identifizieren

Der Bereich Back-/Forward-Cache im Bereich Anwendung enthält den neuen Bereich Frames, in dem Sie blockierende Frames identifizieren können, die möglicherweise verhindern, dass die Seite für den bfcache infrage kommt.

Blockierende Frames im Bereich „Back-Forward-Cache“ identifizieren

Chromium-Problem: 1288158

Verbesserte Vorschläge für die automatische Vervollständigung von JavaScript-Objekten

Die automatische Vervollständigung für JavaScript-Objekteigenschaften wird jetzt in dieser Reihenfolge angezeigt:

  1. Eigene zählbare Properties
  2. Eigene nicht aufzählbare Unterkünfte
  3. Übernommene zählbare Eigenschaften
  4. Vererbte nicht aufzählbare Properties

Bisher war es für Entwickler schwieriger, relevante Properties zu finden, da bei den Vorschlägen nur eigene Properties gegenüber übernommenen Properties bevorzugt wurden und alle übernommenen Properties dieselbe Priorität hatten.

Verbesserte Vorschläge für die automatische Vervollständigung von JavaScript-Objekten

Chromium-Problem: 1299241

Verbesserungen bei Quellkarten

Hier sind einige Fehlerkorrekturen an Quellkarten, die das Debuggen insgesamt verbessern:

  • Haltestellen funktionieren jetzt in Inline-<script> mit sourceURL-Anmerkungen.
  • Der Debugger löst Variablen im Blockbereich jetzt in der Ansicht Scope (Umfang) mithilfe von Quellkarten auf. Lösen von Blockvariablen
  • Der Debugger löst Variablen in Pfeilfunktionen in der Ansicht Umfang jetzt mithilfe von Quellkarten auf. Variablen in Pfeilfunktionen auflösen

Chromium-Probleme: 1329113, 1322115

Sonstige Highlights

Hier sind einige bemerkenswerte Fehlerkorrekturen in dieser Version:

  • Die Einstellung Automatische Vervollständigung für den Bereich Quellen wurde korrigiert. Bisher war die automatische Vervollständigung immer aktiviert, auch wenn die Einstellung deaktiviert war. (1323286)
  • Der Tab Manifest im Bereich Anwendung wurde aktualisiert, um das neueste Farbschemaformat zu parsen. (1318305)
  • Die Vorschläge für <script async>-Probleme, die das Rendern blockieren, wurden im Bereich Leistungsstatistiken verbessert. Bisher wurde in den DevTools add async attribute to the script tag vorgeschlagen, obwohl das Script bereits als asynchron gekennzeichnet ist. (1334096)
  • Im Bereich Leistungsstatistiken werden jetzt Iframes als mögliche Ursachen für Layoutänderungen erkannt. Die Iframe-Details finden Sie im Bereich Details. (1328873)
  • Wenn Sie im Befehlsmenü die Option Datei öffnen auswählen, werden die erstellten Dateien (Dateien, die von Quellkarten generiert wurden) jetzt höher eingestuft und erscheinen über den bereitgestellten Scripts mit ähnlichen Namen. (1312929)

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.