Diese Seite wurde von der Cloud Translation API übersetzt.

Neuerungen in den Entwicklertools (Chrome 114)

Sofia Emelianova

Jecelyn Yeen

Unterstützung für WebAssembly-Debugging

Die Entwicklertools aktivieren standardmäßig Einstellungen > Experimente > WebAssembly-Debugging: DWARF-Unterstützung aktivieren. Weitere Informationen finden Sie unter Debugging WebAssembly mit modernen Tools.

Mit diesem Test können Sie die Ausführung anhalten und Fehler in C- und C++-Code in Wasm-Apps beheben. Dabei stehen Ihnen alle Debugging-Informationen zur Verfügung:

Ihr ursprünglicher Quellcode, der mithilfe von DWARF-Informationen zur Fehlerbehebung zugeordnet wurde.
Verständliche Funktionsnamen im Aufrufstack.
Unterstützung von Haltepunkten und mehr

Eine Wasm-Anwendung wurde im Debugger angehalten.

Um das Wasm-Debugging zu testen, installieren Sie die DWARF-Erweiterung (C/C++ DevTools Support) und führen Sie den Code in der Mandelbrot-Demo durch.

Chromium-Problem: 1414289.

Verbessertes Schrittverhalten in Wasm-Apps

Wenn Sie in Ihrem ursprünglichen Code übergehen, wird das Auseinanderbauen nun nicht mehr unterbrochen (Datei .wasm). Zuvor wurde sie dort pausiert.

Das Stepping endet jedoch, wenn es außerhalb der Funktion landet, in der es begonnen hat, z. B. nach der Rückkehr von der Funktion.

Dieses Verhalten ist unter Einstellungen > Einstellungen > Quellen standardmäßig aktiviert.

Die neue Einstellung finden Sie unter „Einstellungen“ > „Quellen“.

Chromium-Problem: 1418938.

Fehler in Autofill über das Steuerfeld „Elemente“ und den Tab „Probleme“ beheben

Mit der Funktion Chrome Autofill werden Formulare automatisch mit gespeicherten Informationen wie Adressen oder Zahlungsinformationen ausgefüllt. Damit Sie Probleme mit Autofill einfacher beheben können, können sie im Bereich Elemente jetzt rot, typisch unterstrichen werden.

Wenn Sie diese Funktion ausprobieren möchten, aktivieren Sie Einstellungen > Tests > Zeigt einen nicht richtlinienkonformen Knoten oder ein nicht richtlinienkonformes Attribut im DOM-Baum des Elements an und sehen Sie sich diese Demoseite an.

Autofill-Probleme, die im Bereich „Elemente“ hervorgehoben und im Bereich „Probleme“ gemeldet werden.

Bewegen Sie den Mauszeiger auf ein hervorgehobenes Problem in der DOM-Baumstruktur und klicken Sie auf Problem ansehen, um den Tab Probleme zu öffnen. Dort werden alle erkannten Probleme und Hinweise zur Fehlerursache angezeigt.

Chromium-Problem: 1399414.

Assertions in der Rekorder App

Im Bereich Rekorder können Sie jetzt direkt während der Aufzeichnung Assertions mit allen verfügbaren Laufzeitdaten hinzufügen.

Wenn Sie eine Assertion hinzufügen möchten, starten Sie eine neue Aufzeichnung, interagieren Sie mit der Seite und klicken Sie auf Assertion hinzufügen. Der Rekorder fügt einen Schritt mit dem waitForElement-Typ ein, den Sie direkt anpassen können. Sehen Sie sich das Video in der Kaffeewagen-Demo an, um Behauptungen in Aktion zu sehen.

In diesem Video wird erläutert, wie du Folgendes durchsetzen kannst:

HTML-Attribute, z. B. class eines Elements
JavaScript-Eigenschaften in JSON, z. B. .innerText.

Sie können auch Schritte konfigurieren, um z. B. bedingte Anweisungen in JavaScript, die Anzahl der untergeordneten Knoten (count), die Elementsichtbarkeit usw. durchzusetzen. Weitere Informationen finden Sie unter Schritte konfigurieren.

Außerdem merkt sich der Rekorder jetzt das bevorzugte Skriptformat aus der Parallelen Codeansicht und im Schrittmenü mit der rechten Maustaste.

Chromium-Problem: 1423624.

Lighthouse 10.1.1

Im Bereich Lighthouse wird jetzt Lighthouse 10.1.1 ausgeführt. In 10.1.0 wurde eine wichtige Änderung eingeführt. Alle Audits zu URLs werden jetzt nach Entitäten gruppiert und es werden numerische Statistiken wie Größe oder Dauer aggregiert. Auch beliebte Drittanbieter sind mit ihrer Kategorie gekennzeichnet, sodass ihr Zweck auf der Seite leichter zu erkennen ist.

Gruppierte Audits nach Entität.

Informationen zu den Grundlagen der Verwendung des Steuerfelds Lighthouse in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558.

Leistungsverbesserungen

In „`performance.mark()`“ wird die Zeit angezeigt, wenn du den Mauszeiger auf „Leistung“ > „Timings“ bewegst

Die performance.mark()-Methode zeigt jetzt den Zeitpunkt an, wenn Sie unter Leistung > Timings den Mauszeiger auf die entsprechende Markierung bewegen. Das Timing hier ist der Zeitstempel, der sich auf das vorherige Navigationsereignis bezieht.

Das Pop-up-Fenster mit dem Mauszeiger im Bereich „Timings“, wenn der Mauszeiger darauf bewegt wird.

Chromium-Problem: 1426762.

Mit dem Befehl `profile()` werden Daten unter „Leistung“ > „Haupt“

Mit den Befehlen profile() und profileEnd() in der Konsole wird jetzt die CPU-Profilerstellung im Hauptthread des Bereichs „Leistung“ gestartet und beendet.

Mit dem Befehl console() wird ein Profil im Steuerfeld „Leistung“ erstellt.

Chromium-Problem: 1429191.

Warnung bei langsamen Nutzerinteraktionen

Bei Nutzerinteraktionen, die länger als 200 Millisekunden dauern, wird auf dem Tab Leistung > Zusammenfassung die Warnung Interaction to Next Paint (INP) angezeigt.

Die INP-Warnung.

Außerdem wurde die ID der Interaktion aus der Kurzinfo in die Zusammenfassung verschoben.

Chromium-Probleme: 1432512, 1432509.

Der Web Vitals-Track wurde verschoben

Im Bereich Leistung wurden folgende Tracks entfernt:

Der Web Vitals-Track. Stattdessen werden die relevanten Zeitangaben im Timing-Track angezeigt, wenn Sie den Mauszeiger darauf bewegen.
Die Unterverfolgung Lange Aufgaben. Solche Aufgaben finden Sie bereits im Haupt-Track, rot und mit einem roten Dreieck schattiert.

Die Tracks Web Vitals und Lange Aufgaben enthielten Informationen, die an anderer Stelle dupliziert wurden. Sie waren im Vergleich zu den umfassenderen Alternativen, die beim Anklicken detailliertere Informationen liefern, auch nicht interaktiv.

Vor und nach dem Verschieben der Web Vitals in den Timing-Track.

Außerdem wurde der Track Erfahrungen in Layout Shifts umbenannt, um seine Nutzung genauer abzubilden.

Weitere Informationen zu Web Vitals

Einstellung des JavaScript Profiler: Phase 3

Bereits ab Chrome 58 plante das DevTools-Team, den JavaScript-Profiler einzustellen. Außerdem sollten Node.js- und Deno-Entwickler im Bereich Leistung ein Profil für die JavaScript-CPU-Leistung erstellen.

Version 114 der Entwicklertools beginnt Phase 3 der Einstellung des JavaScript Profiler mit vier Phasen. Während dieser Phase wird der JavaScript-Profiler aus den Entwicklertools entfernt. Sie können ihn aber vorübergehend über Einstellungen > Tests aktivieren und über das Dreipunkt-Menü öffnen.

Das Kästchen für den JavaScript-Profiler unter „Einstellungen“ > „Tests“.

Im Bereich Leistung können Sie ein Profil der CPU-Leistung erstellen.

Chromium-Problem: 1428026.

Sonstige Highlights

Dies sind einige bemerkenswerte Korrekturen in dieser Version:

Die Farbauswahl erkennt jetzt HWB-Werte, die nicht im Farbumfang enthalten sind, wenn sie abgeschnitten werden (1429271).
Im Bereich Quellen:
- JSON-Syntaxhervorhebung für Quellzuordnungen aktiviert (1385374).
- Meldungen vom Typ „Quellzuordnung erkannt“ werden nicht mehr angezeigt, wenn Sie Quellzuordnungen manuell deaktivieren (1423718).
In der Konsole können Sie jetzt unvollständige JavaScript-Ausdrücke mit Strg + Eingabetaste auswerten und es werden Syntaxfehler (1314700) ausgegeben.
Der Dialogfeld zum Bearbeiten von Haltepunkten hat jetzt eine Schließen-Schaltfläche. Bisher mussten Sie die Eingabetaste drücken oder den Fokus des Dialogfelds (1412980) aufheben.

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

Leistungsmesswerte im Bereich „Leistung“ visualisieren
Textknoten in der DOM-Struktur markieren
Kopieren Sie den JS-Pfad in einen DOM-Knoten.
Aktualisierungen des Bereichs „Audits“, einschließlich einer neuen Prüfung, die JS-Bibliotheken und neue Schlüsselwörter für den Zugriff auf den Bereich „Audits“ über das Befehlsmenü erkennt
Bonustipp: Verwenden Sie den Gerätemodus, um Medienabfragen zu prüfen (Video)

Chrome 71

Bewegen Sie den Mauszeiger auf ein Ergebnis des Live-Ausdrucks, um einen DOM-Knoten hervorzuheben.
DOM-Knoten als globale Variablen speichern
Informationen zum Initiator und zur Priorität jetzt in HAR-Importen und -Exporten
Im Hauptmenü auf das Befehlsmenü zugreifen
Haltepunkte im Bild im Bild
Bonustipp: Mit monitorEvents() können Sie ausgelöste Knotenereignisse in der Console protokollieren (Video)