Neuerungen in den Entwicklertools (Chrome 114)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Unterstützung für WebAssembly-Debugging

Entwicklertools aktiviert Einstellungen. Einstellungen > Tests > Kästchen. 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

Eine Wasm-Anwendung wurde im Debugger pausiert.

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

Begib dich auf den Weg. 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. Einstellungen > standardmäßig aktiviert. Einstellungen > Quellen:

Die neue Einstellung findest du in den Einstellungen unter „Quellen“.

Chromium-Problem: 1418938.

Fehler bei 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. Einstellungen > Tests > Kästchen. Markiert einen Knoten oder ein Attribut, das gegen die Richtlinien verstößt, im DOM-Baum des Steuerfelds „Elemente“ und sieht 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-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 ihrer Kategorie gekennzeichnet, sodass ihr Zweck auf der Seite einfacher zu erkennen ist.

Gruppierte Audits nach Entität.

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

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

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

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.

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 im Bereich Leistung die Warnung Interaction to Next Paint (INP) angezeigt. Zusammenfassung:

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:

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

Vor und nach der Übertragung der Web Vitals in den Track „Timings“.

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. Einstellungen > Tests und öffnen Sie sie über das Dreipunkt-Menü von Dreipunkt-Menü..

JavaScript-Profiler unter „Einstellungen“ > „Tests“

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:

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