Neues in den Entwicklertools: Chrome 128

Sofia Emelianova
Sofia Emelianova
GitHub

Konsolenstatistiken von Gemini werden in den meisten europäischen Ländern eingeführt

Mit dieser Version werden Console Insights von Gemini in den meisten europäischen Ländern unterstützt.

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 sich in einem dieser Länder befinden, können Sie Gemini jetzt direkt in der Console um Statistiken bitten, damit Sie Fehler und Warnungen besser nachvollziehen können.

Eine Information von Gemini zu einem Fehler in der Console.

Aktualisierungen des Bereichs „Leistung“

Mit diesem Update wurden einige Verbesserungen am Bereich Leistung vorgenommen.

Enhanced Network-Track

Der Netzwerk-Track im Bereich Leistung wurde optimiert, um wichtige Informationen direkt zu sehen, z. B. eine detailliertere Dauer und einen Netzwerkinitiator-Baum. Außerdem sind die visuellen Hinweise und Farben jetzt übersichtlicher. Sie müssen also nicht mehr zwischen dem Bereich Netzwerk und dem Tab Leistung > Zusammenfassung wechseln. Wenn Sie noch zum Bereich Netzwerk wechseln müssen, haben wir diesen Vorgang für Sie vereinfacht und beschleunigt.

Der Netzwerk-Track führt jetzt Folgendes aus:

  • Eine Farblegende für Anfragetypen.
  • Renderblockierende Anfragen werden oben rechts mit roten Dreiecken gekennzeichnet.
  • Der Initiator der Anfrage wird bei Auswahl mit einem Pfeil angezeigt. So können Sie den Netzwerkinitiator-Baum besser nachvollziehen, der zuvor nur im Bereich Netzwerk verfügbar war.
  • Beim Bewegen des Mauszeigers wird jetzt in einer überarbeiteten Kurzinfo strukturierte Timing-Informationen angezeigt, einschließlich des Status des Renderblocks und gegebenenfalls Änderungen der Priorität.
  • Auf dem Tab Zusammenfassung wird jetzt rechts in einer Spalte auch eine Aufschlüsselung der Zeitangaben angezeigt.

Der erweiterte Netzwerk-Track mit einer Farblegende, Kurzinfos, Indikatoren für die Renderblockierung und Zeitangaben auf dem Tab „Zusammenfassung“.

Außerdem können Sie jetzt auf dem Tab Zusammenfassung mit der rechten Maustaste auf die Anfrage im Track oder auf die URL klicken und im Drop-down-Menü Im Netzwerkbereich anzeigen auswählen. In den Entwicklertools werden Sie zum Bereich Netzwerk weitergeleitet. Die gewünschte 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 wird im Bereich Leistung die Unterstützung für Erweiterungsdaten eingeführt. Sie können der Leistungsaufzeichnung jetzt unter anderem benutzerdefinierte Tracks mit Ereignissen und Kurzinfobeschreibungen sowie Details auf dem Tab Zusammenfassung hinzufügen. 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 findest du 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 die Aufzeichnung. Im Trace wird ein benutzerdefinierter Track mit Ereignissen mit benutzerdefinierten Kurzinfos und Details auf dem Tab Zusammenfassung angezeigt.

Eine benutzerdefinierte Spur im Bereich „Leistung“

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

Details im Timing-Track

Wenn Sie als Webentwickler den Teil „Nutzerzeitmessung“ der Performance API verwenden, um dem Timings-Track Einträge hinzuzufügen, können Sie jetzt auf dem Tab Zusammenfassung beliebige Details zu mark- und measure-Ereignissen und deren Zeitstempeln sehen.

Ein benutzerdefiniertes Ereignis im Zeitachsen-Track mit einem Zeitstempel und Details.

Chromium-Problem: 345418915.

Alle aufgeführten Anfragen im Netzwerkbereich kopieren

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

Optionen nur für aufgeführte Anfragen kopieren

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

Heap-Snapshots im Bereich Arbeitsspeicher sind jetzt noch schneller, Objekte werden nach benannten HTML-Tags gruppiert, sie entsprechen besser der JavaScript-Sprachsemantik, da weniger interne Objekte angezeigt werden, und sie enthalten immer numerische Werte.

Objekte, die nach benannten HTML-Tags gruppiert sind.

Die Leistung der Einstellung Numerische Werte in die Aufzeichnung aufnehmen wurde verbessert, sie ist jetzt standardmäßig aktiviert und wurde aus dem Bereich Speicher entfernt.

Wenn Sie interne Objekte manuell in den Snapshot aufnehmen möchten, aktivieren Sie zuerst Einstellungen > Experimente > Option zum Anzeigen von internen Daten in Heap-Snapshots anzeigen und dann im Bereich Speicher das Interne Daten anzeigen (...).

Chromium-Probleme: 41490040, 343341610, 42203857.

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

Der Bereich Animationen bietet jetzt folgende Funktionen:

  • Hiermit werden Animationen erfasst, 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. Mit anderen Worten: Die aufgezeichnete Animation wird aktualisiert, während 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 des Messwerts „Largest Contentful Paint“ (LCP). 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

Bedienungshilfen

Diese Version enthält folgende Verbesserungen der Barrierefreiheit:

  • Wenn du nach der automatischen Vervollständigung im Bearbeitungsfeld von Live-Ausdrücken die Tabulatortaste drückst, wird der Fokus auf den nächsten Fokuspunkt verschoben. Bisher wurde der Text eingerückt.
  • Wenn Sie auf ein Tool zum Ändern der Größe klicken, wird es fokussiert und Sie können es mit den Pfeiltasten nach rechts und links verschieben.
  • Ein Screenreader liest jetzt das Bearbeitungsfeld Beobachtungsexpression hinzufügen unter Quellen vor. Außerdem ist Beobachtungsexpression löschen jetzt gut sichtbar, wenn Sie mit der Tastatur navigieren.

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

Sonstige Highlights

Hier sind einige wichtige Fehlerkorrekturen und Verbesserungen in dieser Version:

  • Leistung:
    • Netzwerk-Track: Es wurden WebSocket-Verbindungsereignisse 331351979 hinzugefügt.
    • Im Bereich Leistung wird jetzt die geschäftigste Hauptthread-Aktivität 345599356 korrekt herangezoomt.
    • Ein Fehler beim Hochladen falscher Tracefile-Typen wurde behoben. Es wird jetzt verhindert, dass andere Dateitypen als die korrekten .json- oder .gz-Dateien 349864878 hochgeladen werden.
  • Elemente > Stile:
    • Das Drop-down-Menü für Einheiten in den Werten der Längeneigenschaft ist jetzt eingestellt 41495618.
    • Behebung eines Problems beim Auflösen aktiver Properties für verschachtelte At-Rules 346732737
    • Inaktive @position-try-Bereiche sind jetzt ausgegraut 40246493.
  • Anwendung:
    • Cookies: Es wurde ein Fehler behoben, durch den Cookies nicht aktualisiert wurden, wenn auf Aktualisieren geklickt wurde 348683488.
    • Lokaler Speicher: Sie können jetzt nach Schlüsseln alphabetisch sortieren 341129585.

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.