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ähle Langsames 3G aus, um die Geschwindigkeit zu verringern.

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.

Die Reporting API wurde entwickelt, um Sie unter anderem bei der Überwachung von Sicherheitsverstößen auf Ihrer Seite und eingestellten API-Aufrufen zu unterstützen.

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

Im Abschnitt Berichte sehen Sie eine Liste der auf Ihrer Seite generierten Berichte und ihren Status. Klicken Sie darauf, um die Details des Berichts aufzurufen.

Der Abschnitt Endpunkte gibt Ihnen einen Überblick über alle Endpunkte, die im Header Reporting-Endpoints konfiguriert sind.

Bereich „Reporting API“

Chromium-Problem: 1205856

Unterstützung für „Warten, bis das Element im Rekorder-Bereich sichtbar/anklickbar ist“

Bei der Wiedergabe einer User Flow-Aufzeichnung wartet der Rekorder-Bereich 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 schlug die Wiederholung sofort fehl.

Hier ist ein Beispiel für ein Menü außerhalb des Darstellungsbereichs, das sich bei Aktivierung öffnet. Der User Flow besteht darin, das Menü umzuschalten und auf den Menüpunkt zu 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 Gestalten, Formatieren und Filtern von Konsolen

Lognachrichten mit ANSI-Escape-Code richtig gestalten

Sie können jetzt die ANSI-Escapesequenzen verwenden, um Konsolennachrichten richtig zu gestalten. Zuvor hatte die Entwicklertools-Konsole nur sehr begrenzte (und teilweise nicht erreichbare) Unterstützung für ANSI-Escape-Sequenzen.

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

Dank dieser Änderungen kannst du Fehler in deinen Node.js-Anwendungen jetzt nahtlos mit den Entwicklertools mit den entsprechenden farbigen Konsolennachrichten beheben. Öffnen Sie diese Demo, um sich das Video selbst anzusehen.

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

Konsolenstil

Chromium-Probleme: 1282837, 1282076

Die Formatspezifizierer %s, %d, %i und %f werden korrekt unterstützt.

Die Console führt jetzt die im Console Standard angegebenen Konvertierungen %s, %d, %i und %f korrekt aus. Bisher war das Ergebnis der Unterhaltung inkonsistent.

unterstützen Formatspezifizierer in Konsolenmessege

Chromium-Probleme: 1277944, 1282076

Intuitiverer Gruppenfilter für Konsolen

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 Ancestor-Gruppe), zu der sie gehört, angezeigt.

Gruppenfilter für Konsolen

Chromium-Problem: 1068788

Verbesserungen bei Quellzuordnungen

Fehler in der Chrome-Erweiterung mit Quellzuordnungsdateien beheben

Sie können jetzt Fehler in der Chrome-Erweiterung mit Quellzuordnungsdateien beheben. 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

Verbesserte Struktur des Quellordners im Bereich „Quellen“

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

Verbesserte Struktur des Quellordners im Bereich „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. 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 das Auto-dunkle Design aktiviert ist, wird das Drop-down-Menü Bevorzugtes-Farbschema emulieren automatisch deaktiviert und auf prefers-color-scheme: dunkel gesetzt.

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

Automatische Emulation des dunklen Designs

Chromium-Problem: 1243309

Berührungsfreundliche Farbauswahl und Teilfenster

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

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

Chromium-Probleme: 1284245, 1284995

Verschiedene Highlights

Im Folgenden sind einige wichtige Fehlerkorrekturen in dieser Version aufgeführt:

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools, kannst hochmoderne Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine 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.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • 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 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