Neuerungen in den Entwicklertools (Chrome 99)

Jecelyn Yeen

WebSocket-Anfragen drosseln

Im Bereich Netzwerk können jetzt Web-Socket-Anfragen gedrosselt werden. Bisher funktionierte die Netzwerkdrosselung bei WebSocket-Anfragen nicht.

Öffnen Sie den Bereich Network (Netzwerk), klicken Sie auf eine WebSocket-Anfrage und öffnen Sie den Tab Messages (Nachrichten), um die Nachrichtenübertragungen zu beobachten. Wählen Sie Langsame 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 deren Status im Blick behalten.

Die Reporting API wurde entwickelt, um Ihnen bei der Überwachung von Sicherheitsverstößen auf Ihrer Seite, eingestellten API-Aufrufen und mehr zu helfen.

Ö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 sehen Sie eine Liste der Berichte, die auf Ihrer Seite generiert wurden, sowie deren Status. Klicken Sie darauf, um die Details des Berichts aufzurufen.

Im Bereich Endpunkte finden Sie eine Übersicht aller im Reporting-Endpoints-Header konfigurierten Endpunkte.

Bereich „Reporting API“

Chromium-Problem: 1205856

Warten, bis das Element im Recorder-Bereich sichtbar/klickbar ist

Wenn Sie eine Aufzeichnung eines Nutzerablaufs wiedergeben, wartet der Bereich Recorder jetzt, bis das Element im Viewport sichtbar oder anklickbar ist. Andernfalls wird versucht, das Element automatisch in den Viewport zu scrollen, bevor der Schritt wiedergegeben wird. Bisher schlug die Wiedergabe sofort fehl.

Hier sehen Sie ein Beispiel für ein Off-Screen-Menü, das sich außerhalb des Viewports befindet und bei Aktivierung eingeblendet wird. Der Nutzer muss das Menü ein- und ausblenden und dann auf den Menüpunkt klicken. Bisher ist die Wiedergabe im letzten Schritt fehlgeschlagen, weil das Menüelement noch eingeblendet wurde und noch nicht im Viewport sichtbar war. Das Problem wurde behoben.

Chromium-Problem: 1257499

Bessere Konsolengestaltung, ‑formatierung und ‑filterung

Logmeldungen mit ANSI-Escape-Code richtig formatieren

Sie können jetzt ANSI-Escape-Sequenzen verwenden, um Konsolennachrichten richtig zu formatieren. Bisher wurden ANSI-Escape-Sequenzen in der DevTools-Konsole nur sehr eingeschränkt (und teilweise fehlerhaft) unterstützt.

Node.js-Entwickler verwenden häufig ANSI-Escape-Sequenzen, um Logmeldungen zu formatieren, oft mit Hilfe von Styling-Bibliotheken wie chalk, colors, ansi-colors, kleur usw.

Mit diesen Änderungen können Sie Ihre Node.js-Anwendungen jetzt nahtlos mit DevTools debuggen und erhalten dabei farblich gekennzeichnete Konsolennachrichten. Hier finden Sie eine Demo.

Weitere Informationen zum Formatieren und Gestalten von Konsolennachrichten mit den Entwicklertools finden Sie in der Dokumentation unter Nachrichten in der Konsole formatieren und gestalten.

Konsolenformatierung

Chromium-Probleme: 1282837, 1282076

%s-, %d-, %i- und %f-Formatspezifizierer richtig unterstützen

In der Console werden die Typkonvertierungen %s, %d, %i und %f jetzt gemäß der Console Standard korrekt ausgeführt. Bisher war das Ergebnis der Unterhaltung nicht konsistent.

Formatspezifizierer in Konsolennachrichten unterstützen

Chromium-Probleme: 1277944, 1282076

Intuitiverer Konsolengruppenfilter

Beim Filtern der Konsolennachricht wird jetzt eine Konsolennachricht angezeigt, wenn ihr Inhalt 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.

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

Konsolengruppenfilter

Chromium-Problem: 1068788

Verbesserungen bei Quellzuordnungen

Fehlerbehebung bei Chrome-Erweiterungen mit Quellzuordnungsdateien

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

Fehlerbehebung bei Chrome-Erweiterungen mit Quellzuordnungsdateien

Chromium-Problem: 212374

Verbesserte Struktur des Quellordnerbaums im Quellenbereich

Die Quellordnerstruktur im Bereich Quellen wurde verbessert. Die Ordnerstrukturen und die Benennung sind jetzt übersichtlicher (z. B. „../“, „./“ usw.). Das ist das Ergebnis der Normalisierung der absoluten Quell-URLs in den Quellzuordnungen.

Verbesserte Struktur des Quellordnerbaums im Quellenbereich

Chromium-Problem: 1284737

Worker-Quelldateien im Quellenbereich anzeigen

Worker-Quelldateien (z.B. Web Worker, Service Worker) mit relativer SourceURL werden jetzt im Bereich Quelle angezeigt. Bisher wurden Worker-Quelldateien nicht korrekt 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, vorher war es ein Drop-down-Menü.

Wenn Automatisches dunkles Design aktiviert ist, wird das Drop-down-Menü „prefers-color-scheme“ emulieren deaktiviert und automatisch auf prefers-color-scheme: dark festgelegt.

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

Emulation des automatischen dunklen Designs

Chromium-Problem: 1243309

Touchfreundliche Farbauswahl und geteilter Bereich

Sie können jetzt die Farbe auswählen und die Schublade in den DevTools auf Touchscreen-Geräten mit den Fingern oder einem Eingabestift in der Größe anpassen.

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

Chromium-Probleme: 1284245, 1284995

Sonstige Highlights

Hier sind einige wichtige Korrekturen in dieser Version:

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.