Neu in den Entwicklertools (Chrome 112)

Sofia Emelianova
Sofia Emelianova

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 Kästchen. Pierce an. Zeichnen Sie Ihre Interaktion mit Elementen im Shadow DOM auf und prüfen Sie den entsprechenden Schritt.

Den Rekorder so einstellen, dass er Pierce-Selektoren verwendet Pierce-Selektor 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. 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, mit denen du deine Rekorder App individuell anpassen kannst, z. B. mit benutzerdefinierten Exportoptionen. Rufen Sie Erweiterungen für den Rekorder ab, indem Sie auf Exportieren. Exportieren > klicken. Erweiterungen in einer Aufzeichnung verwenden

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.

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

Um sie wieder zu aktivieren, gehen Sie zu Einstellungen. Einstellungen > Einstellungen > Elemente > Kästchen. 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:

Ä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 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.

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. Einstellungen > Ignorierliste: Sie können ignorierte Quellen auch mit Dreipunkt-Menü. ausblenden. Quellen auf der Ignorieren-Liste ausblenden Experimentell..

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.

Banner zur Einstellung oben im Profiler.

Verwenden Sie anstelle des Profiler den Bereich Profiler, 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 „Sehschwäche emulieren“ ausgewählt ist Funktionalität.

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.

Leuchtturm > Einstellungen. > Leeres Kästchen. 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. Einstellungen > hinzugefügt Geräte:

Moto G Power in der Geräteliste.

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.

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:

  • 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: <ph type="x-smartling-placeholder">
      </ph>
    • 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.
  • Problem mit den Entwicklertools über Weitere Optionen melden Mehr > 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