Neues in den Entwicklertools: Chrome 129

Sofia Emelianova
Sofia Emelianova

Der Rekorder unterstützt den Export in Puppeteer für Firefox

Im Rahmen der WebDriver-BiDi-Unterstützung können Aufzeichnungen jetzt über das Steuerfeld Rekorder in Puppeteer für Firefox exportiert werden. Dank der Unterstützung von Firefox durch Puppeteer können Sie jetzt Nutzerflüsse über den Bereich Aufzeichnung in den Chrome-Entwicklertools aufzeichnen, exportieren und sowohl in Firefox als auch in Chrome ausführen.

Das Exportmenü des Rekorders vor und nach dem Hinzufügen der Option „Puppeteer für Firefox“

Weitere Informationen finden Sie unter WebDriver BiDi – Die Zukunft der browserübergreifenden Automatisierung.

Verbesserungen am Bereich „Leistung“

Diese Version enthält eine Reihe von Verbesserungen am Bereich Leistung.

Beobachtungen zu Live-Messwerten

Im Bereich Leistung sehen Sie jetzt Live-Messwerte zu Core Web Vitals, sowohl auf Ihrem lokalen Computer als auch auf Grundlage von Felddaten aus dem Chrome UX Report. So können Sie Leistungsprobleme erkennen, ohne Leistungsaufzeichnungen erfassen zu müssen, und nachvollziehen, wie repräsentativ Ihre Erfahrung im Vergleich zu der Ihrer Nutzer ist.

Wenn Sie Live-Messwerte zu LCP und CLS sehen möchten, öffnen Sie den Bereich Leistung. Um den INP zu sehen, müssen Sie mit einer Seite interagieren. Wenn Sie Ihre lokalen Messwerte mit den aggregierten Nutzererfahrungsdaten aus dem Chrome UX Report vergleichen möchten, fügen Sie Felddaten hinzu. Klicken Sie dazu rechts im Bereich Felddaten auf Einrichten und dann im Dialogfeld auf Ok. Bewegen Sie den Mauszeiger auf einen Messwert, um eine Kurzinfo mit weiteren Informationen aufzurufen.

Live-Messwerte im Bereich „Leistung“

Im Bereich Leistung werden Messwerte hervorgehoben, die verbessert werden können. Außerdem finden Sie dort Statistiken und Vorschläge dazu, wie Sie die lokale Version Ihrer Website an die Anforderungen Ihrer Nutzer anpassen können. Sie können beispielsweise die CPU oder das Netzwerk drosseln. Das geht auf demselben Bildschirm im Bereich Aufzeichnungseinstellungen rechts.

Das Feld Suchen im Bereich Leistung funktioniert jetzt auch für den Netzwerk-Track. Sie können also Anfragen mit der Tastenkombination Strg / Befehlstaste + F suchen.

Eine Netzwerkanfrage, die bei der Suche gefunden wurde.

Stack-Traces von performance.mark- und performance.measure-Aufrufen ansehen

Auf dem Tab Zusammenfassung sehen Sie im Bereich Leistung jetzt Stack-Traces von performance.mark- und performance.measure-Aufrufen. Mit diesen Aufrufen können Sie die Leistungsaufzeichnung um Ihre benutzerdefinierten Daten erweitern.

Die Vorher-Nachher-Anzeige zeigt Stack-Traces für „performance.mark“- und „performance. measure“-Aufrufe.

Weitere Informationen finden Sie unter Tabellen und Diagramme mit der Erweiterungs-API anpassen.

Testadressen im Autofill-Steuerfeld verwenden

Im Bereich Autofill finden Sie jetzt Testdaten für Adressformulare. So können Sie die Adressformulare auf Ihrer Website leichter testen, wenn Sie keine Adressen in Chrome gespeichert haben oder ein Gastprofil verwenden.

Wenn Sie Adressformulare mit Testdaten automatisch ausfüllen möchten, öffnen Sie den Bereich Autofill, aktivieren Sie das Kästchen Testadressen im Autofill-Menü anzeigen, klicken Sie mit der rechten Maustaste auf ein Adressformular auf Ihrer Seite und wählen Sie eine der Optionen aus dem Menü Entwicklertools aus.

Das Drop-down-Menü eines Adressformularfelds vor und nach dem Hinzufügen von Autofill-Testdaten

Verbesserungen am Bereich „Elemente“

Diese Version enthält einige Verbesserungen am Bereich Elemente.

Mehr Status für bestimmte Elemente erzwingen

Im Bereich :hov unter Elemente > Stile finden Sie jetzt weitere Pseudoklassen, die Sie erzwingen können. Die neuen Optionen finden Sie im Drop-down-Menü für den Status Bestimmtes Element erzwingen. Sie sind für bestimmte ausgewählte Elemente spezifisch. Beispiel: <label> und <input> haben unterschiedliche Optionen.

Bei „Vor“ und „Nach“ können jetzt bestimmte Elementstatus erzwungen werden.

Chromium-Problem: 40280012.

Unter „Elemente“ > „Stile“ werden jetzt mehr Rastereigenschaften automatisch vervollständigt

Auf dem Tab Elemente > Stile gibt es jetzt Optionen für die automatische Vervollständigung, wenn Sie Rasterbereiche und Liniennamen bearbeiten.

Die Optionen für die automatische Vervollständigung vor und nach dem Hinzufügen von Optionen beim Bearbeiten von Rasterliniennamen.

Weitere Informationen finden Sie unter CSS-Rasterlayouts prüfen , insbesondere im Abschnitt Liniennamen anzeigen.

Lighthouse 12.2.0

Im Bereich Lighthouse wird jetzt Lighthouse 12.2.0 ausgeführt.

Dieses Update enthält eine Reihe von Fehlerkorrekturen. Vollständige Liste der Änderungen

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

Chromium-Problem: 772558

Sonstige Highlights

Hier sind einige wichtige Fehlerkorrekturen und Verbesserungen in dieser Version:

  • Elemente:
    • Ein Fehler beim falschen Rendern von überladenen Längeneigenschaften 357020613 wurde behoben.
    • position-try-options wurde gemäß Spezifikation in position-try-fallbacks umbenannt.
    • Durch das Aktualisieren der Seite wird der ausgewählte Knoten jetzt auch in einem iFrame 40719145 wiederhergestellt.
    • Bedienungshilfen: Screenreader sprechen jetzt die Schaltfläche Element anzeigen 357382536 an.
  • Leistung > Netzwerk: Über die Menüoption Im Netzwerk anzeigen wird jetzt der Tab Header der relevanten Netzwerkanfrage geöffnet.
  • Konsole:
    • Fehler in der C/C++-Erweiterung öffnen die Konsole nicht mehr erzwungen 356320158.
    • Ein Fehler wurde behoben, bei dem import.meta in einem JS-Modul nicht ausgewertet wurde, wenn es pausiert wurde 40743793.
  • Speicher: Ein Fehler wurde behoben, durch den die Option „Ignorierte Retainer wiederherstellen“ nicht angezeigt wurde, nachdem ein 327337527 ignoriert wurde.

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.