Diese Seite wurde von der Cloud Translation API übersetzt.

Neu in den Entwicklertools (Chrome 112)

Sofia Emelianova

Jecelyn Yeen

Updates für Rekorder

Unterstützung von Replay-Erweiterungen

Der Rekorder unterstützt benutzerdefinierte Wiederholungsoptionen, die du mit einer Erweiterung in die Entwicklertools einbetten kannst.

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

Benutzerdefinierte Wiedergabe-UI

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 Beispiele für Erweiterungen an.

Chromium-Problem: 1400243.

Mit Pierce-Auswahl aufnehmen

Neben benutzerdefinierten CSS-, ARIA-, Text- und XPath-Selektoren können Sie jetzt auch pierce-Selektoren verwenden. Diese Selektoren verhalten sich wie CSS-Selektoren, können jedoch auch Schattenwurzeln durchdringen.

Starten Sie auf einer Seite mit Shadow DOM eine neue Aufzeichnung und klicken Sie unter Aufzuzeichnende Selektortypen das Kästchen Pierce an. Zeichnen Sie Ihre Interaktion mit Elementen im Shadow DOM auf und prüfen Sie den entsprechenden Schritt.

Einstellung des Rekorders zur Verwendung von Pierce-Auswahlen; Pierce-Auswahl in Aktion.

Chromium-Problem: 1411188.

Als Puppeteer-Skript mit Lighthouse-Analyse exportieren

Der Rekorder bietet eine neue Exportoption: 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 Aufzeichnung, klicken Sie auf Exportieren, wählen Sie die neue Option aus und speichern Sie die .js-Datei.

Puppeteer exportieren (einschließlich Lighthouse-Analysen)

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

Hier findest du Optionen zum Anpassen der Rekorder App, z. B. mit benutzerdefinierten Exportoptionen. Sie können Erweiterungen für den Rekorder abrufen, indem Sie in einer Aufnahme auf Exportieren > Erweiterungen abrufen klicken.

Die Option „Erweiterungen abrufen“ im Drop-down-Menü „Exportieren“.

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

Chromium-Probleme: 1417104, 1413168.

Aktualisierungen unter „Elemente“ > „Stile“

CSS-Dokumentation

Wie oft am Tag rufen Sie Dokumentationen zu Preisvergleichsportal-Properties auf? 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-Eigenschaft.

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

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

Wenn Sie sie wieder aktivieren möchten, wählen Sie Einstellungen > Einstellungen > Elemente > Kurzinfo zur CSS-Dokumentation anzeigen aus.

Chromium-Problem: 1401107.

Unterstützung von CSS-Verschachtelungen

Der Bereich Elemente > Stile erkennt jetzt die CSS-Verschachtelung-Syntax und wendet verschachtelte Stile auf die richtigen Elemente an.

Chromium-Problem: 1172985.

Logpoints und bedingte Haltepunkte in der Console markieren

Eine weitere Verbesserung der optimierten Haltepunkt-UX ist, dass die Konsole jetzt Nachrichten markiert, die durch Haltepunkte ausgelöst werden:

console.* ruft in bedingten Haltepunkten mit einem orangefarbenen Fragezeichen ? auf
Logpoint-Meldungen mit zwei rosafarbenen zwei Punkten ..

Änderungen an der Darstellung von Meldungen, die durch Haltepunkte ausgelöst wurden, in der Konsole: mit Symbolen und korrektem Quellenlink.

Die Console enthält jetzt korrekte Ankerlinks zu Haltepunkten in Quelldateien anstelle von VM<number>-Skripts, die Chrome erstellt, um JavaScript in V8 auszuführen.

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

Der Ankerlink neben einer Logpoint-Nachricht, mit der der Haltepunkteditor geöffnet wird.

Chromium-Problem: 1027458.

Irrelevante Skripts bei der Fehlerbehebung ignorieren

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

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

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 ignoriert werden, sind ausgegraut. Sie können sie mit einer experimentellen Option im Dropdown-Menü Weitere Optionen ausblenden.

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

Chromium-Problem: 883325.

Einstellung von JavaScript Profiler gestartet

Schon Chrome 58 plante das Entwicklertools-Team, den JavaScript Profiler irgendwann einzustellen und damit Node.js- und Deno-Entwickler über den Bereich Leistung Profile zur JavaScript-CPU-Leistung erstellen können.

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

Verwenden Sie anstelle des Profilers den Bereich Leistung, um ein CPU-Profil zu erstellen.

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

Chromium-Problem: 1417647.

Weniger Kontrast emulieren

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

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

Beachten Sie, dass die Listenoptionen aktualisiert wurden, um Ihnen anzuzeigen, welche Farbunempfindlichkeit 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

Grundlegende Informationen zur Verwendung des Bereichs Lighthouse in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

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

Alte Navigation deaktiviert.

Lighthouse 10 verwendet jetzt Moto G Power als Standardemulationsgerät. Die Entwicklertools haben dieses Gerät zu Einstellungen > Geräte hinzugefügt.

Moto G Power in der Geräteliste.

Chromium-Problem: 772558.

Eine Konsolenwarnung zum Entfernen des Dienst-Worker-Abruf-Handlers ohne Vorgang

Chrome 112 überspringt No-Op (no-Operation)-Abruf-Handler des Service Workers, da sie möglicherweise die Navigation verlangsamen, aber keinen Zweck erfüllen. Solche Handler sind nicht mehr erforderlich, damit Ihre Website als progressive Web-App eingestuft werden kann.

Die Console zeigt jetzt eine Warnung an, wenn auf Ihrer Website ein managementfreier Abruf-Handler gefunden wird. Sie sollten sie entfernen.

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

Chromium-Problem: 1347319.

Verschiedene Highlights

Im Folgenden sind einige wichtige Fehlerkorrekturen in dieser Version aufgeführt:

Im Bereich Quellen > Haltepunkte werden jetzt neben mehrdeutigen Dateinamen (1403924) differenzierende Dateipfade angezeigt.
Im Bereich Main im Flame-Diagramm des Steuerfelds Leistung wird CpuProfiler::StartProfiling jetzt als Profiler Overhead (1358602) festgelegt.
Verbesserte automatische Vervollständigung in den Entwicklertools:
- Quellen: Konstante Vervollständigungen eines beliebigen Wortes (1320204)
- Konsole: Mit Arrow down wird der erste Vorschlag ausgewählt und die Vorschläge erhalten Tab-Hinweise (1276960).
In den Entwicklertools wurde ein Event-Listener-Haltepunkt hinzugefügt, damit Sie beim Öffnen eines Dokument-Bild-im-Bild-Fensters (1315352) eine Pause einlegen können.
Die Entwicklertools haben eine Behelfslösung eingerichtet, die Vue2-Webpack-Artefakte korrekt als JavaScript anzeigt (1416562).
Eine Konsoleneinstellung hat einen besseren Namen: „console.trace()“-Nachrichten automatisch maximieren. (1139616)

Vorschaukanäle herunterladen

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

Kontaktaufnahme mit dem Team für Chrome-Entwicklertools

Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.

Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
Melde ein Problem mit den Entwicklertools über Weitere Optionen > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
Twittern Sie unter @ChromeDevTools.
Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.