Neues in den Entwicklertools: Chrome 129

Sofia Emelianova
Sofia Emelianova
GitHub

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

Im Rahmen der Unterstützung von WebDriver BiDi können Aufzeichnungen im Rekorder-Bereich jetzt nach Puppeteer für Firefox exportiert werden. Dank der Unterstützung von Firefox durch Puppeteer können Sie jetzt Nutzerabläufe mit dem Rekorder-Bereich der Chrome-Entwicklertools aufzeichnen, exportieren und sowohl in Firefox als auch in Chrome ausführen.

Die Ansicht vor und nach dem Hinzufügen der Option „Puppeteer für Firefox“ zum Exportmenü des Recorders.

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 für den Bereich Leistung.

Beobachtungen zu Live-Messwerten

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

Wenn Sie Live-Beobachtungen zu LCP und CLS sehen möchten, öffnen Sie den Bereich Leistung. Um den INP zu sehen, müssen Sie auf einer Seite interagieren. Wenn Sie Ihre lokalen Messwerte mit der aggregierten Nutzererfahrung 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-Beobachtungen zu Messwerten im Bereich „Leistung“

Im Bereich Leistung werden Messwerte hervorgehoben, die verbessert werden können. Außerdem finden Sie dort Informationen und Vorschläge dazu, wie Sie Ihre lokale Erfahrung an die Ihrer Nutzer anpassen können. Möglicherweise möchten Sie die CPU- oder Netzwerkgeschwindigkeit drosseln. Das können Sie auf demselben Bildschirm rechts im Bereich Aufnahmeeinstellungen tun.

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

Eine Netzwerkanfrage, die bei der Suche gefunden wurde.

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. Mit diesen Aufrufen können Sie den Leistungs-Trace mit Ihren benutzerdefinierten Daten erweitern.

Die Vorher- und Nachher-Ansicht mit Stack-Traces für performance.mark- und performance. measure-Aufrufe.

Weitere Informationen finden Sie unter Leistungsdaten mit der Extensibility API anpassen.

Testadressdaten im Autofill-Bereich verwenden

Im Bereich Autofill sind jetzt Testdaten für Adressformulare verfügbar. So können Sie die Adressformulare auf Ihrer Website einfacher 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 Feld Autofill, aktivieren Sie 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 Testdaten für Autofill.

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 stehen jetzt weitere Pseudoklassen zur Verfügung, die Sie erzwingen können. Die neuen Optionen befinden sich im Drop-down-Menü Bestimmtes Element erzwingen und sind für bestimmte Elemente verfügbar, die Sie auswählen. <label> und <input> haben beispielsweise unterschiedliche Optionen.

Vor und nach dem Hinzufügen der Möglichkeit, bestimmte Elementstatus zu erzwingen.

Chromium-Problem: 40280012.

„Elemente“ > „Stile“: Automatische Vervollständigung von mehr Rastereigenschaften

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

Die Autocomplete-Optionen vor und nach dem Hinzufügen beim Bearbeiten von Namen für Rasterlinien.

Weitere Informationen finden Sie unter CSS-Grid-Layouts untersuchen , 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

Die Grundlagen zur Verwendung des Lighthouse-Bereichs in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558.

Sonstige Highlights

Hier sind einige wichtige Fehlerbehebungen und Verbesserungen in dieser Version:

  • Elemente:
    • Ein Fehler wurde behoben, der zu einer falschen Darstellung von überlasteten Längenattributen geführt hat 357020613.
    • position-try-options wurde gemäß der Spezifikation in position-try-fallbacks umbenannt.
    • Durch eine Seitenaktualisierung wird der ausgewählte Knoten jetzt auch in einem iFrame wiederhergestellt. 40719145
    • Bedienungshilfen: Screenreader geben jetzt die Schaltfläche Element anzeigen 357382536 aus.
  • Leistung > Netzwerk: Mit der Menüoption Im Netzwerk anzeigen wird jetzt der Tab Header der entsprechenden Netzwerkanfrage geöffnet.
  • Console:
    • Fehler aus der C/C++-Erweiterung führen jetzt nicht mehr dazu, dass die Konsole zwangsweise geöffnet wird 356320158.
    • Ein Fehler mit import.meta in einem JS-Modul wurde behoben, der dazu führte, dass die Auswertung bei Pausierung nicht erfolgte 40743793.
  • Arbeitsspeicher: Ein Fehler wurde behoben, durch den die Option „Ignorierte Retainer wiederherstellen“ nicht angezeigt wurde, nachdem ein Retainer ignoriert wurde 327337527.

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.