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 bei WebSocket-Anfragen nicht.

Öffnen Sie das Steuerfeld Netzwerk, klicken Sie auf eine WebSocket-Anfrage und öffnen Sie den Tab Nachrichten, um die Übertragung der Nachrichten zu beobachten. Wähle Langsames 3G aus, um die Geschwindigkeit zu drosseln.

WebSocket-Anfragen drosseln

Chromium-Problem: 423246

Neuer Bereich „Reporting API“ im Steuerfeld „Anwendung“

Im neuen Bereich Reporting API können Sie die auf Ihrer Seite erstellten 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 beobachten.

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

Im Abschnitt Berichte finden Sie eine Liste der auf Ihrer Seite erstellten Berichte mit ihrem Status. Klicken Sie darauf, um die Details des Berichts aufzurufen.

Der Abschnitt Endpunkte bietet eine Übersicht über alle im Reporting-Endpoints-Header konfigurierten Endpunkte.

Bereich „Reporting API“

Chromium-Problem: 1205856

Unterstützung des Wartens, bis das Element im Rekorder-Steuerfeld sichtbar/anklickbar ist

Bei der Wiedergabe einer Nutzerfluss-Aufzeichnung wartet das Steuerfeld Rekorder jetzt, bis das Element im Darstellungsbereich sichtbar oder anklickbar ist, oder versucht, das Element automatisch in den Darstellungsbereich zu scrollen, bevor der Schritt wiederholt wird. Zuvor scheiterte die Wiederholung sofort.

Hier ist ein Beispiel für ein Menü außerhalb des Darstellungsbereichs, das eingeblendet wird, wenn es aktiviert wird. Der User Flow besteht darin, das Menü umzuschalten und auf den Menüpunkt zu klicken. Bisher schlug die Wiedergabe im letzten Schritt fehl, da das Menüelement immer noch in den Darstellungsbereich schiebt und im Darstellungsbereich noch nicht sichtbar ist. Dieses Problem wurde behoben.

Chromium-Problem: 1257499

Bessere Gestaltung, Formatierung und Filterung in der Konsole

Lognachrichten mit ANSI-Escape-Code richtig gestalten

Sie können jetzt die ANSI-Escapesequenzen verwenden, um Konsolennachrichten richtig zu gestalten. Früher wurde die Unterstützung von ANSI-Escape-Sequenzen in der DevTools-Konsole nur eingeschränkt (und teilweise fehlerhaft) unterstützt.

Node.js-Entwickler kolorieren normalerweise Lognachrichten über ANSI-Escapesequenzen, häufig mithilfe von Stilbibliotheken wie chalk, colors, ansi-colors, kleur usw.

Dank dieser Änderungen können Sie Ihre Node.js-Anwendungen nun nahtlos mithilfe der Entwicklertools mit korrekt farblich gekennzeichneten Konsolennachrichten debuggen. In dieser Demo kannst du sie dir ansehen.

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

Konsolenstil

Chromium-Probleme: 1282837, 1282076

Die Formatspezifizierer %s, %d, %i und %f werden ordnungsgemäß unterstützt.

Die Konsole führt jetzt die Konvertierungen des Typs %s, %d, %i und %f wie unter Console-Standard beschrieben ordnungsgemäß aus. Bisher war das Unterhaltungsergebnis inkonsistent.

Formatspezifizierer in der Konsolenmessgerät unterstützen

Chromium-Probleme: 1277944, 1282076

Intuitivere Filter für Konsolengruppen

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

Wenn eine Konsolenmeldung angezeigt wird, wird jetzt auch die Gruppe (oder die Ancestor-Gruppe) angezeigt, zu der sie gehört.

Konsolengruppenfilter

Chromium-Problem: 1068788

Verbesserungen bei Source Maps

Fehler in Chrome-Erweiterung mit Quellzuordnungsdateien beheben

Sie können jetzt mit Quellzuordnungsdateien Fehler in der Chrome-Erweiterung beheben. Bisher wurde von den Entwicklertools nur die Inline-Sourcemap für das Debugging von Chrome-Erweiterungen unterstützt.

Fehler in Chrome-Erweiterung mit Quellzuordnungsdateien beheben

Chromium-Problem: 212374

Verbesserte Quellordnerstruktur im Steuerfeld „Quellen“

Die Struktur des Quellordners im Steuerfeld Quellen wurde verbessert, da die Ordnerstruktur und die Benennung (z.B. „../“, „./“) weniger übersichtlich sind. Intern ist dies das Ergebnis der Normalisierung der absoluten Quell-URLs in den Quellzuordnungen.

Verbesserte Quellordnerstruktur im Steuerfeld „Quellen“

Chromium-Problem: 1284737

Worker-Quelldateien im Bereich „Quellen“ anzeigen

Worker-Quelldateien (z.B. Web Worker, Service Worker) mit einer relativen SourceURL werden jetzt im Bereich Source (Quelle) angezeigt. Zuvor wurden Worker-Quelldateien nicht korrekt verarbeitet.

ALT_TEXT_HERE

Chromium-Problem: 1277002

Updates für das automatische dunkle Design von Chrome

Die Benutzeroberfläche für die Emulation für das automatische dunkle Design wurde vereinfacht. Früher war er ein Kästchen, zuvor war es ein Drop-down-Menü.

Wenn Sie das dunkle Design „Automatisch“ aktiviert haben, wird das Drop-down-Menü Emulatepreferreds-color-scheme automatisch deaktiviert und auf prefers-color-scheme: Dark gesetzt.

Mit Chrome 96 wird ein Ursprungstest für das automatische dunkle Design auf Android-Geräten eingeführt. Mit dieser Funktion wendet der Browser ein automatisch generiertes dunkles Design auf helle Websites an, wenn der Nutzer im Betriebssystem das dunkle Design aktiviert hat.

Automatische Emulation für das dunkle Design

Chromium-Problem: 1243309

Farbauswahl mit Touchscreen und geteiltem Bereich

Auf Touchscreen-Geräten kannst du jetzt mit den Fingern oder Eingabestiften in den Entwicklertools Farbe auswählen und die Größe der Leiste anpassen.

Hier sehen Sie ein Beispiel, das mit dem Touchscreen des Google Pixelbook-Geräts aufgenommen wurde.

Chromium-Probleme: 1284245, 1284995

Sonstige Highlights

Dies sind einige bemerkenswerte Korrekturen in dieser Version:

Vorschaukanäle herunterladen

Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

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 Erste Schritte

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

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