Neuerungen in den Entwicklertools (Chrome 99)

Jecelyn Yeen

WebSocket-Anfragen drosseln

Der Bereich Netzwerk unterstützt jetzt die Drosselung von WebSocket-Anfragen. Bisher funktionierte die Netzwerkdrosselung bei WebSocket-Anfragen nicht.

Öffnen Sie den Bereich Netzwerk, klicken Sie auf eine Web-Socket-Anfrage und öffnen Sie den Tab Nachrichten, um die Übertragung der Nachricht zu beobachten. Wählen Sie Langsames 3G aus, um die Geschwindigkeit zu drosseln.

WebSocket-Anfragen drosseln

Chromium-Problem: 423246

Neuer Bereich „Reporting API“ im Anwendungsbereich

Im neuen Bereich Reporting API können Sie die auf Ihrer Seite generierten Berichte und ihren Status im Blick behalten.

Mit der Reporting API können Sie unter anderem Sicherheitsverstöße auf Ihrer Seite und eingestellte API-Aufrufe im Blick behalten.

Öffnen Sie eine Seite, auf der die Reporting API verwendet wird (z.B. die Demoseite). Scrollen Sie im Bereich Anwendung nach unten zum Abschnitt Hintergrunddienste und wählen Sie den Bereich Reporting API aus.

Im Bereich Berichte finden Sie eine Liste der auf Ihrer Seite generierten Berichte und deren Status. Klicken Sie darauf, um die Details des Berichts aufzurufen.

Im Bereich Endpunkte findest du einen Überblick über alle Endpunkte, die im Reporting-Endpoints-Header konfiguriert sind.

Bereich „Reporting API“

Chromium-Problem: 1205856

Der Support wartet, bis das Element im Steuerfeld „Aufzeichnung“ sichtbar und anklickbar ist.

Bei der erneuten Wiedergabe einer User Flow-Aufzeichnung wartet das Steuerfeld Rekorder nun, bis das Element im Darstellungsbereich sichtbar oder anklickbar ist, oder versucht, das Element automatisch in den Darstellungsbereich zu scrollen, bevor der Schritt wiederholt wird. Bisher ist die Wiedergabe sofort fehlgeschlagen.

Hier sehen Sie ein Beispiel für ein Off-Screen-Menü, das sich außerhalb des Darstellungsbereichs befindet und bei Aktivierung eingeblendet wird. Der Nutzer muss das Menü ein- und ausschalten und auf den Menüpunkt klicken. Bisher schlug die erneute Wiedergabe beim letzten Schritt fehl, da das Menüelement immer noch eingeblendet wird und noch nicht im Darstellungsbereich sichtbar ist. Dieses Problem ist jetzt behoben.

Chromium-Problem: 1257499

Besseres Konsolen-Design, bessere Formatierung und bessere Filterung

Logmeldungen mit ANSI-Escapecode richtig formatieren

Sie können jetzt die ANSI-Escapesequenzen verwenden, um Console-Nachrichten richtig zu formatieren. Bisher war die Unterstützung für ANSI-Escapesequenzen in der DevTools-Konsole sehr begrenzt (und teilweise fehlerhaft).

Es ist üblich, dass Node.js Protokollnachrichten über ANSI-Escape-Sequenzen kolorieren, oft mithilfe von Stilbibliotheken wie Creide, Farben, ANSI-Farben oder Kleur.

Durch diese Änderungen können Sie Ihre Node.js-Anwendungen jetzt nahtlos mit DevTools debuggen und dabei korrekt eingefärbte Konsolenmeldungen sehen. Öffnen Sie diese Demo, um sich das selbst anzusehen.

Weitere Informationen zum Formatieren und Stilisieren von Konsolennachrichten mit DevTools finden Sie in der Dokumentation unter Nachrichten in der Console formatieren und stylen.

Konsolenstil

Chromium-Probleme: 1282837, 1282076

Formatspezifizierer %s, %d, %i und %f müssen ordnungsgemäß unterstützt werden

In der Console werden die %s-, %d-, %i- und %f-Conversions jetzt gemäß dem Console-Standard ausgeführt. Bisher war das Ergebnis der Unterhaltung nicht einheitlich.

Unterstützung von Formatspezifiziern in Konsolenmeldungen

Chromium-Probleme: 1277944, 1282076

Intuitivere Gruppenfilter in der Konsole

Beim Filtern der Konsolennachricht wird jetzt eine Konsolennachricht angezeigt, wenn der Nachrichteninhalt mit dem Filter oder der Titel der Gruppe (oder der Ancestor-Gruppe) mit dem Filter übereinstimmt. Bisher wurde der Titel der Konsolengruppe trotz des Filters angezeigt.

Wenn eine Konsolennachricht angezeigt wird, wird jetzt auch die Gruppe (oder die übergeordnete Gruppe) angezeigt, zu der sie gehört.

Gruppenfilter für die Konsole

Chromium-Problem: 1068788

Verbesserungen bei Quellkarten

Chrome-Erweiterung mit Quellkartendateien debuggen

Sie können jetzt Chrome-Erweiterungen mit Quellkartendateien debuggen. Bisher wurde in den Entwicklertools nur Inline-Sourcemap für das Debugging von Chrome-Erweiterungen unterstützt.

Fehler in der Chrome-Erweiterung mit Quellzuordnungsdateien beheben

Chromium-Problem: 212374

Verbessertes Verzeichnisstruktur für Quellordner im Bereich „Quellen“

Der Ordnerbaum im Bereich Quellen wurde optimiert. Die Ordnerstrukturen und Benennungen (z. B. „../“, „./“) sind jetzt übersichtlicher. Das liegt daran, dass die absoluten Quell-URLs in den Quellkarten normalisiert werden.

Verbessertes Verzeichnisstruktur für Quellordner im Bereich „Quellen“

Chromium-Problem: 1284737

Worker-Quelldateien im Bereich „Quellen“ anzeigen

Quelldateien von Workern (z.B. Webworker, Dienstworker) mit relativer SourceURL werden jetzt im Bereich Quellcode angezeigt. Bisher wurden Worker-Quelldateien nicht richtig verarbeitet.

ALT_TEXT_HERE

Chromium-Problem: 1277002

Updates für das automatische dunkle Design in Chrome

Die Benutzeroberfläche für die Emulation des automatischen dunklen Designs wurde vereinfacht. Es ist jetzt ein Kästchen, zuvor war es ein Drop-down-Menü.

Wenn außerdem das dunkle Design automatisch aktiviert ist, wird das Drop-down-Menü Emulate prefers-color-scheme deaktiviert und automatisch auf prefers-color-scheme: dark gesetzt.

In Chrome 96 wird ein Ursprungstest für das automatische dunkle Design auf Android eingeführt. Mit dieser Funktion wendet der Browser ein automatisch generiertes dunkles Design auf Websites mit hellem Design an, wenn der Nutzer im Betriebssystem dunkle Designs aktiviert hat.

Emulierung des automatischen dunklen Modus

Chromium-Problem: 1243309

Berührungsfreundliche Farbauswahl und Teilfenster

Auf Touchscreen-Geräten können Sie jetzt mit den Fingern oder einem Eingabestift die Farbe auswählen und die Größe des Schiebereglers in den DevTools ändern.

Hier ist ein Beispiel, das mit dem Touchscreen von Google Pixelbook aufgenommen wurde.

Chromium-Probleme: 1284245, 1284995

Sonstige Highlights

Hier sind einige bemerkenswerte Fehlerkorrekturen in dieser Version:

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. 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

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

Neu in DevTools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools