Neuerungen in den Entwicklertools (Chrome 99)

Jecelyn Yeen

WebSocket-Anfragen drosseln

Das Steuerfeld Netzwerk unterstützt jetzt die Drosselung von Websocket-Anfragen. Bisher funktionierte die Netzwerkdrosselung nicht bei Websocket-Anfragen.

Öffnen Sie den Bereich Netzwerk, klicken Sie auf eine WebSocket-Anfrage und öffnen Sie den Tab Nachrichten, um die Nachrichtenübertragungen zu beobachten. Wählen Sie Langsames 3G aus, um die Geschwindigkeit zu drosseln.

WebSocket-Anfragen drosseln

Chromium-Problem: 423246

Neuer Bereich „Reporting API“ im Bereich „Anwendung“

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.

Beim Abspielen einer Aufzeichnung des Nutzerflusses wartet das Steuerfeld Aufzeichnen jetzt, bis das Element im Viewport sichtbar oder anklickbar ist, oder versucht, das Element automatisch in den Viewport 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 ist die Wiedergabe beim letzten Schritt fehlgeschlagen, weil sich das Menüelement noch hineingeschoben hat und noch nicht im Darstellungsbereich sichtbar war. Das Problem wurde behoben.

Chromium-Problem: 1257499

Besseres Design, bessere Formatierung und bessere Filterung der Konsole

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

Node.js-Entwickler färben Logeinträge häufig mithilfe von ANSI-Escapesequenzen ein, oft mithilfe von Stilbibliotheken wie chalk, colors, ansi-colors 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 anzusehen.

Weitere Informationen zum Formatieren und Stilisieren von Konsolennachrichten mit den 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 Inhalt der Nachricht mit dem Filter übereinstimmt oder der Titel der Gruppe (oder der übergeordneten 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.

console group filter

Chromium-Problem: 1068788

Verbesserungen bei Quellkarten

Chrome-Erweiterung mit Quellkartendateien debuggen

Sie können jetzt Chrome-Erweiterungen mit Quellkartendateien debuggen. Bisher wurde in den DevTools nur die Inline-Quellkarte für das Debuggen von Chrome-Erweiterungen unterstützt.

Chrome-Erweiterung mit Quellkartendateien debuggen

Chromium-Problem: 212374

Verbessertes Verzeichnisstruktur für Quellordner im Bereich „Quellen“

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

Verbessertes Verzeichnis der 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 der Emulation des automatischen dunklen Designs wurde vereinfacht. Es ist jetzt ein Kästchen, zuvor war es ein Drop-down-Menü.

Wenn 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

Touchfreundliche Farbauswahl und geteilter Bereich

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