Neu in den Entwicklertools (Chrome 112)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Updates für den Rekorder

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

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

Beispielerweiterung ausprobieren Wähle die neue Option „Benutzerdefinierte Wiederholung“ aus, um die Benutzeroberfläche für die benutzerdefinierte Wiederholung zu öffnen.

Benutzerdefinierte Benutzeroberfläche für die Wiederholung

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 Durchlauf-Auswahlen 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 eine neue Aufnahme auf einer Seite mit Shadow-DOM und setzen Sie ein Häkchen bei Kästchen. Pierce unter Aufzuzeichnende Selectortypen. Erfassen Sie Ihre Interaktionen mit Elementen im Shadow-DOM und prüfen Sie den entsprechenden Schritt.

Den Rekorder so einstellen, dass er Durchstoßauswahlen verwendet; Durchstoßauswahl in Aktion

Chromium-Problem: 1411188.

Als Puppeteer-Script mit Lighthouse-Analyse exportieren

In der Rekorder App gibt es 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. Exportieren, wählen Sie die neue Option aus und speichern Sie die .js-Datei.

Puppeteer exportieren (einschließlich Lighthouse-Analyse)

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

Der Lighthouse-Bericht wird in Chrome geöffnet.

Erweiterungen abrufen

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. > Exportieren > Erweiterungen abrufen klicken.

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

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 Property bewegen.

Die Kurzinfo mit der Dokumentation zu einer CSS-Property.

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 Kästchen. Nicht anzeigen.

Wenn Sie sie wieder aktivieren möchten, setzen Sie ein Häkchen bei Einstellungen. Einstellungen > Einstellungen > Elemente > Kästchen. 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

Die erweiterte Benutzerfreundlichkeit von Unterbrechungen wurde weiter verbessert. In der Console werden jetzt Nachrichten, die durch Unterbrechungen ausgelöst werden, gekennzeichnet:

Änderungen an der Darstellung von durch Haltestellen ausgelösten Meldungen in der Console: Es werden jetzt Symbole und der richtige Quelllink angezeigt.

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.

Der Ankerlink neben einer Protokollpunktnachricht, über den der Haltepunkt-Editor geöffnet wird.

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 zum Ignorieren 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 Scripts, die der Liste hinzugefügt wurden, und lässt sie im Aufrufstapel aus.

Kontextmenüs eines Ordners und Scripts mit Optionen zum Ignorieren

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

Scripts und Ordner auf der Ignorierliste sind ausgegraut. Sie können sie über eine experimentelle Option im Drop-down-Menü „Weitere Optionen“ ausblenden.

Wenn Sie ein ignoriertes Script auswählen, gelangen Sie über die Schaltfläche Konfigurieren zu Einstellungen. Einstellungen > Ignorierliste. Sie können ignorierte Quellen auch über Dreipunkt-Menü > Quellen auf der Ignorieren-Liste ausblenden Experimentell. 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.

Banner zur Einstellung oben im Profiler

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

Weitere Informationen und Feedback finden Sie im entsprechenden RFC und unter crbug.com/1354548.

Chromium-Problem: 1417647

Weniger Kontrast emulieren

Auf dem Tab Rendering wurde der Liste Sehbehinderungen simulieren die Option Reduzierter Kontrast hinzugefügt. Mit dieser Option können Sie sehen, wie Ihre Website für Personen mit eingeschränkter Kontrastwahrnehmung aussieht.

Die Option „Weniger Kontrast“, die unter „Sehbehinderungen simulieren“ ausgewählt wurde.

Die Listenoptionen wurden aktualisiert, damit Sie sehen können, welche Farbunverträglichkeit die Optionen darstellen.

Mit den Entwicklertools können Sie alle Kontrastprobleme gleichzeitig finden und beheben. Weitere Informationen finden Sie unter Lesbarkeit Ihrer Website verbessern.

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.

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

Lighthouse > Einstellungen. > Leeres Kästchen Alte Navigation ist jetzt standardmäßig deaktiviert. Bei dieser Option wird die alte Lighthouse-Konfiguration im Navigationsmodus verwendet.

Die alte Navigation wurde deaktiviert.

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

Moto G Power in der Geräteliste

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.

In der Console wird jetzt eine Warnung angezeigt, wenn auf Ihrer Website ein No-Op-Abruf-Handler gefunden wird. Wir empfehlen Ihnen, ihn zu entfernen.

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

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 die Ausführung 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 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.