Neuerungen in den Entwicklertools (Chrome 114)

Sofia Emelianova

Jecelyn Yeen

Unterstützung für WebAssembly-Debugging

In den Entwicklertools ist Einstellungen > Experiments > 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 pausieren 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 von Breakpoints und mehr.

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

Chromium-Problem: 1414289.

Verbessertes Stepping-Verhalten in Wasm-Apps

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 > Quellen aktiviert.

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 > Experimente > Richtlinienverletzenden Knoten oder Attribut in der DOM-Baumstruktur des Elementbereichs hervorheben und untersuchen Sie diese Demoseite.

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

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.

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.

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

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:

• Der Web Vitals-Track. Die entsprechenden Zeitangaben finden Sie stattdessen im Track Timings, wenn Sie den Mauszeiger darauf bewegen.
• Der Untertrack Long Tasks. Solche Aufgaben finden Sie bereits im Haupt-Track, rot schattiert und mit einem roten Dreieck.

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.

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 dieser Phase wird der Bereich JavaScript Profiler aus den DevTools entfernt. Sie können ihn aber weiterhin vorübergehend über die Einstellungen > Experiments aktivieren und über das Dreipunkt-Menü  öffnen.

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

Chromium-Problem: 1428026.

Sonstige Highlights

Hier sind einige wichtige Korrekturen in dieser Version:

• Die Farbauswahl erkennt jetzt HWB-Werte, die beim Zuschneiden außerhalb des Farbraums liegen (1429271).
• Der Bereich Quellen:
  • Die JSON-Syntaxhervorhebung für Quellzuordnungen wurde aktiviert (1385374).
  • Die Meldung „Quellzuordnung wurde erkannt“ wird 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 Syntaxfehler (1314700) werden ausgegeben.
• Das Dialogfeld zum Bearbeiten von Breakpoints hat jetzt eine Schließen-Schaltfläche. Bisher mussten Sie die Eingabetaste drücken oder den Fokus vom Dialogfeld entfernen (1412980).

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.

• Sie können uns Feedback und Funktionsanfragen unter crbug.com senden.
• Melden Sie ein DevTools-Problem in den Entwicklertools über das more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Senden Sie einen Tweet an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu Neuerungen in den DevTools oder den YouTube-Videos mit DevTools-Tipps.

Neu in den Entwicklertools

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