Neues in den Entwicklertools: Chrome 128

Sofia Emelianova
Sofia Emelianova
GitHub

Gemini-Statistiken in der Play Console sind jetzt in den meisten europäischen Ländern verfügbar

Diese Version bietet Unterstützung für Console Insights von Gemini in den meisten europäischen Ländern.

Liste der neu unterstützten europäischen Länder

Deutschland, Österreich, Belgien, Bulgarien, Schweiz, Zypern, Tschechien, Dänemark, Estland, Spanien, Finnland, Frankreich, Vereinigtes Königreich, Griechenland, Kroatien, Ungarn, Irland, Island, Italien, Liechtenstein, Litauen, Luxemburg, Lettland, Malta, Niederlande, Norwegen, Polen, Portugal, Rumänien, Schweden, Slowenien, Slowakei.

Wenn Sie in einem dieser Länder ansässig sind, können Sie Gemini jetzt direkt in der Konsole um Informationen bitten, um Fehler und Warnungen besser zu verstehen.

Ein Insight von Gemini zu einem Fehler in der Console.

Aktualisierungen des Bereichs „Leistung“

Dieses Update enthält einige Verbesserungen für den Tab Leistung.

Enhanced Network-Lernpfad

Der Netzwerk-Track im Bereich Leistung wurde verbessert. Er enthält jetzt wichtige Informationen wie eine detailliertere Dauer und einen Netzwerkinitiatorbaum. Außerdem wurden die visuellen Hinweise und Farben klarer gestaltet. Sie müssen also nicht mehr zwischen dem Bereich Netzwerk und dem Tab Leistung > Zusammenfassung wechseln. Außerdem haben wir den Wechsel zum Tab Netzwerk vereinfacht und beschleunigt.

Der Network-Track bietet jetzt folgende Möglichkeiten:

  • Zeigt eine Farblegende für Anfragetypen an.
  • Render-blockierende Anfragen werden mit roten Dreiecken in der oberen rechten Ecke gekennzeichnet.
  • Zeigt den Anforderungsinitiator bei Auswahl mit einem Pfeil an. So können Sie den Baum der Netzwerkinitiatoren nachvollziehen, der bisher nur im Bereich Netzwerk verfügbar war.
  • Wenn Sie den Mauszeiger darauf bewegen, wird jetzt eine überarbeitete Kurzinfo mit strukturierten Timing-Informationen angezeigt, einschließlich des Status „Render-blocking“ und etwaiger Prioritätsänderungen.
  • Auf dem Tab Zusammenfassung wird jetzt auch eine Aufschlüsselung der Zeitangaben in einer Spalte rechts angezeigt.

Der optimierte Netzwerk-Track mit einer Farblegende, Kurzinfos, Indikatoren für Render-Blocking und Zeitangaben auf dem Tab „Zusammenfassung“.

Außerdem können Sie jetzt mit der rechten Maustaste auf die Anfrage im Track oder auf die URL auf dem Tab Zusammenfassung klicken und im Drop-down-Menü Im Netzwerkbereich anzeigen auswählen. Sie werden in den Entwicklertools zum Netzwerkbereich weitergeleitet und die gesuchte Anfrage wird in der Tabelle hervorgehoben.

Das Kontextmenü für die Anfrage mit der Option „Im Netzwerkbereich anzeigen“.

Leistungsdaten mit der Extensibility API anpassen

In dieser Version werden Erweiterungsdaten im Bereich Leistung unterstützt. Sie können dem Leistungs-Trace jetzt benutzerdefinierte Tracks mit Ereignissen und Kurzinfo-Beschreibungen hinzufügen, Details auf dem Tab Zusammenfassung einfügen und vieles mehr. Diese Funktion kann für Entwickler von Frameworks, Bibliotheken und komplexen Anwendungen mit benutzerdefinierter Instrumentierung nützlich sein.

Ein Beispiel für einen benutzerdefinierten Track finden Sie auf dieser Demoseite. Aktivieren Sie unter Leistung > Aufnahmeeinstellungen das Kästchen  Erweiterungsdaten. Starten Sie eine Leistungsaufzeichnung, klicken Sie auf der Demoseite auf Add new Corgi (Neuen Corgi hinzufügen) und beenden Sie dann die Aufzeichnung. Auf dem Tab Zusammenfassung sehen Sie einen benutzerdefinierten Track im Trace, der Ereignisse mit benutzerdefinierten Tooltips und Details enthält.

Ein benutzerdefinierter Track im Bereich „Leistung“.

Kurz gesagt: Wenn Sie Leistungsdaten erweitern möchten, übergeben Sie eine bestimmte Struktur an die Parameter measureOption.detail oder markOption.detail der API-Aufrufe performance.measure() oder performance.mark().

Details im Timing-Track

Wenn Sie als Webentwickler den User Timing-Teil der Performance API verwenden, um Einträge zum Timings-Track hinzuzufügen, können Sie jetzt Ihre beliebigen Details auf dem Tab Zusammenfassung für mark- und measure-Ereignisse und deren Zeitstempel sehen.

Ein benutzerdefiniertes Ereignis auf dem Timing-Track mit einem Zeitstempel und Details.

Chromium-Problem: 345418915.

Alle aufgeführten Anfragen im Netzwerkbereich kopieren

Statt das gesamte Netzwerkprotokoll zu kopieren, können Sie im Bereich Network (Netzwerk) jetzt Filter anwenden und nur die aufgeführten Anfragen kopieren.

Kopieroptionen nur für aufgeführte Anfragen.

Schnellere Heap-Snapshots mit benannten HTML-Tags und weniger Unordnung

Heap-Snapshots im Bereich Arbeitsspeicher werden jetzt noch schneller erstellt. Objekte werden nach benannten HTML-Tags gruppiert, es werden weniger interne Objekte angezeigt, um die Semantik der JavaScript-Sprache besser abzubilden, und numerische Werte sind immer enthalten.

Objekte, die nach benannten HTML-Tags gruppiert sind.

Die Leistung der Einstellung Numerische Werte in die Erfassung einbeziehen wurde verbessert. Sie ist jetzt standardmäßig aktiviert und wurde aus dem Bereich Arbeitsspeicher entfernt.

Wenn Sie interne Objekte manuell in den Snapshot aufnehmen möchten, aktivieren Sie zuerst die Einstellungen > Tests > Option zum Einblenden interner Elemente in Heapsnapshots anzeigen und dann Interne Elemente einblenden (...) im Bereich Arbeitsspeicher.

Chromium-Probleme: 41490040, 343341610, 42203857.

Animationsbereich öffnen, um Animationen aufzunehmen und @keyframes live zu bearbeiten

Der Bereich Animationen bietet jetzt folgende Möglichkeiten:

  • Erfasst Animationen, die bereits laufen, wenn Sie den Bereich öffnen. Sie müssen die Seite also nicht aktualisieren, um Animationen zu erfassen.
  • Unterstützt die Live-Bearbeitung von @keyframes. Die erfasste Animation wird also aktualisiert, wenn Sie den Bereich @keyframes unter Elemente > Stile bearbeiten.

Im folgenden Video sehen Sie beide Funktionen in Aktion.

Chromium-Problem: 352718055.

Lighthouse 12.1.0

Im Bereich Lighthouse wird jetzt Lighthouse 12.1.0 ausgeführt.

Dieses Update bringt eine Reihe von Änderungen mit sich, darunter die Entfernung des alten Messwerts „Inhalte weitgehend gezeichnet“ (First Meaningful Paint, FMP) zugunsten von Largest Contentful Paint (LCP). Vollständige Liste der Änderungen

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

Chromium-Problem: 772558.

Bedienungshilfen

Diese Version bietet die folgenden Verbesserungen in Bezug auf die Barrierefreiheit:

  • Wenn Sie nach der automatischen Vervollständigung im Bearbeitungsfeld für Live-Ausdrücke die Tabulatortaste drücken, wird der Fokus auf den nächsten Fokuspunkt verschoben. Bisher wurde der Text eingerückt.
  • Wenn Sie auf einen Resizer klicken, wird er fokussiert. Sie können ihn dann mit den Pfeiltasten nach rechts und links verschieben.
  • Ein Screenreader gibt jetzt das Bearbeitungsfeld Überwachungsausdruck hinzufügen unter Quellen an. Überwachungsausdruck löschen ist jetzt bei der Navigation mit der Tastatur deutlich sichtbar.

Chromium-Probleme: 349939551, 343942719, 349334243, 349428374.

Sonstige Highlights

Hier sind einige wichtige Fehlerbehebungen und Verbesserungen in dieser Version:

  • Leistung:
    • Network-Track: WebSocket-Verbindungsereignisse hinzugefügt 331351979.
    • Im Bereich Leistung wird jetzt korrekt auf die aktivste Hauptthread-Aktivität 345599356 gezoomt.
    • Es wurde ein Fehler beim Hochladen falscher Arten von Tracedateien behoben. Jetzt kann nur noch der richtige Typ .json oder .gz hochgeladen werden. 349864878
  • Elemente > Stile:
    • Das Drop-down-Menü für Einheiten in Längen-Property-Werten ist jetzt eingestellt. 41495618
    • Das Auflösen aktiver Properties für verschachtelte @-Regeln wurde korrigiert. 346732737
    • Inaktive @position-try-Abschnitte sind jetzt ausgegraut 40246493.
  • Anwendung:
    • Cookies: Ein Fehler wurde behoben, durch den Cookies beim Klicken auf Aktualisieren nicht aktualisiert wurden 348683488.
    • Lokaler Speicher: Sie können jetzt alphabetisch nach Schlüsseln sortieren 341129585.

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.