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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.
• Im Debugger werden jetzt Variablen in Pfeilfunktionen in der Ansicht Bereich mit Quellzuordnungen aufgelöst.

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.
• Problem mit den Entwicklertools über Weitere Optionen melden > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
• 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