Neu in den Entwicklertools (Chrome 112)

Sofia Emelianova

Jecelyn Yeen

Rekorder-Updates

Unterstützung von Replay-Erweiterungen

Der Rekorder unterstützt jetzt benutzerdefinierte Wiedergabeoptionen, die Sie mit einer Erweiterung in die Entwicklertools einbetten können.

Beispielerweiterung ausprobieren Wählen Sie die neue Option für benutzerdefinierte Replays aus, um die entsprechende Benutzeroberfläche zu öffnen.

Wenn Sie den Rekorder an Ihre Anforderungen anpassen und in Ihre Tools einbinden möchten, können Sie eine eigene Erweiterung entwickeln. Sehen Sie sich dazu die chrome.devtools.recorder API und weitere Erweiterungsbeispiele an.

Chromium-Problem: 1400243.

Mit Pierce-Selektoren aufnehmen

Zusätzlich zu benutzerdefinierten, CSS-, ARIA-, Text- und XPath-Selectors können Sie jetzt auch Pierce-Selectors verwenden. Diese Selektoren verhalten sich wie CSS-Selektoren, können aber auch Shadow Roots durchdringen.

Starten Sie eine neue Aufzeichnung auf einer Seite mit Shadow-DOM und setzen Sie ein Häkchen bei Pierce unter Aufzuzeichnende Selectortypen. Interaktionen mit Elementen im Shadow-DOM aufzeichnen und den entsprechenden Schritt prüfen

Chromium-Problem: 1411188.

Als Puppeteer-Script mit Lighthouse-Analyse exportieren

Mit dem Rekorder wird eine neue Exportoption eingeführt: Puppeteer (einschließlich Lighthouse-Analyse). Mit Puppeteer können Sie Chrome automatisieren und steuern. Mit Lighthouse können Sie die Leistung Ihrer Website erfassen und verbessern.

Öffnen Sie die Aufnahme, klicken Sie auf  Exportieren, wählen Sie die neue Option aus und speichern Sie die .js-Datei.

Führen Sie das Puppeteer-Skript aus, um einen Lighthouse-Bericht in einer flow.report.html-Datei zu erhalten.

Erweiterungen installieren

Sie können die Aufzeichnung anpassen, z. B. mit benutzerdefinierten Exportoptionen. Wenn Sie Erweiterungen für Recorder aufrufen möchten, klicken Sie in einer Aufnahme auf  Exportieren > Erweiterungen abrufen.

Sie können der Liste der Recorder-Erweiterungen Ihre eigene Erweiterung hinzufügen. Wir freuen uns darauf, auch deine auf der Liste zu sehen.

Chromium-Probleme: 1417104, 1413168.

„Elemente“ > „Stile aktualisieren“

CSS-Dokumentation

Wie oft am Tag sehen Sie sich die Dokumentation zu CSS-Eigenschaften an? Im Bereich Elemente > Stile wird jetzt eine kurze Beschreibung angezeigt, wenn Sie den Mauszeiger auf eine Property bewegen.

Die Kurzinfo enthält auch einen Link Weitere Informationen, der Sie zu einer MDN-CSS-Referenz für diese Eigenschaft führt.

Wenn Sie sich gut mit CSS auskennen, empfinden Sie die Tooltips möglicherweise als störend. Wenn Sie alle deaktivieren möchten, setzen Sie ein Häkchen bei Nicht anzeigen.

Wenn Sie sie wieder aktivieren möchten, gehen Sie zu Einstellungen > Einstellungen > Elemente > CSS-Dokumentation als Kurzinfo anzeigen.

Chromium-Problem: 1401107.

Unterstützung für CSS-Nesting

Im Bereich Elemente > Stile wird jetzt die Syntax für CSS-Verschachtelung erkannt und verschachtelte Stile werden auf die richtigen Elemente angewendet.

Chromium-Problem: 1172985.

Logpoints und bedingte Breakpoints in der Console markieren

Die erweiterte Breakpoint-Benutzeroberfläche wurde weiter verbessert. In der Konsole werden jetzt Meldungen markiert, die durch Breakpoints ausgelöst werden:

• console.*-Aufrufe in bedingten Haltepunkten mit einem orangefarbenen Fragezeichen ?
• Logpoint-Nachrichten mit zwei rosafarbenen Punkten ..

In der Konsole werden jetzt korrekte Ankerlinks zu Haltepunkten in Quelldateien angezeigt, anstatt VM<number>-Skripts, die von Chrome erstellt werden, um JavaScript auf V8 auszuführen.

Klicken Sie auf den Link neben der Haltepunkt-Meldung, um direkt zum Haltepunkt-Editor zu gelangen.

Chromium-Problem: 1027458.

Irrelevante Scripts beim Debuggen ignorieren

Damit Sie sich auf die wichtigsten Teile Ihres Codes konzentrieren können, haben Sie jetzt die Möglichkeit, irrelevante Skripts direkt über die Dateistruktur im Bereich Quellen > Seite der Ignore List hinzuzufügen.

Klicken Sie mit der rechten Maustaste auf ein beliebiges Script oder einen beliebigen Ordner und wählen Sie eine der Optionen zum Ignorieren aus. Möglicherweise sehen Sie Optionen zum Hinzufügen oder Entfernen des Skripts oder Ordners aus der Liste. Der Debugger ignoriert Skripts, die der Liste hinzugefügt wurden, und lässt sie im Aufrufstack aus.

Alle ignorierten Skripts und Ordner werden in der Dateistruktur grau dargestellt.

Wenn Sie ein ignoriertes Script auswählen, werden Sie über die Schaltfläche Konfigurieren zu Einstellungen > Ignorierliste weitergeleitet. Sie können ignorierte Quellen auch über  > Quellen auf der Ignorieren-Liste ausblenden im Dateibaum ausblenden.

Chromium-Problem: 883325.

JavaScript-Profiler wird eingestellt

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 dieser DevTools-Version (112) beginnt die Einstellung des JavaScript-Profilers in vier Phasen. Im Bereich JavaScript Profiler wird jetzt das entsprechende Warnbanner angezeigt.

Verwenden Sie anstelle des Profilers das Leistungssteuerfeld, um die CPU zu profilieren.

Weitere Informationen und die Möglichkeit, Feedback zu geben, finden Sie im entsprechenden RFC und unter crbug.com/1354548.

Chromium-Problem: 1417647.

Weniger Kontrast emulieren

Auf dem Tab Rendering wird der Liste Sehbeeinträchtigungen emulieren eine neue Option hinzugefügt: Reduzierter Kontrast. Mit dieser Option können Sie sehen, wie Ihre Website für Nutzer mit eingeschränkter Kontrastsensibilität aussieht.

Die Listenoptionen wurden aktualisiert, um anzugeben, welche Farbempfindlichkeit die Optionen darstellen.

Mit den Entwicklertools können Sie alle Kontrastprobleme auf einmal finden und beheben. Weitere Informationen finden Sie unter Website lesbarer gestalten.

Chromium-Probleme: 1412719, 1412721.

Lighthouse 10

Im Bereich Lighthouse wird jetzt Lighthouse 10.0.1 ausgeführt. Weitere Informationen finden Sie unter Das ist neu in Lighthouse 10.0.1.

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

Lighthouse > > Legacy navigation (Alte Navigation) ist jetzt standardmäßig deaktiviert. Bei dieser Option wird die alte Lighthouse-Konfiguration im Navigationsmodus verwendet.

In Lighthouse 10 wird jetzt das Moto G Power als Standard-Emulationsgerät verwendet. DevTools hat dieses Gerät unter Einstellungen > Geräte hinzugefügt.

Chromium-Problem: 772558.

Konsolenwarnung zum Entfernen des No-Op-Service-Worker-Fetch-Handlers

In Chrome 112 werden No-Op-Fetch-Handler für Service Worker übersprungen, da sie die Navigation verlangsamen können, aber keinen Zweck erfüllen. Solche Handler sind nicht mehr erforderlich, damit Ihre Website als progressive Web-App gilt.

In der Konsole wird jetzt eine Warnung angezeigt, wenn ein Fetch-Handler ohne Operationen auf Ihrer Website gefunden wird. Erwägen Sie, den Text zu entfernen.

Chromium-Problem: 1347319.

Sonstige Highlights

Hier sind einige wichtige Korrekturen in dieser Version:

• Im Bereich Quellen > Haltepunkte werden jetzt unterscheidende Dateipfade neben mehrdeutigen Dateinamen (1403924) angezeigt.
• Im Flammenchart des Bereichs Leistung wird im Hauptbereich jetzt CpuProfiler::StartProfiling als Profiler Overhead (1358602) bezeichnet.
• Verbesserte automatische Vervollständigung in den Entwicklertools:
  • Quellen: Konsistente Vervollständigungen von Wörtern (1320204).
  • Konsole: Mit Arrow down wird der erste Vorschlag ausgewählt und Vorschläge erhalten Tab-Hinweise (1276960).
• In den DevTools wurde ein Event-Listener-Haltepunkt hinzugefügt, mit dem Sie die Ausführung pausieren können, wenn Sie ein Dokument-Bild-im-Bild-Fenster öffnen (1315352).
• In den DevTools wurde eine Problemumgehung eingerichtet, mit der Vue2-WebPack-Artefakte korrekt als JavaScript angezeigt werden (1416562).
• Eine Console-Einstellung erhält einen besseren Namen: „console.trace()“-Nachrichten automatisch maximieren. (1139616).

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 in den YouTube-Videos zu den 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 den DevTools behandelt wurden.