Neuerungen in den Entwicklertools (Chrome 91)

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

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

Chromium-Problem: 1147872

CSS-Scroll-Snap visualisieren

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

Wenn auf ein HTML-Element auf Ihrer Seite (z.B. diese Demo-Seite) scroll-snap-type angewendet wird, wird im Bereich Elemente daneben ein scroll-snap-Logo angezeigt. Klicken Sie auf das Badge, um ein Scroll-Snap-Overlay auf der Seite zu aktivieren oder zu deaktivieren.

Im obigen Beispiel sehen Sie Punktmarkierungen an Andockkanten. Der Scrollport ist durchgehend umrandet, während die Andockelemente gestrichelte Umrisse haben. Der Scroll-Innenrand wird grün ausgefüllt, der Scrollrand orange.

Chromium-Problem: 862450

Neuer Arbeitsspeicher-Prüftool

Verwenden Sie das neue Arbeitsspeicher-Prüftool, um ein ArrayBuffer in JavaScript und den Wasm-Speicher zu 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 Debugger-Bereich den Abschnitt Bereich. Beachten Sie das neue Symbol neben dem Wert buffer. Klicken Sie darauf, um den Memory Inspector aufzurufen.

In der Dokumentation finden Sie weitere Informationen zum Überprüfen von JavaScript ArrayBuffer und WebAssembly.Memory mit diesem neuen Arbeitsspeicher-Prüftool.

Chromium-Problem: 1166577

Neuer Bereich „Badge-Einstellungen“ im Bereich „Elemente“

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

Klicken Sie im Steuerfeld Elemente mit der rechten Maustaste auf ein Element. Wählen Sie im Kontextmenü Logoeinstellungen aus. Der Bereich mit den Logoeinstellungen wird oben angezeigt. Aktivieren oder deaktivieren Sie ein beliebiges Kästchen, um die Logos ein- oder auszublenden.

Chromium-Problem: 1066772

Verbesserte Bildvorschau mit Informationen zum Seitenverhältnis

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

Diese Informationen helfen Ihnen, Ihre Bilder besser zu verstehen und bei Bedarf Optimierungen vorzunehmen.

Die Informationen zum Seitenverhältnis des Bilds werden auch im Bereich Netzwerk angezeigt, wenn Sie auf das Bild klicken, um es in der Vorschau anzuzeigen.

Chromium-Probleme: 1149832, 1170656

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

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

Auf dem Tab Netzwerkbedingungen wurde die neue Option Akzeptierte Content-Codierungen hinzugefügt. Konfiguriere es so, dass in Browsern getestet wird, die gzip, Brotli oder andere zukünftige Content-Encodings nicht unterstützen, um zu testen, ob Serverantworten korrekt codiert sind.

Chromium-Problem: 1162042

Verbesserungen am Stilbereich

Neue Tastenkombination zum Ansehen 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.

Chromium-Problem: 1076198

Unterstützung für das Keyword accent-color

Die Benutzeroberfläche für die automatische Vervollständigung des Stilbereichs erkennt jetzt das CSS-Keyword accent-color, mit dem Webentwickler die Akzentfarbe für UI-Steuerelemente (z.B. Kästchen, Optionsfelder), die vom Element generiert werden, angeben können.

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

Chromium-Problem: 1092093

Problemtypen mit Farben und Symbolen kategorisieren

Auf dem Tab Probleme werden Probleme jetzt in Seitenfehler, bevorstehende funktionsgefährdende Änderungen und mögliche Verbesserungen kategorisiert, um den Schweregrad besser anzeigen zu können. Klicken Sie zum Öffnen des Tabs Probleme in der Konsole auf die Schaltfläche Anzahl der Probleme.

• Seitenfehler (rot): Probleme, die sich direkt auf die Funktionalität der Seite auswirken, z. B. falsche CORS-Header festlegen
• Bevorstehende funktionsgefährdende Änderungen (gelb): Probleme, die über eine bevorstehende, inkompatible Änderung der Webplattform informieren, die zum Verlust der Seitenfunktionalität führen kann (z.B. Warnung vor bevorstehenden CORS RFC 1918-Änderungen).
• Mögliche Verbesserungen (blau): Mögliche Verbesserungen der Seite, die jedoch derzeit die grundlegenden Funktionen der Seite (z.B. Probleme mit der Zugänglichkeit) nicht beeinträchtigen

Chromium-Problem: 1183241

Trust-Tokens löschen

Sie können Trust-Tokens jetzt über die neue Löschschaltfläche im Bereich Trust token (Trust-Tokens) im Bereich Application (Anwendung) löschen.

Trust Token ist eine neue API zur Betrugsbekämpfung und zur Unterscheidung zwischen Bots und echten Menschen, ohne dass passives Tracking erforderlich ist. Weitere Informationen zu den ersten Schritten mit Trust Tokens

Chromium-Problem: 1126824

Details zu blockierten Funktionen in der Detailansicht des Frames ansehen

Sie können jetzt Details zu blockierten Funktionen im Abschnitt Berechtigungsrichtlinie in der Ansicht „Frame-Details“ ansehen.

Öffnen Sie diese Demoseite. Gehen Sie zum Steuerfeld Anwendung und wählen Sie einen Frame aus. Scrollen Sie im Abschnitt Richtlinie für Berechtigungen zur Property Deaktivierte Funktionen. Klicken Sie auf Details anzeigen, um zu erfahren, warum das Element blockiert ist. Klicken Sie auf das Symbol neben jeder Richtlinie, um den iFrame oder die Netzwerkanfrage aufzurufen, durch die die Funktion blockiert wurde.

Die Berechtigungsrichtlinie ist eine Webplattform-API, mit der eine Website die Verwendung von Browserfunktionen in einem eigenen Frame oder in iFrames zulassen oder blockieren kann.

Chromium-Problem: 1158827

Tests in der Einstellung „Tests“ filtern

Mit dem neuen Testfilter finden Sie Tests schneller. Rufen Sie beispielsweise Einstellungen > Tests: Geben Sie in das Textfeld Filter den Begriff „Kontrast“ ein. um alle Tests mit dem Wort „Kontrast“ zu filtern.

Neue Spalte Vary Header im Bereich „Cache-Speicher“

Verwenden Sie die neue Spalte Vary Header im Bereich Cache-Speicher, um den HTTP-Antwortheader Vary anzusehen.

Chromium-Problem: 1186049

Verbesserungen im Quellenbereich

Unterstützung neuer JavaScript-Funktionen

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

Diese Funktion für private Markenprüfungen erweitert den in-Operator so, dass das Testen von privaten Klassenfeldern für beliebige Objekte unterstützt wird.

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

Chromium-Problem: 11374

Verbesserte Unterstützung für das Debugging von Haltepunkten

In den Entwicklertools wurden die Haltepunkte in mehreren Skripts jetzt korrekt festgelegt. Moderne JavaScript-Bundler (z.B. Webpack oder Rollup) unterstützen die Funktion zur Codeaufteilung – es gibt Szenarien, in denen eine gemeinsam genutzte Komponente in mehrere Routen (Code-Splits) eingebunden werden kann.

Bisher konnten in den Entwicklertools nur Haltepunkte für einen Rohspeicherort festgelegt werden. Mit dieser neuesten Verbesserung können die Entwicklertools die Haltepunkte an allen relevanten Stellen korrekt setzen.

Chromium-Probleme: 1142705, 979000, 1180794

Vorschau beim Bewegen des Mauszeigers mit der Notation [] unterstützen

In den Entwicklertools wird jetzt eine Vorschau des Mauszeigers auf JavaScript-Mitgliedsausdrücke unterstützt, die im Bereich Quellen die Notation [] verwenden.

Chromium-Problem: 1178305

Verbesserte Gliederung von HTML-Dateien

Die Entwicklertools unterstützen HTML-Dateien jetzt noch besser. Öffnen Sie im Bereich Quellen eine HTML-Datei. Sie können die Codestruktur mit der Tastatur „Cmd + Umschalt + O“ (Mac) oder „Strg + Umschalttaste + O“ (Windows) aktivieren oder deaktivieren.

Im folgenden Beispiel werden in der Gliederung jetzt alle Funktionen in den Entwicklertools korrekt aufgelistet. Bisher wurden in den Entwicklertools nur einige der Funktionen angezeigt.

Chromium-Problem: 761019, 1191465

Ordnungsgemäße Fehler-Stacktraces für das Wasm-Debugging

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

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

In der alten Version von Chrome auf der linken Seite wird die Quelle der Quelle (z.B. dsquare) nicht in den Fehler-Stacktraces angezeigt, in der neuen Version auf der rechten Seite jedoch schon.

Chromium-Problem: 1189161

Vorschaukanäle herunterladen

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