Neuerungen in den Entwicklertools (Chrome 114)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Unterstützung für die WebAssembly-Fehlerbehebung

In den Entwicklertools ist standardmäßig Einstellungen. Einstellungen > Experimente > Kästchen. WebAssembly-Debugging: DWARF-Unterstützung aktivieren 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 verfügbaren Informationen zum Debuggen zur Verfügung:

  • Ihr ursprünglicher Quellcode, der mit DWARF-Debugging-Informationen zugeordnet wurde.
  • Verständliche Funktionsnamen im Aufrufstack.
  • Unterstützung für Haltestellen und mehr.

Eine Wasm-Anwendung, die im Debugger angehalten wurde.

Wenn Sie das Wasm-Debugging testen möchten, 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

Bitte warten Sie einen Moment. Überspringen im ursprünglichen Code verhindert jetzt das Pausieren bei der Deassemblage (.wasm-Datei). Zuvor wurde der Vorgang dort pausiert.

Das Stepping endet jedoch, wenn es außerhalb der Funktion endet, in der es gestartet wurde, z. B. nach dem Zurückkehren aus der Funktion.

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

Die neue Einstellung finden Sie unter „Einstellungen“ und dann unter „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 Bereich Elemente mit roten geschweiften Unterstreichungen hervorgehoben.

Wenn Sie diese Funktion ausprobieren möchten, aktivieren Sie Einstellungen. Einstellungen > Tests > Kästchen. Knoten oder Attribut mit Verstoß im DOM-Baum des Elementsbereichs hervorheben und sehen Sie sich diese Demoseite an.

Probleme mit Autofill werden im Bereich „Elemente“ hervorgehoben und im Bereich „Probleme“ gemeldet.

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 aufgelistet und Hinweise darauf gegeben, was schiefgelaufen ist.

Chromium-Problem: 1399414.

Behauptungen in der Rekorder App

Im Bereich Aufzeichnung können Sie jetzt direkt während der Aufzeichnung Behauptungen hinzufügen. Dabei stehen Ihnen alle Laufzeitdaten zur Verfügung.

Wenn Sie eine Behauptung hinzufügen möchten, starten Sie eine neue Aufnahme, interagieren Sie mit Ihrer Seite und klicken Sie auf Behauptung hinzufügen. Der Aufzeichnungstool fügt einen Schritt vom Typ waitForElement ein, den Sie direkt anpassen können. Im Video sehen Sie, wie in der Demo für den Kaffeewagen Behauptungen in Aktion gesetzt werden.

In diesem Video wird gezeigt, wie Sie Folgendes angeben:

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

Sie können auch Schritte konfigurieren, um beispielsweise bedingte Anweisungen in JavaScript, die Anzahl der untergeordneten Elemente eines Knotens (count) oder die Sichtbarkeit von Elementen zu prüfen. Weitere Informationen finden Sie unter Schritte konfigurieren.

Außerdem merkt sich der Aufzeichner jetzt Ihr bevorzugtes Scriptformat in der Codeansicht nebeneinander und im Menü für Rechtsklickschritte.

Chromium-Problem: 1423624.

Lighthouse 10.1.1

Im Bereich Lighthouse wird jetzt Lighthouse 10.1.1 verwendet. Eine wichtige Änderung wurde in 10.1.0 eingeführt. Alle Prüfungen, die sich auf URLs beziehen, werden jetzt nach Entität gruppiert und es werden numerische Statistiken wie Größe oder Dauer zusammengefasst. Beliebte Drittanbieter werden ebenfalls mit ihrer Kategorie getaggt, damit ihr Zweck auf der Seite leichter zu erkennen ist.

Geprüfte Entitäten nach Entität gruppiert.

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

Chromium-Problem: 772558

Leistungsverbesserungen

performance.mark() zeigt das Timing an, wenn der Mauszeiger auf „Leistung“ > „Timings“ bewegt wird.

Die Methode „performance.mark()“ zeigt jetzt das Timing an, wenn Sie den Mauszeiger auf die entsprechende Markierung unter Leistung > Zeitpunkte bewegen. Die Zeit ist hier ein Zeitstempel relativ zum vorherigen Navigationsereignis.

Das Pop-up mit Zeitangaben, das im Bereich „Timing“ beim Bewegen des Mauszeigers eingeblendet wird.

Chromium-Problem: 1426762.

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

Mit den Befehlen profile() und profileEnd() in der Console können Sie jetzt das CPU-Profiling im Haupt-Thread des Bereichs Leistung starten und beenden.

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

Chromium-Problem: 1429191

Warnung bei langsamen Nutzerinteraktionen

Bei Nutzerinteraktionen, die länger als 200 Millisekunden dauern, wird auf dem Tab Leistung > Zusammenfassung eine Warnung für 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 die folgenden Messwerte entfernt:

Sowohl die Core Web Vitals- als auch die Lange Aufgaben-Tracks enthielten Informationen, die an anderer Stelle dupliziert wurden. Außerdem waren sie im Vergleich zu ihren funktionsreicheren Alternativen nicht interaktiv, die beim Klicken detailliertere Informationen liefern.

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

Außerdem wurde der Track Erfahrungen in Layoutverschiebungen umbenannt, um seine Verwendung genauer zu beschreiben.

Weitere Informationen zu Web Vitals

Einstellung des JavaScript-Profilers: Phase 3

Bereits in Chrome 58 plante das DevTools-Team, den JavaScript-Profiler nach und nach einzustellen und Node.js- und Deno-Entwicklern das Steuerfeld Leistung für das Profiling der JavaScript-CPU-Leistung zur Verfügung zu stellen.

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

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

Verwende das Steuerfeld Leistung, um die CPU-Leistung zu erfassen.

Chromium-Problem: 1428026

Sonstige Highlights

Hier sind einige bemerkenswerte Fehlerkorrekturen in dieser Version:

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

Neu in den DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.