Neuerungen in den Entwicklertools (Chrome 114)

Unterstützung für WebAssembly-Debugging

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

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

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

Installieren Sie zum Testen von Wasm-Debugging die Erweiterung C/C++ DevTools Support (DWARF) und gehen Sie den Code aus der Mandelbrot-Demo durch.

Chromium-Problem: 1414289.

Verbessertes Schrittverhalten in Wasm-Apps

Mit der Schritt-für-Schritt-Anleitung im Originalcode wird das Auseinandernehmen pausiert (Datei .wasm). Bisher wurde sie dort pausiert.

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

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

Chromium-Problem: 1418938.

Fehler in Autofill mithilfe des Steuerfelds „Elemente“ und des Tabs „Probleme“ beheben

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

Wenn Sie diese Funktion ausprobieren möchten, aktivieren Sie Einstellungen > Tests > Markiert einen Knoten oder ein Attribut, das gegen die Richtlinien verstößt, im DOM-Baum des Steuerfelds „Elemente“ und sieht sich diese Demoseite an.

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

Chromium-Problem: 1399414.

Assertions in der Rekorder App

Im Bereich Rekorder kannst du jetzt direkt während der Aufzeichnung Assertions hinzufügen. Dabei stehen dir alle Laufzeitdaten zur Verfügung.

Wenn Sie eine Assertion hinzufügen möchten, starten Sie eine neue Aufzeichnung, interagieren Sie mit Ihrer Seite und klicken Sie auf Assertion hinzufügen. Die Rekorder-Funktion fügt einen Schritt mit dem waitForElement-Typ ein, den Sie im Handumdrehen anpassen können. Sehen Sie sich das Video an, um zu sehen, wie Assertions in der Demo für den Kaffeewagen umgesetzt wurden.

In diesem Video erfahren Sie, wie Sie Folgendes bestätigen:

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

Sie können auch Schritte konfigurieren, um deren Durchsetzung zu bestätigen, z. B. bedingte Anweisungen in JavaScript, Anzahl der untergeordneten Knoten (count), Sichtbarkeit von Elementen usw. Weitere Informationen finden Sie unter Schritte konfigurieren.

Außerdem merkt sich der Rekorder jetzt dein bevorzugtes Skriptformat in der direkten 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, bei denen es um URLs geht, sind jetzt nach Entitäten gruppiert und es werden numerische Statistiken wie Größe oder Dauer zusammengefasst. Beliebte Drittanbieter werden ebenfalls mit der entsprechenden Kategorie gekennzeichnet, damit Sie ihren Zweck auf der Seite leichter erkennen können.

Grundlegende Informationen zur Verwendung des Bereichs Lighthouse in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558.

Leistungsverbesserungen

Unter „performance.mark()“ wird der Zeitpunkt angezeigt, wenn der Mauszeiger auf „Leistung“ > Zeitplan

Für die Methode performance.mark() wird jetzt das Timing angezeigt, wenn Sie den Mauszeiger unter Leistung auf die entsprechende Markierung bewegen. Zeitplan: Das Timing hier ist ein Zeitstempel, der sich auf das vorherige Navigationsereignis bezieht.

Chromium-Problem: 1426762.

Der Befehl profile() gibt Werte für „Leistung“ > Hauptnummer

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

Chromium-Problem: 1429191.

Warnung bei langsamen Nutzerinteraktionen

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

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:

• Web Vitals-Track Stattdessen werden die relevanten Zeiten im Track Timings angezeigt, wenn Sie den Mauszeiger darauf bewegen.
• Der Zwischentrack Lange Aufgaben. Sie finden diese Aufgaben bereits im Haupt-Track, der rot und mit einem roten Dreieck schattiert ist.

Sowohl der Web Vitals-Track als auch der Lange Tasks-Track enthielten Informationen, die an anderer Stelle doppelt vorhanden waren. Im Vergleich zu den umfassenderen Alternativen, die beim Anklicken detailliertere Informationen liefern, waren sie außerdem nicht interaktiv.

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

Weitere Informationen zu Web Vitals

Einstellung von JavaScript Profiler: Phase drei

Schon Chrome 58 plante das Entwicklertools-Team, den JavaScript Profiler irgendwann einzustellen und damit Node.js- und Deno-Entwickler über den Bereich Leistung Profile zur JavaScript-CPU-Leistung erstellen können.

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

Verwenden Sie das Steuerfeld Leistung, um ein Profil der CPU-Leistung zu erstellen.

Chromium-Problem: 1428026.

Verschiedene Highlights

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

• Die Farbauswahl erkennt jetzt HWB-Werte, die keine Farbskala haben, wenn sie abgeschnitten werden (1429271).
• Im Bereich Quellen:
  • JSON-Syntaxhervorhebung für Quellzuordnungen wurde aktiviert (1385374).
  • "Quellkarte erkannt" wird nicht mehr angezeigt angezeigt, wenn Sie Quellzuordnungen manuell deaktivieren (1423718).
• In der Console können Sie jetzt unvollständige JavaScript-Ausdrücke mit Strg + Eingabetaste auswerten und Syntaxfehler (1314700) ausgeben.
• Das Dialogfeld zur Bearbeitung von Haltepunkten hat jetzt eine Schaltfläche zum Schließen. Bisher mussten Sie die Eingabetaste drücken oder den Fokus des Dialogfelds aufheben (1412980).

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhalten Sie Zugriff auf die neuesten Entwicklertools, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, bevor Ihre 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