Neuerungen in den Entwicklertools (Chrome 104)

Jecelyn Yeen

Frame während der Fehlerbehebung neu starten

Die Funktion Frame neu starten ist wieder verfügbar. Sie können den vorherigen Code noch einmal ausführen, wenn er irgendwo in einer Funktion pausiert wird. Zuvor wurde diese Funktion aufgrund von Stabilitätsproblemen eingestellt und in Chrome 92 entfernt.

In diesem Beispiel wurde der Debugger zunächst am Haltepunkt (Zeile 343) gegen Ende der Funktion toggleColorScheme angehalten. Um das Debugging am Anfang der toggleColorScheme-Funktion neu zu starten, maximieren Sie im Bereich Debugger den Abschnitt Aufrufstack, 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 langsame Wiedergabe im Rekorder-Bereich

Sie können jetzt User Flows mit einer langsameren Geschwindigkeit wiedergeben – langsam, sehr langsam und extrem langsam. Mit diesen Optionen können Sie die einzelnen Schritte besser beobachten.

Öffnen Sie den Bereich Rekorder und starten Sie eine neue Aufnahme. Wenn die Aufnahme abgeschlossen ist, klicken Sie auf die Drop-down-Schaltfläche Noch einmal abspielen. Wähle eine Geschwindigkeit aus, um die Wiedergabe zu starten.

Optionen für langsame Wiedergabe im Rekorder-Bereich

Chromium-Problem: 1306756

Erweiterung für den Rekorder-Bereich erstellen

Sie können jetzt eine Chrome-Erweiterung erstellen oder installieren, um Wiedergabeskripts in Ihr bevorzugtes Format zu exportieren. In der Dokumentation zur Rekorder Extension API erfahren Sie, wie sie erstellt wird.

Um eine Demo-Erweiterung zu installieren, gehen Sie wie hier beschrieben vor, die in der Dokumentation beschrieben sind.

benutzerdefinierte Erweiterung für das Rekorder-Steuerfeld

Chromium-Problem: 1325751

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

Aktivieren Sie die neue Option Dateien nach „Erstellt“/„Bereitgestellt“, um Ihre Dateien im Bereich „Quellen“ zu organisieren. Bei der Entwicklung von Webanwendungen mit Frameworks wie React oder Angular kann sich das Navigieren in den Quelldateien aufgrund der von den Build-Tools (z. B. Webpack, Vite) generierten Dateien schwierig gestalten.

Mit diesem Kästchen können Sie Dateien für eine schnellere Dateisuche in zwei Kategorien gruppieren:

  • Verfasst: Ähnlich wie die Quelldateien, die Sie in Ihrer IDE ansehen. Die Entwicklertools generiert diese Dateien anhand von Source Maps, die von deinen Build-Tools bereitgestellt werden.
  • Bereitgestellt Die tatsächlichen Dateien, die der Browser liest. In der Regel werden diese Dateien minimiert.

Mit dieser React-Demo kannst du es selbst ausprobieren.

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

Chromium-Problem: 960909

Neues Nutzertiming im Bereich „Leistungsstatistiken“

Mit dem neuen Track Nutzertimings 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 Seitenaufbaus beginnen, wird das Nutzertiming in der Aufzeichnung angezeigt. Klicken Sie auf das Timing-Element, um die zugehörigen Details in der Seitenleiste anzuzeigen.

Nutzertimings werden im Bereich „Leistungsstatistiken“ erfasst

Chromium-Problem: 1322808

Zugewiesene Anzeigenfläche eines Elements anzeigen

Geschlitzte Elemente im Bereich Elemente haben ein neues slot-Logo. Mit dieser Funktion können Sie beim Beheben von Layoutproblemen das Element ermitteln, das sich schneller auf das Layout des Knotens auswirkt.

Dieses Beispiel enthält Karten mit einigen benannten Steckplätzen. Prüfen Sie den person-occupation-Steckplatz einer Karte und klicken Sie auf das slot-Logo daneben, um den zugewiesenen Slot zu sehen.

Hier erfahren Sie, wie Sie mit <template>- und <slot>-Elementen eine flexible Vorlage erstellen, mit der dann das Schatten-DOM einer Webkomponente ausgefüllt werden kann.

Zugewiesene Anzeigenfläche eines Elements anzeigen

Chromium-Problem: 1018906

Hardware-Nebenläufigkeit 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 der Anwendung zu steuern, z. B. die Größe des pthread-Pools in Emscripten. Mit dieser Funktion können Entwickler die Leistung ihrer App anhand verschiedener Kernzahlen testen.

Hardware-Nebenläufigkeit für Leistungsaufzeichnungen simulieren

Chromium-Problem: 1297439

Vorschau des Nicht-Farbwerts bei der automatischen Vervollständigung von CSS-Variablen anzeigen

Bei der automatischen Vervollständigung von CSS-Variablen geben die Entwicklertools jetzt einen aussagekräftigen Wert in die Variable ohne Farbangabe ein, sodass Sie eine Vorschau der Änderung sehen können, die der Wert auf dem Knoten haben wird.

Vorschau des Nicht-Farbwerts bei der automatischen Vervollständigung von CSS-Variablen anzeigen

Chromium-Problem: 1285091

Blockierende Frames im Bereich des Back-Forward-Cache identifizieren

Der Bereich Back-Forward-Cache im Steuerfeld Anwendung enthält einen neuen Bereich für Frames. Hier können Sie blockierende Frames ermitteln, die möglicherweise verhindern, dass die Seite den bfcache nutzen kann.

Blockierende Frames im Bereich des 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 folgender Reihenfolge angezeigt:

  1. Eigene aufzählbare Attribute
  2. Eigene nicht aufzählbare Attribute
  3. Übernommene aufzählbare Attribute
  4. Übernommene nicht aufzählbare Attribute

Bisher war es für Entwickler schwieriger, relevante Properties zu finden, da beim Vorschlag nur eigene Properties gegenüber geerbten Properties bevorzugt wurden und allen übernommenen Properties die gleiche Priorität zugewiesen wurde.

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

Chromium-Problem: 1299241

Verbesserungen bei Source Maps

Im Folgenden finden Sie einige Fehlerbehebungen für Quellzuordnungen, um das Debugging insgesamt zu verbessern:

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

Chromium-Probleme: 1329113, 1322115

Sonstige Highlights

Dies sind einige bemerkenswerte Korrekturen in dieser Version:

  • Die Einstellung Automatische Vervollständigung für das Steuerfeld Quellen wurde korrigiert. Bisher war die automatische Vervollständigung immer aktiviert, auch wenn die Einstellung deaktiviert war. 1323286
  • Der Tab Manifest im Steuerfeld Anwendung wurde aktualisiert, um das aktuelle Farbschemaformat zu parsen. (1318305)
  • Die Vorschläge für <script async>-Probleme, die das Rendering blockieren, im Bereich Leistungsstatistiken wurden verbessert. Bisher haben die Entwicklertools add async attribute to the script tag vorgeschlagen, obwohl das Skript bereits als asynchron gekennzeichnet ist. (1334096)
  • Im Bereich Leistungsstatistiken werden jetzt iFrames als mögliche Ursachen für Layoutverschiebungen erkannt. Sie können die iFrame-Details im Bereich Details ansehen. (1328873)
  • Beim Öffnen der Datei im Befehlsmenü werden die erstellten Dateien, d. h. von Quellzuordnungen generierte Dateien, jetzt höher eingestuft, sodass sie über ähnlich benannten bereitgestellten Skripts angezeigt werden. (1312929)

Vorschaukanäle herunterladen

Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome Erste Schritte

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde abgebrochen.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59