Diese Seite wurde von der Cloud Translation API übersetzt.

Neu in den Entwicklertools (Chrome 112)

Sofia Emelianova

Jecelyn Yeen

Rekorder-Updates

Unterstützung von Replay-Erweiterungen

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

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

Benutzerdefinierte Benutzeroberfläche für die erneute Wiedergabe.

Wenn Sie den Rekorder an Ihre Anforderungen anpassen und in Ihre Tools integrieren möchten, können Sie eine eigene Erweiterung entwickeln. Sehen Sie sich dazu die chrome.devtools.recorder API und weitere Beispiele für Erweiterungen an.

Chromium-Problem: 1400243.

Mit Pierce-Selektoren aufzeichnen

Zusätzlich zu benutzerdefinierten, CSS-, ARIA-, Text- und XPath-Selektoren kannst du jetzt auch Filterselektoren verwenden. Diese Selektoren verhalten sich wie CSS-Selektoren, können aber auch Schatten durchbohren.

Starten Sie eine neue Aufzeichnung auf einer Seite mit Shadow DOM und klicken Sie unter Auswahltypen für die Aufnahme das Kästchen Pierce an. Erfassen Sie Ihre Interaktion mit Elementen im Shadow DOM und sehen Sie sich den entsprechenden Schritt an.

Einstellen des Rekorders zur Verwendung von Pierce-Selektoren; Pierce-Selektor in Aktion

Chromium-Problem: 1411188.

Als Puppeteer-Script mit Lighthouse-Analyse exportieren

Mit dem Rekorder wurde 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 Ihre Aufzeichnung, klicken Sie auf Exportieren, wählen Sie die neue Option aus und speichern Sie die Datei .js.

Puppeteer exportieren (einschließlich Lighthouse-Analyse)

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

Der Lighthouse-Bericht wurde in Chrome geöffnet.

Erweiterungen herunterladen

Sie haben die Möglichkeit, Ihre Rekorder-Nutzung anzupassen, z. B. mit benutzerdefinierten Exportoptionen. Du kannst Erweiterungen für den Rekorder herunterladen, indem du in einer Aufzeichnung auf Exportieren > Erweiterungen abrufen klickst.

Die Option Erweiterungen herunterladen im Dropdown-Menü Export.

Sie können der Liste der Rekorder-Erweiterungen Ihre eigene Erweiterung hinzufügen. Wir freuen uns darauf, Ihre Firma in der Liste zu sehen.

Chromium-Probleme: 1417104, 1413168.

Elemente > Stile aktualisieren

CSS-Dokumentation

Wie oft pro Tag suchen Sie nach Dokumentation zu Preisvergleichsportal-Properties? Im Bereich Elemente > Stile wird jetzt eine kurze Beschreibung angezeigt, wenn Sie den Mauszeiger auf eine Eigenschaft bewegen.

Die Kurzinfo mit der Dokumentation zu einer CSS-Property.

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

Wenn Sie sich mit CSS gut auskennen, werden die Kurzinfos möglicherweise lästig sein. Wenn Sie sie alle deaktivieren möchten, setzen Sie ein Häkchen bei Nicht anzeigen.

Wenn Sie sie wieder aktivieren möchten, klicken Sie auf Einstellungen > Einstellungen > Elemente > Kurzinfo zur CSS-Dokumentation anzeigen.

Chromium-Problem: 1401107.

Unterstützung für CSS-Verschachtelungen

Im Bereich Elemente > Styles wird jetzt die CSS-Verschachtelung-Syntax erkannt und verschachtelte Stile werden auf die rechten Elemente angewendet.

Chromium-Problem: 1172985.

Logpoints und bedingte Haltepunkte in der Console markieren

Die UX für Haltepunkte wurde weiter verbessert und in der Konsole werden jetzt Nachrichten markiert, die durch Haltepunkte ausgelöst wurden:

console.* ruft bedingte Haltepunkte mit einem orangefarbenen Fragezeichen auf. ?
Logpoint-Meldungen mit zwei rosa Punkten ..

Änderungen an der Anzeige von Nachrichten, die durch Haltepunkte ausgelöst wurden, in der Konsole: mit Symbolen und korrektem Quelllink.

In der Console sind jetzt entsprechende Ankerlinks zu Haltepunkten in Quelldateien verfügbar – anstelle von VM<number>-Skripts, die Chrome erstellt, um JavaScript-Elemente in V8 auszuführen.

Klicken Sie auf den Link neben der Haltepunktnachricht, um direkt zum Haltepunkteditor zu wechseln.

Der Ankerlink neben einer Logpoint-Nachricht, die den Haltepunkt-Editor öffnet.

Chromium-Problem: 1027458.

Irrelevante Skripts beim Debugging ignorieren

Damit Sie sich auf die wichtigsten Teile Ihres Codes konzentrieren können, können Sie jetzt irrelevante Skripts direkt in der Dateistruktur im Bereich Quellen > Seite zur Ignorieren-Liste hinzufügen.

Klicken Sie mit der rechten Maustaste auf ein beliebiges Skript oder einen Ordner und wählen Sie eine der Optionen zum Ignorieren aus. Möglicherweise werden Optionen angezeigt, mit denen Sie das Skript oder den Ordner zur Liste hinzufügen oder aus der Liste entfernen können. Der Debugger ignoriert Skripts, die der Liste hinzugefügt wurden, und lässt sie im Aufrufstack weg.

Kontextmenüs eines Ordners und Skripts mit Optionen zum Ignorieren.

Alle Skripts und Ordner, die auf der Ignorieren-Liste stehen, sind in der Dateistruktur ausgegraut.

Skripts und Ordner, die auf der Ignorieren-Liste stehen, sind ausgegraut dargestellt. Sie können sie mit einer experimentellen Option im Dropdown-Menü Weitere Optionen ausblenden.

Wenn Sie ein ignoriertes Script auswählen, gelangen Sie über die Schaltfläche Konfigurieren zu Einstellungen > Ignorierliste. Sie können ignorierte Quellen auch in der Dateistruktur ausblenden. Klicken Sie dazu auf > Quellen auf der Ignorieren-Liste ausblenden .

Chromium-Problem: 883325.

Einstellung des JavaScript Profiler gestartet

Bereits ab Chrome 58 plante das DevTools-Team, den JavaScript-Profiler einzustellen. Außerdem sollten Node.js- und Deno-Entwickler im Bereich Leistung ein Profil für die JavaScript-CPU-Leistung erstellen.

Mit dieser Entwicklertools-Version (112) beginnt die Einstellung des JavaScript Profiler mit vier Phasen. Im Bereich JavaScript Profiler wird jetzt das entsprechende Warnbanner angezeigt.

Verwenden Sie den Bereich Leistung anstelle von Profiler, um ein Profil der CPU zu erstellen.

Weitere Informationen und Feedback findest du im entsprechenden RFC und crbug.com/1354548.

Chromium-Problem: 1417647.

Weniger Kontrast emulieren

Auf dem Tab Rendering wird der Liste Sehschwächen emulieren die neue Option Kontrast verringert hinzugefügt. Mit dieser Option können Sie herausfinden, wie Ihre Website für Personen mit verringerter Kontrastempfindlichkeit aussieht.

Die Option für den reduzierten Kontrast, die unter der Funktion „Sehschwächen emulieren“ ausgewählt wurde.

Hinweis: Die Listenoptionen wurden aktualisiert und zeigen nun an, für welche Farbempfindlichkeit die Optionen stehen.

Mit den Entwicklertools kannst du alle Kontrastprobleme auf einmal finden und beheben. Weitere Informationen finden Sie unter Lesbarkeit Ihrer Website verbessern.

Chromium-Probleme: 1412719, 1412721.

Lighthouse 10

Im Steuerfeld Lighthouse wird jetzt Lighthouse 10.0.1 ausgeführt. Weitere Informationen finden Sie unter Neue Funktionen in Lighthouse 10.0.1.

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

Lighthouse > > Alte Navigation ist jetzt standardmäßig deaktiviert. Für diese Option wird die alte Lighthouse-Konfiguration im Navigationsmodus verwendet.

Legacy-Navigation deaktiviert.

In Lighthouse 10 wird jetzt Moto G Power als Standardgerät zur Emulation verwendet. Die Entwicklertools haben dieses Gerät unter Einstellungen > Geräte hinzugefügt.

Moto G Power aus.

Chromium-Problem: 772558.

Konsolenwarnung zum Entfernen des no-op-Service Worker-Abruf-Handlers

In Chrome 112 werden no-op-Abruf-Handler (kein Vorgang) für Service Worker-Abruf-Handler übersprungen, da sie möglicherweise die Navigation verlangsamen, aber keinem Zweck dienen. Solche Handler sind nicht mehr erforderlich, damit Ihre Website als Progressive Web-App eingestuft werden kann.

Die Console zeigt jetzt eine Warnung an, wenn sie auf Ihrer Website einen no-op-Abruf-Handler findet. Sie sollten ihn entfernen.

Einen No-Op-Abruf-Handler und die entsprechende Warnung in der Console.

Chromium-Problem: 1347319.

Sonstige Highlights

Dies sind einige bemerkenswerte Korrekturen in dieser Version:

Im Bereich Quellen > Haltepunkte werden jetzt neben mehrdeutigen Dateinamen (1403924) differenzierende Dateipfade angezeigt.
Im Hauptbereich im Flame-Diagramm des Steuerfelds Leistung ist jetzt CpuProfiler::StartProfiling als Profiler Overhead (1358602) festgelegt.
Die Entwicklertools haben die automatische Vervollständigung verbessert:
- Quellen: Konsistente Vervollständigungen eines beliebigen Wortes (1320204).
- Konsole: Arrow down wählt den ersten Vorschlag aus und Vorschläge erhalten Tab Hinweise (1276960).
In den Entwicklertools wurde ein Haltepunkt für Ereignis-Listener hinzugefügt, damit das Öffnen eines Dokument-Bild-im-Bild-Fensters (1315352) pausiert werden kann.
Die Entwicklertools haben eine Problemumgehung eingerichtet, mit der Vue2-Webpack-Artefakte korrekt als JavaScript (1416562) angezeigt werden.
Eine Einstellung der Konsole erhält einen besseren Namen: „console.trace()“-Nachrichten automatisch maximieren. 1139616.

Vorschaukanäle herunterladen

Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

Sende uns über crbug.com Vorschläge oder Feedback.
Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen > Hilfe > Probleme mit den Entwicklertools melden.
Senden Sie einen Tweet an @ChromeDevTools.
Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.