Neues in den Entwicklertools: Chrome 129

Sofia Emelianova
Sofia Emelianova
GitHub

Rekorder unterstützt den Export nach Puppeteer für Firefox

Im Rahmen der WebDriver BiDi-Unterstützung kann der Bereich Rekorder jetzt Aufnahmen nach Puppeteer für Firefox exportieren. 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.

Die Vorher und nach dem Hinzufügen der Option "Puppeteer for Firefox" zum Exportmenü der Rekorder App.

Weitere Informationen

Verbesserungen im Bereich „Leistung“

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

Livemesswerte beobachten

Im Bereich Leistung sehen Sie jetzt Live-Beobachtungen zu Core Web Vitals, sowohl auf Ihrem lokalen Computer als auch auf Grundlage von Felddaten aus dem Chrome-UX-Bericht. So können Sie Leistungsprobleme erkennen, ohne Leistungs-Traces erfassen zu müssen. Außerdem können Sie nachvollziehen, wie repräsentativ Ihre Erfahrung im Vergleich zu denen 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 der aggregierten Nutzererfahrung aus dem Chrome-UX-Bericht vergleichen möchten, fügen Sie Felddaten hinzu. Klicken Sie dazu rechts im Abschnitt Felddaten auf Einrichten und dann im Dialogfeld auf OK. Bewegen Sie den Mauszeiger auf einen Messwert, um eine Kurzinfo mit weiteren Informationen zu sehen.

Live-Beobachtungen zu Messwerten 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. Dazu gehen Sie auf demselben Bildschirm rechts zum Bereich Aufzeichnungseinstellungen.

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.

Mit der Suche wurde eine Netzwerkanfrage gefunden.

Stacktraces von performance.mark- und performance.measure-Aufrufen ansehen

Auf dem Tab Zusammenfassung werden im Bereich Leistung jetzt Stacktraces von performance.mark- und performance.measure-Aufrufen angezeigt. Sie können diese Aufrufe verwenden, um das Leistungs-Trace mit Ihren benutzerdefinierten Daten zu erweitern.

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

Weitere Informationen finden Sie unter Passen Sie Ihre Leistungsdaten mit der Expandable API an.

Testadressdaten 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 das Steuerfeld Autofill, aktivieren Sie das 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 befinden sich im Drop-down-Menü Bestimmten Elementstatus erzwingen und gelten nur für die von Ihnen ausgewählten Elemente. Beispiel: <label> und <input> haben unterschiedliche Optionen.

Vorher und nach dem Hinzufügen der Funktion zum Erzwingen bestimmter Elementzustände.

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

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

Lighthouse 12.2.0

Im Steuerfeld Lighthouse wird jetzt Lighthouse 12.2.0 ausgeführt.

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

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

Chromium-Problem: 772558.

Verschiedene Highlights

Hier sind einige wichtige Fehlerkorrekturen und Verbesserungen in dieser Version:

  • Elemente:
    • Ein Fehler wurde behoben, bei dem die überladenen Längeneigenschaften 357020613 nicht korrekt gerendert wurden.
    • 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 hören jetzt die Schaltfläche Element anzeigen 357382536.
  • Leistung > Netzwerk: Über die Menüoption Im Netzwerk anzeigen wird jetzt der Tab Header der entsprechenden Netzwerkanfrage geöffnet.
  • Konsole:
    • Fehler der C/C++-Erweiterung erzwingen das Öffnen der Console 356320158 jetzt nicht.
    • Es wurde ein Fehler mit import.meta in einem JS-Modul bei der Nichtauswertung bei pausiertem 40743793 behoben.
  • 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 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

Verwende die folgenden Optionen, um die neuen Funktionen, Updates oder andere Aspekte der Entwicklertools zu besprechen.

Neu in den Entwicklertools

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