Neu in den Entwicklertools (Chrome 112)

Updates für den Rekorder

Unterstützung für Erweiterungen für die Wiedergabe

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

Beispielerweiterung ausprobieren Wähle die neue Option „Benutzerdefinierte Wiederholung“ aus, um die Benutzeroberfläche für die benutzerdefinierte Wiederholung 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 Beispiele für Erweiterungen an.

Chromium-Problem: 1400243.

Mit Pierce-Auswahl aufnehmen

Zusätzlich zu benutzerdefinierten, CSS-, ARIA-, Text- und XPath-Selektoren können Sie jetzt auch mit Durchdringungs-Selektoren aufzeichnen. Diese Selektoren verhalten sich wie CSS-Selektoren, können aber 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. Erfassen Sie Ihre Interaktionen mit Elementen im Shadow-DOM und prüfen Sie den entsprechenden Schritt.

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 Aufnahme, klicken Sie auf Exportieren, wählen Sie die neue Option aus und speichern Sie die .js-Datei.

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

Erweiterungen herunterladen

Sie können die Funktionen des Rekorders anpassen, z. B. mit benutzerdefinierten Exportoptionen. Sie können Erweiterungen für den Aufzeichnungstool abrufen, indem Sie in einer Aufnahme auf das Dreipunkt-Menü  > Exportieren > Erweiterungen abrufen klicken.

Du kannst der Liste der Aufzeichnungserweiterungen eigene Erweiterungen hinzufügen. Wir freuen uns, wenn du dabei bist!

Chromium-Probleme: 1417104, 1413168

Elemente > Stilaktualisierungen

CSS-Dokumentation

Wie oft suchen Sie täglich in der Dokumentation nach CSS-Eigenschaften? Im Bereich Elemente > Stile wird jetzt eine kurze Beschreibung angezeigt, wenn Sie den Mauszeiger auf eine Eigenschaft bewegen.

Die Kurzinfo enthält auch einen Link Weitere Informationen, über den Sie zu einer MDN-CSS-Referenz zu dieser Eigenschaft gelangen.

Wenn Sie mit CSS vertraut sind, finden Sie die Kurzinfos möglicherweise störend. Wenn Sie sie alle deaktivieren möchten, setzen Sie ein Häkchen bei Nicht anzeigen.

Wenn Sie sie wieder aktivieren möchten, setzen Sie ein Häkchen bei Einstellungen > Einstellungen > Elemente > Tooltip für CSS-Dokumentation anzeigen.

Chromium-Problem: 1401107.

Unterstützung für CSS-Verschachtelung

Im Bereich Elemente > Stile wird jetzt die CSS-Verschachtelungssyntax erkannt und verschachtelte Stile werden auf die richtigen Elemente angewendet.

Chromium-Problem: 1172985.

Logpunkte und bedingte Haltestellen 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 bedingte Haltepunkte mit einem orangefarbenen Fragezeichen ? auf
• Logpoint-Nachrichten mit zwei rosafarbenen Punkten ..

In der Konsole werden jetzt richtige Ankerlinks zu Haltestellen in Quelldateien angezeigt, anstelle von VM<number>-Scripts, die von Chrome erstellt werden, um JavaScript-Code in V8 auszuführen.

Klicken Sie auf den Link neben der Nachricht zum Endpunkt, um direkt zum Editor für Endpunkte zu gelangen.

Chromium-Problem: 1027458

Irrelevante Scripts beim Debuggen ignorieren

Damit Sie sich auf die wichtigsten Teile Ihres Codes konzentrieren können, können Sie irrelevante Scripts jetzt direkt über den Dateibaum im Bereich Quellen > Seite zur Ignorierliste hinzufügen.

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

Alle Scripts und Ordner, die in der Ignorierliste stehen, sind im Dateibaum ausgegraut.

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

Chromium-Problem: 883325.

Einstellung des JavaScript-Profilers gestartet

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 dieser DevTools-Version (112) beginnt die vierphasige Einstellung des JavaScript-Profilers. 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 und Feedback finden Sie 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 sehen, wie Ihre Website für Menschen mit eingeschränkter Kontrastwahrnehmung aussieht.

Beachten Sie, dass die Listenoptionen aktualisiert wurden, um Ihnen anzuzeigen, welche Farbunempfindlichkeit die Optionen darstellen.

Mit den Entwicklertools können Sie alle Kontrastprobleme gleichzeitig finden und beheben. Weitere Informationen finden Sie unter Website lesbarer machen.

Chromium-Probleme: 1412719, 1412721.

Lighthouse 10

Im Bereich Lighthouse wird jetzt Lighthouse 10.0.1 verwendet. Weitere Informationen finden Sie im Hilfeartikel Das ist neu in Lighthouse 10.0.1.

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

Lighthouse > > 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. In den DevTools wurde dieses Gerät zu Einstellungen > Geräte hinzugefügt.

Chromium-Problem: 772558.

Eine Konsolenwarnung, dass der Handler für den Abruf des No-Op-Dienstarbeiters entfernt werden muss

In Chrome 112 werden No-Op-Fetch-Handler (ohne Funktion) für Service Worker übersprungen, da sie 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.

Chromium-Problem: 1347319

Sonstige Highlights

Hier sind einige bemerkenswerte Fehlerkorrekturen in dieser Version:

• Im Bereich Quellen > Bruchstellen werden jetzt neben mehrdeutigen Dateinamen unterscheidende Dateipfade angezeigt (1403924).
• Im Abschnitt Haupt im Flammendiagramm des Bereichs Leistung wird CpuProfiler::StartProfiling jetzt als Profiler Overhead (1358602) bezeichnet.
• Verbesserte automatische Vervollständigung in den DevTools:
  • Quellen: Regelmäßige Ergänzungen eines beliebigen Wortes (1320204).
  • Console: Mit Arrow down wird der erste Vorschlag ausgewählt und Vorschläge erhalten Tab-Hinweise (1276960).
• In DevTools wurde ein Ereignislistener-Bruchpunkt hinzugefügt, mit dem Sie das Testen pausieren können, wenn Sie ein Dokumentfenster im Bild-im-Bild-Modus ö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 als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Zugriff auf die neuesten DevTools-Funktionen, ermöglichen den Test moderner Webplattform-APIs 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.

• Senden Sie uns Feedback und Funktionsanfragen unter crbug.com.
• Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf more_vert Weitere Optionen > Hilfe > Entwicklertools-Problem melden.
• Tweeten Sie an @ChromeDevTools.
• Hinterlasse Kommentare zu den neuen YouTube-Videos zu den Entwicklertools oder zu den YouTube-Videos mit den Entwicklertools-Tipps.

Neu in DevTools

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