Neuerungen in den Entwicklertools (Chrome 104)

Jecelyn Yeen

Frame während des Debuggens neu starten

Die Funktion Frame neu starten ist wieder da. Sie können den vorherigen Code noch einmal ausführen, wenn er an einer Stelle in einer Funktion pausiert wurde. Diese Funktion wurde zuvor aufgrund von Stabilitätsproblemen in Chrome 92 eingestellt und entfernt.

In diesem Beispiel wurde der Debugger zuerst am Haltepunkt (Zeile 343) in der Nähe des Endes der Funktion toggleColorScheme angehalten. Wenn Sie das Debugging ab dem Anfang der 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 Restart frame aus.

Chromium-Problem: 1303521

Optionen für langsame Wiedergabe im Rekorder-Bedienfeld

Sie können Nutzerabläufe jetzt langsamer wiedergeben lassen: langsam, sehr langsam und extrem langsam. Mit diesen Optionen können Sie die Wiedergabe der einzelnen Schritte auf dem Bildschirm besser beobachten.

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

Chromium-Problem: 1306756

Erweiterung für das Rekorder-Panel erstellen

Sie können jetzt eine Chrome-Erweiterung erstellen oder installieren, um Replay-Skripts in Ihrem bevorzugten Format zu exportieren. In der Dokumentation zur Recorder-Erweiterungs-API erfahren Sie, wie Sie eine solche Erweiterung erstellen.

Folgen Sie der Anleitung in der Dokumentation, um eine Demoerweiterung zu installieren.

Chromium-Problem: 1325751

Dateien im Quellenbereich nach „Erstellt“ / „Bereitgestellt“ gruppieren

Aktivieren Sie die neue Option Dateien nach „Erstellt“ / „Bereitgestellt“ gruppieren, um Ihre Dateien im Bereich „Quellen“ zu organisieren. Bei der Entwicklung von Webanwendungen mit Frameworks (z. B. React, Angular) kann es schwierig sein, in den Quelldateien zu navigieren, da die Build-Tools (z. B. Webpack, Vite) minimierte Dateien generieren.

Mit dieser Option können Sie Dateien in zwei Kategorien gruppieren, um sie schneller zu finden:

• Verfasst Ähnlich wie die Quelldateien, die Sie in Ihrer IDE ansehen. DevTools generiert diese Dateien basierend auf Quellzuordnungen, die von Ihren Build-Tools bereitgestellt werden.
• Bereitgestellt. Die tatsächlichen Dateien, die der Browser liest. Normalerweise sind diese Dateien minimiert.

Probieren Sie es selbst mit dieser React-Demo aus.

Chromium-Problem: 960909

Neuer User Timings-Track im Bereich „Leistungsstatistiken“

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

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

Wenn Sie mit der Messung des Seitenaufrufs beginnen, wird der User Timings-Track in der Aufzeichnung angezeigt. Klicken Sie auf das Zeitangaben-Element, um die zugehörigen Details im Seitenbereich aufzurufen.

Chromium-Problem: 1322808

Zugewiesenen Slot eines Elements einblenden

Elemente mit Slots im Bereich Elemente haben ein neues slot-Symbol. Wenn Sie Layoutprobleme beheben, können Sie mit dieser Funktion das Element, das sich auf das Layout des Knotens auswirkt, schneller identifizieren.

Dieses Beispiel enthält Karten mit einigen benannten Slots. Wenn Sie den person-occupation-Slot einer Karte untersuchen möchten, klicken Sie auf das slot-Symbol daneben, um den zugewiesenen Slot aufzurufen.

Hier erfahren Sie, wie Sie mit den Elementen <template> und <slot> eine flexible Vorlage erstellen, mit der Sie das Shadow-DOM einer Webkomponente füllen können.

Chromium-Problem: 1018906

Hardware-Nebenläufigkeit für Leistungsaufzeichnungen simulieren

Mit der neuen Einstellung Hardware-Concurrency (Hardware-Concurrency) 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. um die Größe des Emscripten-pthread-Pools zu steuern. Mit dieser Funktion können Entwickler die Leistung ihrer Anwendung mit unterschiedlichen Kernzahlen testen.

Chromium-Problem: 1297439

Vorschau von Nicht-Farbwerten beim automatischen Vervollständigen von CSS-Variablen

Beim automatischen Vervollständigen von CSS-Variablen wird in den DevTools jetzt die Nicht-Farbvariable mit einem aussagekräftigen Wert gefüllt, damit Sie sehen können, welche Art von Änderung der Wert für den Knoten bewirkt.

Chromium-Problem: 1285091

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

Der Bereich Cache für Zurück/Vorwärts im Bereich Anwendung enthält einen neuen Abschnitt mit Frames, mit dem Sie blockierende Frames identifizieren können, die verhindern, dass die Seite für den bfcache infrage kommt.

Chromium-Problem: 1288158

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

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

1. Eigene aufzählbare Attribute
2. Eigene nicht aufzählbare Attribute
3. Geerbte aufzählbare Attribute
4. Geerbte, nicht aufzählbare Attribute

Bisher war es für Entwickler schwieriger, relevante Eigenschaften zu finden, da bei Vorschlägen nur eigene Eigenschaften gegenüber geerbten Eigenschaften bevorzugt wurden und alle geerbten Eigenschaften die gleiche Priorität hatten.

Chromium-Problem: 1299241

Verbesserungen bei Quellzuordnungen

Hier sind einige Korrekturen an Quellzuordnungen, die die allgemeine Fehlerbehebung verbessern:

• Breakpoints funktionieren jetzt in Inline-<script> mit sourceURL-Annotationen.
• Der Debugger löst jetzt blockbezogene Variablen in der Ansicht Scope mit Quellzuordnungen auf.
• Der Debugger löst jetzt Variablen in Pfeilfunktionen in der Ansicht Scope mit Quellzuordnungen auf.

Chromium-Probleme: 1329113, 1322115

Sonstige Highlights

Hier sind einige wichtige Korrekturen 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>-Rendering-Blockierungsprobleme im Bereich Leistungsstatistiken wurden verbessert. Bisher hat DevTools add async attribute to the script tag vorgeschlagen, obwohl das Skript bereits als „async“ markiert ist. (1334096)
• Im Bereich Leistungsstatistiken werden jetzt iFrames als potenzielle Ursachen für Layoutverschiebungen 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 Quellzuordnungen generiert wurden) jetzt höher eingestuft, sodass sie über ähnlich benannten bereitgestellten Skripts angezeigt werden. (1312929)

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.

• Sie können uns Feedback und Funktionsanfragen unter crbug.com senden.
• Melden Sie ein DevTools-Problem in den Entwicklertools über das more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Senden Sie einen Tweet an @ChromeDevTools.
• Hinterlassen Sie Kommentare in den YouTube-Videos zu den Neuerungen in den DevTools oder den YouTube-Videos mit DevTools-Tipps.

Neu in den Entwicklertools

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