Neuerungen in den Entwicklertools (Chrome 91)

Web Vitals-Informationen werden im Bereich „Leistung“ eingeblendet

Bewegen Sie den Mauszeiger auf eine Web Vitals-Markierung im Bereich Leistung, um zu sehen, ob die Leistung gut ist, verbessert werden muss oder schlecht ist.

Chromium-Problem: 1147872

CSS-Scroll-Snap visualisieren

Sie können jetzt das scroll-snap-Symbol im Elemente-Steuerfeld ein- und ausschalten, um die CSS-Scroll-Snap-Ausrichtung zu prüfen.

Wenn auf ein HTML-Element auf Ihrer Seite (z.B. auf dieser Demoseite) scroll-snap-type angewendet wird, sehen Sie im Bereich Elemente ein scroll-snap-Symbol daneben. Klicken Sie auf das Symbol, um ein Scroll-Snap-Overlay auf der Seite ein- oder auszublenden.

Im Beispiel oben sehen Sie Punktmarkierungen an den Kanten des Snaps. Der Scrollport hat eine durchgezogene Umrisslinie, die Snap-Elemente haben gestrichelte Umrisslinien. Der Scroll-Padding-Bereich ist grün und der Scroll-Margin-Bereich orange.

Chromium-Problem: 862450

Neues Arbeitsspeicher-Prüftool

Mit dem neuen Memory Inspector können Sie ein ArrayBuffer in JavaScript sowie den Wasm-Speicher untersuchen.

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

Aktualisieren Sie die Seite. Maximieren Sie im rechten Debugger-Bereich den Abschnitt Scope. Beachten Sie das neue Symbol neben dem Wert für Puffer. Klicken Sie darauf, um den Memory Inspector aufzurufen.

Weitere Informationen zum Untersuchen von JavaScript-ArrayBuffer und WebAssembly.Memory mit diesem neuen Memory Inspector finden Sie in der Dokumentation.

Chromium-Problem: 1166577

Neuer Bereich für Badgeeinstellungen im Bereich „Elemente“

Sie können Badges jetzt über die Badge-Einstellungen im Bereich Elemente selektiv aktivieren oder deaktivieren. Mit dieser Funktion können Sie die wichtigen Badges anpassen und sich auf sie konzentrieren, während Sie Webseiten untersuchen.

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

Chromium-Problem: 1066772

Optimierte Bildvorschau mit Informationen zum Seitenverhältnis

In den Bildvorschauen im Bereich Elemente werden jetzt mehr Informationen zum Bild angezeigt, z. B. 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.

Informationen zum Bildseitenverhältnis sind auch im Bereich Netzwerk verfügbar, wenn Sie auf das Bild klicken, um es in der Vorschau anzusehen.

Chromium-Probleme: 1149832, 1170656

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

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

Auf dem Tab Network conditions (Netzwerkbedingungen) wurde die neue Option Accepted Content-Encodings (Akzeptierte Content-Codierungen) hinzugefügt. Konfigurieren Sie es, um zu testen, ob Serverantworten in Browsern, die gzip, brotli oder andere zukünftige Content-Encodings nicht unterstützen, korrekt codiert werden.

Chromium-Problem: 1162042

Verbesserungen am Bereich „Stile“

Neue Tastenkombination zum Aufrufen des berechneten Werts im Bereich „Stile“

Sie können jetzt mit der rechten Maustaste auf eine CSS-Eigenschaft im Bereich Styles 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 Autocomplete-Benutzeroberfläche des Bereichs „Styles“ erkennt jetzt das CSS-Keyword accent-color. Damit können Webentwickler die Akzentfarbe für UI-Steuerelemente (z. B. Checkbox, Optionsfeld) angeben, die vom Element generiert werden.

Die CSS-Eigenschaft accent-color ist derzeit experimentell. Aktivieren Sie chrome://flags/#enable-experimental-web-platform-features, um es 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 unterteilt, um die Schwere besser zu kennzeichnen. Sie können den Tab Probleme öffnen, indem Sie in der Konsole auf die Schaltfläche Anzahl der Probleme klicken.

• Seitenfehler (rot): Probleme, die sich unmittelbar auf die Seitenfunktionen auswirken, z. B. wenn keine korrekten CORS-Header festgelegt werden.
• Bevorstehende schwerwiegende Änderungen (gelb): Probleme, die über eine bevorstehende, inkompatible Änderung der Webplattform informieren, die zu einem Verlust der Seitenfunktionen führen kann (z.B. Warnung vor bevorstehenden CORS RFC 1918-Änderungen).
• Mögliche Verbesserungen (blau): Mögliche Verbesserungen auf der Seite, die die grundlegende Funktionalität der Seite derzeit nicht beeinträchtigen (z.B. Probleme mit der Barrierefreiheit)

Chromium-Problem: 1183241

Vertrauenswürdige Tokens löschen

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

Trust Token ist eine neue API, mit der Betrugsversuche leichter verhindert und Bots besser von Konten echter Menschen unterschieden werden können. Dabei wird kein passives Tracking eingesetzt. Weitere Informationen zu Trust Tokens

Chromium-Problem: 1126824

Details zu blockierten Funktionen in der Ansicht „Frame-Details“ ansehen

Details zu blockierten Funktionen finden Sie jetzt in der Ansicht „Frame-Details“ im Abschnitt Berechtigungsrichtlinie.

Öffnen Sie diese Demoseite. Rufen Sie den Bereich Anwendung auf und wählen Sie einen Frame aus. Scrollen Sie im Abschnitt Berechtigungsrichtlinie zum Attribut Deaktivierte Funktionen. Klicken Sie auf Details anzeigen, um die Gründe für die Blockierung des Features aufzurufen. Klicken Sie auf das Symbol neben jeder Richtlinie, um zum iFrame oder zur Netzwerkanfrage zu gelangen, die die Funktion blockiert hat.

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

Chromium-Problem: 1158827

Tests in den Testeinstellungen filtern

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

Neue Spalte Vary Header im Bereich „Cache-Speicher“

In der neuen Spalte Vary Header im Bereich Cache Storage (Cache-Speicher) können Sie den HTTP-Antwortheader Vary aufrufen.

Chromium-Problem: 1186049

Verbesserungen am Quellenbereich

Unterstützung für neue JavaScript-Funktionen

DevTools unterstützen jetzt die neue JavaScript-Sprachfunktion private brand check, auch bekannt als #foo in obj.

Mit diesem Feature für private Marken wird der in-Operator erweitert, um das Testen von privaten Klassenfeldern für ein beliebiges Objekt zu unterstützen.

Probieren Sie es im Bereich Konsole und Quellen aus. Sie können die privaten Felder auch im Bereich Debugger im Abschnitt Bereich ansehen.

Chromium-Problem: 11374

Erweiterte Unterstützung für das Debugging mit Breakpoints

DevTools setzt jetzt Haltepunkte in mehreren Skripts korrekt. Moderne JavaScript-Bundler (z. B. Webpack, Rollup) unterstützen die Codeaufteilung. Es gibt Szenarien, in denen eine freigegebene Komponente in mehrere Routen (Code-Splits) aufgenommen werden kann.

Bisher konnten in den Entwicklertools nur Breakpoints für einen Rohstandort festgelegt werden. Dank dieser neuesten Verbesserung kann DevTools Haltepunkte an allen relevanten Stellen richtig setzen.

Chromium-Probleme: 1142705, 979000, 1180794

Unterstützung der Vorschau beim Bewegen des Mauszeigers mit der []-Notation

In den DevTools wird jetzt eine Hover-Vorschau für JavaScript-Member-Ausdrücke unterstützt, die die []-Notation im Bereich Quellen verwenden.

Chromium-Problem: 1178305

Verbesserte Gliederung von HTML-Dateien

DevTools bietet jetzt eine bessere Unterstützung für die Gliederung von HTML-Dateien. Öffnen Sie im Bereich Quellen eine HTML-Datei. Sie können die Codeübersicht mit der Tastenkombination Cmd + Umschalt + O auf einem Mac oder Strg + Umschalt + O unter Windows ein- und ausblenden.

Im folgenden Beispiel werden in den Entwicklertools jetzt alle Funktionen im Umriss korrekt aufgeführt. Bisher wurden in DevTools nur einige der Funktionen angezeigt.

Chromium-Problem: 761019, 1191465

Korrekte Fehler-Stacktraces für das Wasm-Debugging

DevTools löst jetzt Inline-Funktionsaufrufe auf und zeigt korrekte Fehler-Stacktraces für das Wasm-Debugging an.

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

In der alten Chrome-Version auf der linken Seite wird der Quellspeicherort (z.B. dsquare) in den Fehler-Stack-Traces nicht angezeigt, in der neuen Version auf der rechten Seite schon.

Chromium-Problem: 1189161

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.

• Sie können uns Feedback und Funktionsanfragen unter crbug.com senden.
• Melden Sie ein DevTools-Problem in den Entwicklertools über das more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Senden Sie einen Tweet an @ChromeDevTools.
• Hinterlassen Sie Kommentare in den YouTube-Videos zu den Neuerungen in den DevTools oder den YouTube-Videos mit DevTools-Tipps.

Neu in den Entwicklertools

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