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

In 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, Schweiz, Belgien, Bulgarien, 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, Tschechien, Zypern.

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 Statistik von Gemini für einen Fehler in der Console.

Updates im Bereich „Leistung“

Mit diesem Update wurden im Bereich Leistung einige Verbesserungen vorgenommen.

Erweitertes Netzwerk-Track

Der Track Netzwerk im Bereich Leistung wurde optimiert, sodass wichtige Informationen jetzt sofort angezeigt werden. Sie müssen also nicht zwischen dem Bereich Netzwerk und dem Bereich Leistung wechseln. Zusammenfassung sowie zur besseren Verständlichkeit der visuellen Hinweise und Farben. Außerdem haben wir den Wechsel zum Bereich Netzwerk vereinfacht und beschleunigt.

Im Track Network sieht jetzt Folgendes aus:

  • Zeigt eine Farblegende für Anfragetypen an.
  • Das Rendering von blockierenden Anfragen wird durch rote Dreiecke in der oberen rechten Ecke gekennzeichnet. Bei Auswahl wird der Anfrageinitiator mit einem Pfeil angezeigt.
  • Wenn der Mauszeiger darauf bewegt wird, zeigt eine überarbeitete Kurzinfo jetzt strukturierte Zeitinformationen an, einschließlich Änderungen an Priorität und Rendering-Blockierung, falls vorhanden.
  • 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, Anzeigen, die das Rendering blockieren, 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. In den Entwicklertools wird der Bereich Network (Netzwerk) aufgerufen, in dem die gesuchte Anfrage in der Tabelle hervorgehoben wird.

Das Kontextmenü für die Anfrage mit dem Steuerfeld "Im Netzwerk anzeigen" Option.

Leistungsdaten mit der Extensible 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. Gehen Sie unter Leistung > Aktivieren Sie unter Erfassungseinstellungen das check_box Erweiterungsdaten. Starten Sie eine Aufführung, klicken Sie auf der Demoseite auf 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.

Ein benutzerdefinierter Track im Bereich „Leistung“

Kurz gesagt: Um Leistungsdaten zu erweitern, übergeben Sie eine bestimmte Struktur an die measureOption.detail- oder markOption.detail-Parameter von performance.measure()- oder performance.mark()-API-Aufrufen.

Details im Track „Timings“

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 Bereich „Netzwerk“ 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 check_box Numerische Werte in die Aufnahme einschließen wurde beschleunigt, standardmäßig aktiviert und aus dem Bereich Arbeitsspeicher entfernt.

Um interne Objekte manuell in den Snapshot aufzunehmen, aktivieren Sie zuerst settings Settings > Tests > check_box Option zum Freigeben interner Daten in Heap-Snapshots anzeigen und dann check_box Internen Daten freigeben (...) im Steuerfeld Arbeitsspeicher.

Chromium-Probleme: 41490040, 343341610, 42203857.

Bereich „Animationen“ öffnen, um Animationen zu erfassen und @keyframes live zu bearbeiten

Im Bereich Animationen haben Sie jetzt folgende Möglichkeiten:

  • Erfasst Animationen, die bereits laufen, wenn Sie das Steuerfeld öffnen, sodass Sie die Seite nicht aktualisieren müssen, um Animationen zu erfassen.
  • Unterstützt die Live-Bearbeitung von @keyframes. Mit anderen Worten: Die erfasste Animation wird aktualisiert, wenn Sie den Abschnitt @keyframes unter Elemente bearbeiten. Stile:

Im folgenden Video können Sie beide Funktionen in Aktion sehen.

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 des Largest Contentful Paint (LCP). Eine vollständige Liste der Änderungen finden Sie hier.

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

Chromium-Problem: 772558.

Bedienungshilfen

In dieser Version wurden die Bedienungshilfen verbessert:

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

Verschiedene Highlights

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

  • Leistung:
    • Netzwerk-Track: WebSocket-Verbindungsereignisse wurden 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ü „Einheiten“ für Längeneigenschaftswerte wurde eingestellt (41495618).
    • Das Auflösen aktiver Eigenschaften für die verschachtelten At-Regeln 346732737 wurde behoben.
    • 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. Über diese Vorschaukanäle erhalten Sie Zugriff auf die neuesten Entwicklertools, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, bevor Ihre Nutzer es tun.

Kontaktaufnahme mit dem Team für Chrome-Entwicklertools

Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.

  • Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
  • Problem mit den Entwicklertools über Weitere Optionen melden Mehr > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
  • Twittern Sie unter @ChromeDevTools.
  • Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools

Chrome 128

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde gekündigt.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59