Neuerungen in den Entwicklertools (Chrome 114)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Unterstützung für WebAssembly-Debugging

In den Entwicklertools ist Einstellungen. Einstellungen > Experiments > Kästchen. WebAssembly Debugging: Enable DWARF support standardmäßig aktiviert. Weitere Informationen finden Sie unter WebAssembly mit modernen Tools debuggen.

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

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

Eine Wasm-Anwendung, die im Debugger pausiert wurde.

Wenn Sie das Wasm-Debugging testen möchten, installieren Sie die C/C++ DevTools Support (DWARF)-Erweiterung und führen Sie den Code in der Mandelbrot-Demo schrittweise aus.

Chromium-Problem: 1414289.

Verbessertes Stepping-Verhalten in Wasm-Apps

Überspringen. Step over (Überspringen) in Ihrem Originalcode führt jetzt nicht mehr zu einer Pause in der Disassemblierung (.wasm-Datei). Bisher wurde die Wiedergabe an dieser Stelle pausiert.

Das Einzelschritt-Debugging wird jedoch beendet, wenn der Ausführungspunkt außerhalb der Funktion liegt, in der es gestartet wurde, z. B. nach der Rückkehr aus der Funktion.

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

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

Chromium-Problem: 1418938.

AutoFill mit dem Bereich „Elemente“ und dem Tab „Probleme“ debuggen

Mit Chrome Autofill werden Formulare automatisch mit gespeicherten Informationen wie Adressen oder Zahlungsinformationen ausgefüllt. Damit Sie Probleme im Zusammenhang mit dem automatischen Ausfüllen leichter beheben können, werden sie jetzt im Elements-Steuerfeld mit roten geschweiften Unterstreichungen hervorgehoben.

Wenn Sie sich diese Funktion ansehen möchten, aktivieren Sie Einstellungen. Einstellungen > Experimente > Kästchen. Richtlinienverletzenden Knoten oder Attribut im DOM-Baum des Elementbereichs hervorheben und untersuchen Sie diese Demoseite.

Probleme mit Autofill, die im Elementbereich 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 aufgeführt und Sie erhalten Hinweise dazu, was schiefgelaufen ist.

Chromium-Problem: 1399414.

Assertions in der Rekorder App

Im Bereich Recorder können Sie jetzt während der Aufzeichnung Assertions hinzufügen. Alle Laufzeitdaten sind verfügbar.

Wenn Sie eine Behauptung hinzufügen möchten, starten Sie eine neue Aufzeichnung, interagieren Sie mit Ihrer Seite und klicken Sie auf Behauptung hinzufügen. Mit Recorder wird ein Schritt vom Typ waitForElement eingefügt, den Sie sofort anpassen können. Im Video sehen Sie, wie Zusicherungen in der Demo zum Kaffeewagen funktionieren.

In diesem Video wird gezeigt, wie Sie Folgendes bestätigen:

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

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

Außerdem merkt sich der Recorder jetzt Ihr bevorzugtes Skriptformat in der nebeneinander angezeigten Codeansicht und im Kontextmenü für Schritte.

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, die sich mit URLs befassen, werden jetzt nach Einheit gruppiert und numerische Statistiken wie Größe oder Dauer werden zusammengefasst. Beliebte Drittanbieter werden auch mit ihrer Kategorie getaggt, damit Sie ihren Zweck auf der Seite leichter erkennen können.

Nach Entität gruppierte Audits.

Die Grundlagen zur Verwendung des Lighthouse-Bereichs in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558.

Leistungsverbesserungen

performance.mark() zeigt das Timing beim Hovern unter „Leistung“ > „Timings“ an.

Die performance.mark()-Methode zeigt jetzt das Timing an, wenn Sie den Mauszeiger auf die entsprechende Markierung unter Leistung > Timings bewegen. Der Zeitpunkt ist ein Zeitstempel relativ zum vorherigen Navigationsereignis.

Das Pop-up mit dem Timing beim Hovern im Bereich „Timings“.

Chromium-Problem: 1426762.

Der Befehl profile() füllt „Leistung“ > „Haupt“ aus.

Mit den Befehlen profile() und profileEnd() in der Console wird jetzt das CPU-Profiling im Hauptthread des Bereichs Leistung gestartet und beendet.

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

Chromium-Problem: 1429191.

Warnung bei langsamen Nutzerinteraktionen

Nutzerinteraktionen, die länger als 200 Millisekunden dauern, führen auf dem Tab Leistung > Zusammenfassung zu einer INP-Warnung (Interaction to Next Paint).

Die INP-Warnung.

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

Chromium-Probleme: 1432512, 1432509.

Der Web Vitals-Track wurde verschoben

Im Bereich Leistung wurden die folgenden Tracks entfernt:

Sowohl der Web Vitals- als auch der Long Tasks-Track enthielten Informationen, die an anderer Stelle dupliziert wurden. Außerdem waren sie nicht interaktiv, im Gegensatz zu den Alternativen mit mehr Funktionen, die bei einem Klick detailliertere Informationen liefern.

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

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

Weitere Informationen zu Web Vitals

Einstellung des JavaScript-Profilers: Phase 3

Bereits in Chrome 58 hat das DevTools-Team geplant, den JavaScript-Profiler einzustellen und Node.js- und Deno-Entwickler das Leistungssteuerfeld zum Profiling der JavaScript-CPU-Leistung verwenden zu lassen.

Mit DevTools-Version 114 beginnt Phase 3 der Einstellung des JavaScript-Profilers in vier Phasen. In dieser Phase wird der Bereich JavaScript Profiler aus den DevTools entfernt. Sie können ihn aber weiterhin vorübergehend über Einstellungen. Einstellungen > Experimente aktivieren und über das Dreipunkt-Menü Dreipunkt-Menü öffnen.

Kästchen „JavaScript-Profiler“ in „Einstellungen“ und dann „Tests“

Verwenden Sie das Leistungssteuerfeld, um die CPU-Leistung zu profilieren.

Chromium-Problem: 1428026.

Sonstige Highlights

Hier sind einige wichtige Korrekturen in dieser Version:

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.