Neuerungen in den Entwicklertools (Chrome 104)

Jecelyn Yeen

Frame während des Debugging 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. Bisher wurde diese Funktion aufgrund von Stabilitätsproblemen eingestellt und in Chrome 92 entfernt.

In diesem Beispiel wurde der Debugger an einem Haltepunkt (Zeile 343) gegen Ende der Funktion toggleColorScheme anfangs angehalten. Wenn Sie das Debugging am Anfang der Funktion toggleColorScheme neu starten möchten, 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 des Debugging neu starten

Chromium-Problem: 1303521

Optionen für die langsame Wiedergabe im Bereich „Rekorder“

Sie können Nutzerflüsse jetzt mit einer langsameren Geschwindigkeit wiedergeben – langsam, sehr langsam und extrem langsam. Mit diesen Optionen können Sie jeden Schritt auf dem Bildschirm besser beobachten.

Öffnen Sie den Bereich Rekorder und starten Sie eine neue Aufzeichnung. Klicken Sie nach der Aufnahme auf die Drop-down-Schaltfläche Erneut abspielen. Wähle eine Geschwindigkeit aus, um die Wiedergabe zu starten.

Optionen für die langsame Wiedergabe im Bereich „Rekorder“

Chromium-Problem: 1306756

Erweiterung für das Rekorder-Steuerfeld erstellen

Sie können jetzt eine Chrome-Erweiterung erstellen oder installieren, um Replay-Scripts in Ihr bevorzugtes Format zu exportieren. Informationen zum Erstellen finden Sie in der Dokumentation zur Recorder Extension API.

Wenn Sie eine Demoerweiterung installieren möchten, folgen Sie dieser Anleitung in der Dokumentation.

Benutzerdefinierte Erweiterung für das Rekorder-Steuerfeld

Chromium-Problem: 1325751

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

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

Wenn Sie dieses Kästchen anklicken, 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 generieren diese Dateien anhand von Source Maps, die von Ihren Build-Tools bereitgestellt werden.
  • Bereitgestellt. Die tatsächlichen Dateien, die vom Browser gelesen werden. In der Regel sind diese Dateien minimiert.

Mit dieser React-Demo kannst du es selbst ausprobieren.

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

Chromium-Problem: 960909

Neuer Bericht „Nutzertimings“ im Bereich „Leistungsstatistiken“

Mit dem neuen Track Nutzertiming im Bereich Leistungsdaten können Sie in Ihrer Aufzeichnung performance.measure()-Markierungen 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 der Track Nutzertiming in der Aufzeichnung angezeigt. Klicken Sie auf das Timing-Element, um die zugehörigen Details in der Seitenleiste anzeigen zu lassen.

Nutzertiming im Bereich „Leistungsstatistiken“

Chromium-Problem: 1322808

Zugewiesene Anzeigenfläche eines Elements anzeigen

Slot-Elemente im Steuerfeld Elemente haben ein neues slot-Logo. Verwenden Sie diese Funktion bei der Behebung von Layoutproblemen, um schneller das Element zu identifizieren, das sich auf das Layout des Knotens auswirkt.

Dieses Beispiel enthält Karten mit einigen benannten Slots. Prüfe den person-occupation-Slot einer Karte und klicke auf das slot-Badge daneben, um den zugewiesenen Slot einzublenden.

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

Zugewiesene Anzeigenfläche eines Elements anzeigen

Chromium-Problem: 1018906

Hardware-Nebenläufigkeit für Performance-Aufzeichnungen simulieren

Mit der neuen Einstellung Hardware-Nebenläufigkeit 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 pthread-Pools von Emscripten zu steuern. Mit dieser Funktion können Entwickler die Leistung ihrer App mit verschiedenen Kernzahlen testen.

Hardware-Nebenläufigkeit für Performance-Aufzeichnungen simulieren

Chromium-Problem: 1297439

Vorschau des Nicht-Farbwerts beim automatischen Vervollständigen von CSS-Variablen anzeigen

Bei der automatischen Vervollständigung von CSS-Variablen wird in den Entwicklertools nun die Variable ohne Farbangabe mit einem sinnvollen Wert gefüllt, sodass Sie in einer Vorschau sehen können, welche Art von Änderung der Wert auf dem Knoten vorgenommen wird.

Vorschau des Nicht-Farbwerts beim automatischen Vervollständigen von CSS-Variablen anzeigen

Chromium-Problem: 1285091

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

Im Bereich Back-Forward-Cache im Steuerfeld Anwendung gibt es einen neuen Bereich Frames, in dem du blockierende Frames erkennen kannst, die möglicherweise verhindern, dass die Seite für den bfCache verwendet werden kann.

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 aufzählbare Attribute
  2. Eigene, nicht aufzählbare Properties besitzen
  3. Übernommene aufzählbare Attribute
  4. Übernommene nicht aufzählbare Eigenschaften

Bisher war es für Entwickler schwieriger, relevante Eigenschaften zu finden, da bei dem Vorschlag nur eigene Eigenschaften gegenüber übernommenen Eigenschaften bevorzugt wurden und alle übernommenen Eigenschaften die gleiche Priorität erhielten.

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

Chromium-Problem: 1299241

Verbesserungen bei Quellzuordnungen

Im Folgenden finden Sie einige Korrekturen für Quellzuordnungen, um die Fehlerbehebung insgesamt zu verbessern:

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

Chromium-Probleme: 1329113, 1322115

Verschiedene Highlights

Im Folgenden sind einige wichtige Fehlerkorrekturen in dieser Version aufgeführt:

  • 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)
  • Aktualisierung des Tabs Manifest im Bereich Anwendung, um das aktuelle Farbschemaformat zu parsen. (1318305)
  • Die Vorschläge für die <script async> Probleme mit Rendering-Blockierungen im Bereich Leistungsstatistiken wurden verbessert. Bisher wurde add async attribute to the script tag in den Entwicklertools vorgeschlagen, obwohl das Script bereits als asynchron gekennzeichnet ist. (1334096)
  • Im Bereich Leistungsstatistiken werden jetzt iFrames als mögliche 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 (durch Quellzuordnungen generierte Dateien) jetzt höher eingestuft, sodass sie über ähnlich benannten bereitgestellten Skripts angezeigt werden. (1312929)

Vorschaukanäle herunterladen

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

Kontaktaufnahme mit dem Team für Chrome-Entwicklertools

Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.

  • Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • Twittern Sie unter @ChromeDevTools.
  • Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 101

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 gekündigt.

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