Neu in den Entwicklertools (Chrome 112)

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.

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.

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.

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

Erweiterungen herunterladen

Hier findest du Optionen zum Anpassen der Rekorder App, z. B. mit benutzerdefinierten Exportoptionen. Rufen Sie Erweiterungen für den Rekorder ab, indem Sie auf Exportieren > klicken. Erweiterungen in einer Aufzeichnung verwenden

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.

Elemente > Aktualisierungen von Stilen

CSS-Dokumentation

Wie oft am Tag rufen Sie Dokumentationen zu Preisvergleichsportal-Properties auf? Die Elemente > Im Bereich Stile wird jetzt eine kurze Beschreibung angezeigt, wenn Sie den Mauszeiger auf eine Eigenschaft bewegen.

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.

Um sie wieder zu aktivieren, gehen Sie zu Einstellungen > Einstellungen > Elemente > Kurzinfo zur CSS-Dokumentation anzeigen.

Chromium-Problem: 1401107.

Unterstützung von CSS-Verschachtelungen

Die Elemente > Der Bereich Styles erkennt jetzt die CSS-Verschachtelung-Syntax und wendet verschachtelte Styles 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 ..

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.

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 unter Quellen Irrelevante Skripts zur Ignorieren-Liste hinzufügen. Seite.

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.

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

Wenn Sie ein ignoriertes Skript auswählen, gelangen Sie über die Schaltfläche Konfigurieren zu Einstellungen > Ignorierliste: Sie können ignorierte Quellen auch mit ausblenden. 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.

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 Websites lesbar machen.

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.

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

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

Chromium-Problem: 772558.

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.

Chromium-Problem: 1347319.

Verschiedene Highlights

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

• Das Feld Quellen > Im Bereich Haltepunkte werden jetzt neben mehrdeutigen Dateinamen differenzierende Dateipfade angezeigt (1403924).
• 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 erhalten Sie Zugriff auf die neuesten Entwicklertools, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, bevor Ihre 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.
• Problem mit den Entwicklertools über Weitere Optionen melden > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
• 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.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools