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 im Elemente-Steuerfeld das scroll-snap-Symbol ein- oder ausblenden, um die CSS-Ausrichtung für Scroll-Snaps 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> neben dem Element das scroll-snap-Symbol. 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, während die Snap-Elemente eine gestrichelte Umrisslinie haben. 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 Bereich. 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 Badges in den Elementen
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 Seitenverhältnis des Bildes 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 Netzwerkbedingungen wurde die neue Option 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 sind.
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 Benutzeroberfläche für die automatische Vervollständigung im Bereich „Styles“ erkennt jetzt das CSS-Keyword accent-color. Damit können Webentwickler die Akzentfarbe für UI-Steuerelemente (z. B. Kontrollkästchen, 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