Neuerungen in den Entwicklertools (Chrome 91)

Jecelyn Yeen

Pop-up mit Web Vitals-Informationen im Bereich „Leistung“

Wenn Sie im Bereich Leistung den Mauszeiger auf eine Web Vitals-Markierung bewegen, sehen Sie, ob die Leistung gut, verbesserungswürdig oder schlecht ist.

Pop-up mit Web Vitals-Informationen

Chromium-Problem: 1147872

CSS-Scroll-Snap-Element visualisieren

Sie können das scroll-snap-Logo jetzt im Bereich Elemente umschalten, um die CSS-Scroll-Snap-Ausrichtung zu prüfen.

CSS-Scroll-Snap

Wenn auf ein HTML-Element auf Ihrer Seite (z.B. diese Demoseite) scroll-snap-type angewendet wurde, wird daneben im Steuerfeld Elemente das Symbol scroll-snap angezeigt. Klicken Sie auf das Symbol, um die Anzeige eines Scroll-Snap-Overlays auf der Seite ein- und auszuschalten.

Im Beispiel oben sehen Sie Punktmarkierungen an den Kanten. Der Scroll-Port ist durchgehend umrandet, während die Snap-Elemente gestrichelte Konturen haben. Der Scrollabstand wird grün ausgefüllt, der Scrollrand orange.

Chromium-Problem: 862450

Neuer Arbeitsspeicherprüfer

Mit dem neuen Arbeitsspeicherprüftool können Sie ein ArrayBuffer in JavaScript sowie den Wasm-Arbeitsspeicher prüfen.

Öffnen Sie diese Demoseite. Öffnen Sie im Bereich Quellen die Datei demo-js.js und setzen Sie einen Haltepunkt in Zeile 18.

Aktualisieren Sie die Seite. Maximieren Sie im rechten Bereich Debugger den Abschnitt Umfang. Beachten Sie das neue Symbol neben dem Wert buffer. Klicken Sie darauf, um den Memory Inspector aufzurufen.

Weitere Informationen zur Prüfung von JavaScript ArrayBuffer und WebAssembly.Memory mit diesem neuen Arbeitsspeicherprüfer finden Sie in der Dokumentation.

Arbeitsspeicherprüfer

Chromium-Problem: 1166577

Neuer Bereich für Badge-Einstellungen im Bereich „Elemente“

Über die Badge-Einstellungen im Steuerfeld Elemente kannst du Badges jetzt selektiv aktivieren oder deaktivieren. Mit dieser Funktion kannst du die wichtigen Logos anpassen und dich beim Prüfen von Webseiten auf die wichtigsten Logos konzentrieren.

Bereich „Badge-Einstellungen“ im Bereich „Elemente“

Klicken Sie im Steuerfeld Elemente mit der rechten Maustaste auf ein Element. Wählen Sie im Kontextmenü die Option Logoeinstellungen aus. Der Bereich mit den Logoeinstellungen wird oben angezeigt. Aktiviere oder deaktiviere beliebige Kontrollkästchen zum Ein-/Ausblenden der Logos.

Chromium-Problem: 1066772

Optimierte Bildvorschau mit Informationen zum Seitenverhältnis

In der Bildvorschau im Bereich Elemente werden jetzt mehr Informationen zum Bild angezeigt – gerenderte Größe, gerendertes Seitenverhältnis, intrinsische Größe, intrinsisches Seitenverhältnis und Dateigröße.

Anhand dieser Informationen können Sie Ihre Bilder besser verstehen und bei Bedarf Optimierungen vornehmen.

Bildvorschau mit Informationen zum Seitenverhältnis

Die Informationen zum Seitenverhältnis des Bildes sind im Bereich Netzwerk verfügbar. Sie können auch darauf klicken, um das Bild in der Vorschau anzusehen.

Informationen zum Seitenverhältnis im Bereich „Netzwerk“

Chromium-Probleme: 1149832, 1170656

Neue Schaltfläche für Netzwerkbedingungen mit Optionen zum Konfigurieren von Content-Encoding

Im Bereich Netzwerk wurde eine neue Schaltfläche für die Netzwerkbedingungen hinzugefügt. Klicken Sie darauf, um den Tab Netzwerkbedingungen zu öffnen.

Auf dem Tab Netzwerkbedingungen wurde die neue Option Accepted Content-Encodings hinzugefügt. Konfigurieren Sie ihn so, dass die Serverantworten in Browsern richtig codiert sind, die Gzip, Brotli oder andere zukünftige Content-Encoding-Werte nicht unterstützen.

Neue Schaltfläche für Netzwerkbedingungen mit Optionen zum Konfigurieren von „Content-Encoding“

Chromium-Problem: 1162042

Verbesserungen im Bereich „Stile“

Neue Verknüpfung zum Anzeigen des berechneten Werts im Bereich „Stile“

Sie können jetzt im Bereich Styles mit der rechten Maustaste auf eine CSS-Eigenschaft klicken und Berechneten Wert ansehen auswählen, um den berechneten CSS-Wert aufzurufen.

Neue Verknüpfung zum Ansehen des berechneten Werts

Chromium-Problem: 1076198

Unterstützung für das Keyword accent-color

Die Benutzeroberfläche für die automatische Vervollständigung im Bereich „Stile“ erkennt jetzt das CSS-Keyword accent-color. Damit können Webentwickler die Akzentfarbe für UI-Steuerelemente (z. B. Kästchen, Optionsfeld) angeben, die vom Element generiert werden.

Die CSS-Eigenschaft accent-color befindet sich derzeit in der Testphase. Aktiviere chrome://flags/#enable-experimental-web-platform-features, um es zu testen.

Akzentfarbe

Chromium-Problem: 1092093

Problemtypen mithilfe von Farben und Symbolen kategorisieren

Auf dem Tab Probleme werden Probleme jetzt nach Seitenfehlern, anstehenden funktionsgefährdenden Änderungen und möglichen Verbesserungen zur besseren Anzeige des Schweregrads kategorisiert. Sie können den Tab Probleme öffnen, indem Sie in der Konsole auf die Schaltfläche Problemanzahl klicken.

  • Seitenfehler (rot): Probleme, die unmittelbare Auswirkungen auf die Seitenfunktion haben, z. B. falsche CORS-Header
  • Bevorstehende Änderungen (gelb): Probleme, die auf eine bevorstehende, inkompatible Änderung der Webplattform hinweisen, die zu einem Verlust der Seitenfunktionalität führen kann (z. B. Warnung vor bevorstehenden CORS-RFC 1918-Änderungen)
  • Mögliche Verbesserungen (blau). Mögliche Verbesserungen auf der Seite, die jedoch derzeit nicht die grundlegenden Funktionen der Seite beeinträchtigen (z.B. Probleme mit der Barrierefreiheit)

Problemtypen mithilfe von Farben und Symbolen kategorisieren

Chromium-Problem: 1183241

Trust-Tokens löschen

Sie können Vertrauenstokens jetzt mit der neuen Schaltfläche „Löschen“ im Bereich Trust Tokens im Bereich Anwendung löschen.

Trust Token ist eine neue API, die ohne passives Tracking dabei hilft, Betrug zu bekämpfen und Bots von echten Menschen zu unterscheiden. Erste Schritte mit Trust Tokens

Trust-Tokens löschen

Chromium-Problem: 1126824

Details zu blockierten Elementen in der Frame-Detailansicht ansehen

Details zu blockierten Funktionen finden Sie jetzt in der Frame-Detailansicht im Abschnitt Berechtigungsrichtlinie.

Öffne diese Demoseite. Wählen Sie im Steuerfeld Application (Anwendung) einen Frame aus. Scrollen Sie im Abschnitt Berechtigungsrichtlinie zur Eigenschaft Deaktivierte Funktionen. Klicken Sie auf Details anzeigen, um zu erfahren, warum die Funktion blockiert ist. Klicken Sie auf das Symbol neben den einzelnen Richtlinien, um den iFrame oder die Netzwerkanfrage aufzurufen, durch die die Funktion blockiert wurde.

Die Berechtigungsrichtlinie ist eine Webplattform-API, die es einer Website ermöglicht, die Verwendung von Browserfunktionen in einem eigenen Frame oder in eingebetteten iFrames zuzulassen oder zu blockieren.

Blockierte Funktionen in der Frame-Detailansicht

Chromium-Problem: 1158827

Tests in der Einstellung „Tests“ filtern

Mit dem neuen Testfilter finden Sie Tests schneller. Rufen Sie beispielsweise Einstellungen > Tests auf und geben Sie im Textfeld Filter „Kontrast“ ein, um alle Tests mit dem Wort „Kontrast“ zu filtern.

Tests in der Einstellung „Tests“ filtern

Neue Spalte „Vary Header“ im Bereich „Cache-Speicher“

In der neuen Spalte Vary Header im Bereich Cache Storage können Sie sich den HTTP-Antwortheader Vary ansehen.

Spalte „Überschrift anpassen“

Chromium-Problem: 1186049

Verbesserungen im Bereich „Quellen“

Unterstützung neuer JavaScript-Funktionen

Die Entwicklertools unterstützen jetzt die neue JavaScript-Sprachfunktion für die private Markenprüfung (#foo in obj).

Mit dieser Funktion für private Markenprüfungen wird der In-Operator erweitert, um das Testen von privaten Klassenfeldern für ein bestimmtes Objekt zu unterstützen.

Sie können es in den Bereichen Console und Quellen ausprobieren. Sie können die privaten Felder auch im Bereich Debugger im Bereich Umfang prüfen.

JavaScript-Prüfungen privater Marken

Chromium-Problem: 11374

Erweiterter Support für das Debugging an Haltepunkten

Die Entwicklertools setzen Haltepunkte jetzt korrekt in mehreren Skripts ein. Moderne JavaScript-Bundler (z. B. Webpack und Rollup) unterstützen die Funktion zur Codeaufteilung. Es gibt Szenarien, in denen eine gemeinsam genutzte Komponente in mehrere Routen (Codeaufteilungen) verwendet werden kann.

Bisher konnten mit den Entwicklertools nur an einem unformatierten Speicherort Haltepunkte gesetzt werden. Mit dieser neuesten Verbesserung können die Entwicklertools Haltepunkte an allen relevanten Stellen korrekt setzen.

Chromium-Probleme: 1142705, 979000, 1180794

Hover-Vorschau mit []-Notation unterstützen

Die Entwicklertools unterstützen jetzt die Hover-Vorschau auf JavaScript-Mitgliedsausdrücke, die im Bereich Quellen die []-Notation verwenden.

Unterstützung für Hover-Vorschau mit „[]“-Notation

Chromium-Problem: 1178305

Die Gliederung von HTML-Dateien wurde verbessert.

Die Entwicklertools bieten jetzt eine bessere Unterstützung von Outline-Dateien für HTML-Dateien. Öffnen Sie im Bereich Quellen eine HTML-Datei. Sie können die Codestruktur mit der Tastenkombination Cmd + Umschalt + O (Mac) oder Strg + Umschalt + O (Windows) aktivieren.

Im Beispiel unten listen die Entwicklertools jetzt alle Funktionen in der Übersicht korrekt auf. Bisher wurden in den Entwicklertools nur einige Funktionen angezeigt.

Die Gliederung von HTML-Dateien wurde verbessert.

Chromium-Problem: 761019, 1191465

Richtige Fehler-Stacktraces für das Wasm-Debugging

Die Entwicklertools lösen jetzt Inline-Funktionsaufrufe und zeigen korrekte Fehler-Stacktraces für das Wasm-Debugging an.

Bisher wurden in den Entwicklertools in den Fehler-Stacktraces nur allgemeine Wasm-Referenzen angezeigt.

Richtige Fehler-Stacktraces für das Wasm-Debugging

In der alten Chrome-Version links wird der Speicherort der Quelle (z.B. dsquare) nicht in den Fehler-Stacktraces angezeigt, in der neuen Version rechts.

Chromium-Problem: 1189161

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