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 von Anfang an für die Funktion toggleColorScheme 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.

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

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

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.

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 von den Build-Tools (z. B. Webpack, Vite) generierten minimierten Dateien 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.

Chromium-Problem: 960909

Neue Zeitachsen für Nutzer 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.

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 ermitteln, 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 zu sehen.

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

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.

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.

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.

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.

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.
• Der Debugger löst Variablen in Pfeilfunktionen in der Ansicht Umfang jetzt mithilfe von Quellkarten auf.

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 die <script async> Rendering-Blockierungsprobleme im Bereich Leistungsstatistiken wurden 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 potenzielle 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.

• Senden Sie uns Feedback und Funktionsanfragen unter crbug.com.
• Melden Sie ein DevTools-Problem über das Dreipunkt-Menü more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Tweeten Sie an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu den Neuigkeiten in den DevTools oder den YouTube-Videos mit Tipps zu den DevTools.

Neu in DevTools

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