Neues in den Entwicklertools: Chrome 128

Sofia Emelianova
Sofia Emelianova
GitHub

Console Insights von Gemini sind jetzt in den meisten europäischen Ländern verfügbar

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 bitten, Statistiken abzurufen, damit Sie Fehler und Warnungen besser verstehen.

Eine Information von Gemini zu einem Fehler in der Console.

Updates im Bereich „Leistung“

Mit diesem Update wurden im Bereich Leistung einige Verbesserungen 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 wurden die visuellen Hinweise und Farben klarer gestaltet. 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, ist das jetzt einfacher und schneller.

Der Netzwerk-Track führt jetzt Folgendes aus:

  • Zeigt eine Farblegende für Anfragetypen an.
  • Renderblockierende Anfragen werden oben rechts mit roten Dreiecken gekennzeichnet.
  • Der Initiator der Anfrage wird bei Auswahl mit einem Pfeil angezeigt. So erhalten Sie einen besseren Überblick über die Struktur der Netzwerkinitiatoren, die zuvor nur im Bereich Netzwerk verfügbar war.
  • Wenn der Mauszeiger auf den Mauszeiger bewegt wird, zeigt eine überarbeitete Kurzinfo jetzt strukturierte Zeitinformationen an, darunter Status zum Blockieren des Renderings und gegebenenfalls Änderungen der Priorität.
  • Auf dem Tab Zusammenfassung wird jetzt in einer Spalte auf der rechten Seite jetzt 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 dessen URL klicken und im Drop-down-Menü die Option Im Netzwerkbereich anzeigen auswählen. Mit den Entwicklertools wird der Bereich Network (Netzwerk) aufgerufen und die gesuchte Anfrage in der Tabelle hervorgehoben.

Das Kontextmenü für die Anfrage mit der Option „Im Netzwerk anzeigen“-Feld.

Leistungsdaten mit der Extensibility API anpassen

Ab dieser Version werden Erweiterungsdaten im Bereich Leistung unterstützt. Sie können jetzt benutzerdefinierte Tracks mit Ereignissen und Kurzinfo-Beschreibungen zum Leistungs-Trace, Details auf dem Tab Zusammenfassung und mehr 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 angezeigt, der Ereignisse mit benutzerdefinierten Kurzinfos und Details auf dem Tab Zusammenfassung enthält.

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

Webentwickler, die den Nutzertiming-Teil der Performance API verwenden, um dem Track Timings Einträge hinzuzufügen, können jetzt beliebige Details auf dem Tab Zusammenfassung für mark- und measure-Ereignisse und deren Zeitstempel sehen.

Ein benutzerdefiniertes Ereignis im Timing-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.

Kopieroptionen nur für aufgelistete Anfragen.

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

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

Objekte, die nach benannten HTML-Tags gruppiert sind.

Die Einstellung Numerische Werte in die Aufnahme einschließen wurde beschleunigt, standardmäßig aktiviert und aus dem Bereich Arbeitsspeicher 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

Im Bereich Animationen haben Sie jetzt folgende Möglichkeiten:

  • 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 umfasst eine Reihe von Änderungen, einschließlich der Entfernung des alten FMP-Messwerts (First Meaningful Paint) zugunsten von Largest Contentful Paint (LCP). Eine vollständige Liste der Änderungen finden Sie hier.

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 Sie nach der automatischen Vervollständigung im Bearbeitungsfeld von Live-Ausdrücken die Tabulatortaste drücken, wird der Fokus auf den nächsten Fokuspunkt verschoben. Bisher wurde der Text eingerückt.
  • Wenn Sie auf eine Größenanpassung klicken, wird der Fokus darauf gelegt, sodass Sie ihn mit den Rechts- und Linkspfeiltasten verschieben können.
  • Ein Screenreader kündigt jetzt bei der Navigation mit einer Tastatur das Bearbeitungsfeld Beobachtungsausdruck hinzufügen in Quellen an. Beobachtungsausdruck löschen ist jetzt deutlich sichtbar.

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

Sonstige Highlights

Im Folgenden sind einige bemerkenswerte Fehlerbehebungen und Verbesserungen in dieser Version aufgeführt:

  • Leistung:
    • Netzwerk-Track: Es wurden WebSocket-Verbindungsereignisse 331351979 hinzugefügt.
    • Im Steuerfeld Leistung wird jetzt die aktivste Hauptthread-Aktivität 345599356 korrekt herangezoomt.
    • Ein Fehler beim Hochladen falscher Trace-Dateitypen wurde behoben. Ab sofort werden nur noch die korrekten 349864878-Typen .json oder .gz hochgeladen.
  • 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 40246493 ausgegraut.
  • Anwendung:
    • Cookies: Es wurde ein Fehler behoben, durch den Cookies nach einem Klick auf Aktualisieren 348683488 nicht aktualisiert wurden.
    • Lokaler Speicher: Sie können jetzt alphabetisch nach Schlüsseln sortieren: 341129585.

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. 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 DevTools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools