Neuerungen in den Entwicklertools (Chrome 96)

Jecelyn Yeen

Vorabversion: Neues Steuerfeld „CSS-Übersicht“

Im neuen Bereich CSS-Übersicht können Sie potenzielle CSS-Verbesserungen auf Ihrer Seite erkennen. Öffnen Sie den Bereich CSS-Übersicht und klicken Sie auf Übersicht erfassen, um einen Bericht zum CSS Ihrer Seite zu erstellen.

Sie können die Informationen weiter aufschlüsseln. Klicken Sie beispielsweise im Bereich Farben auf eine Farbe, um eine Liste der Elemente aufzurufen, auf die dieselbe Farbe angewendet wird. Klicken Sie auf ein Element, um es im Bereich Elemente zu öffnen.

Der Bereich CSS-Übersicht ist eine Vorschaufunktion. Unser Team arbeitet noch aktiv daran und freut sich über Feedback für weitere Verbesserungen.

In diesem Artikel erfahren Sie mehr über den Bereich CSS-Übersicht.

Steuerfeld „CSS-Übersicht“

Chromium-Problem: 1254557

Die Bearbeitungs- und Kopierfunktionen für CSS-Längen wurden wiederhergestellt und verbessert.

Die Funktionen CSS kopieren und als Text bearbeiten sind für CSS-Eigenschaften mit Länge wieder verfügbar. Diese Funktionen funktionieren in der letzten Version nicht.

Außerdem können Sie den Wert der Einheit durch Ziehen anpassen und den Einheitentyp über das Drop-down-Menü aktualisieren. Diese Funktion zur Autorisierung der Add-on-Länge sollte sich nicht auf die primäre Bearbeitung als Text auswirken.

Bitte melde uns über goo.gle/length-feedback, wenn du Probleme festgestellt hast.

Sie können sie unter Einstellungen > Experimente > Tools zum Erstellen von CSS-Abständen im Bereich „Styles“ aktivieren deaktivieren.

Chromium-Probleme: 1259088, 1172993

Rendering-Tab aktualisieren

CSS-Funktion „Kontrast-Kontrast bevorzugen“ emulieren

CSS-Medienfunktion „prefers-contrast“ emulieren

Mit der Medienfunktion prefers-contrast wird ermittelt, ob der Nutzer mehr oder weniger Kontrast auf der Seite angefordert hat.

Öffnen Sie das Befehlsmenü, führen Sie den Befehl Rendering anzeigen aus und legen Sie dann das Drop-down-Menü CSS-Medienfunktion „prefers-contrast“ emulieren fest.

Chromium-Problem: 1139777

Die Funktion „Automatisches dunkles Design“ von Chrome emulieren

Mit den Entwicklertools können Sie das automatische dunkle Design emulieren, um ganz einfach zu sehen, wie Ihre Seite aussieht, wenn der automatische dunkle Modus in Chrome aktiviert ist.

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.

Öffnen Sie das Befehlsmenü, führen Sie den Befehl Rendering anzeigen aus und legen Sie dann das Drop-down-Menü Automatischen dunklen Modus emulieren fest.

Die Funktion „Automatisches dunkles Design“ von Chrome emulieren

Chromium-Problem: 1243309

Deklarationen im Bereich „Stile“ als JavaScript kopieren

Im Kontextmenü wurden zwei neue Optionen hinzugefügt, mit denen Sie CSS-Regeln ganz einfach als JavaScript-Eigenschaften kopieren können. Diese Tastenkürzel sind besonders praktisch für Entwickler, die mit CSS-in-JS-Bibliotheken arbeiten.

Klicken Sie im Bereich Stile mit der rechten Maustaste auf eine CSS-Regel. Sie können Deklaration als JS kopieren auswählen, um eine einzelne Regel zu kopieren, oder Alle Deklarationen als JS kopieren, um alle Regeln zu kopieren.

Im folgenden Beispiel wird beispielsweise paddingLeft: '1.5rem' in die Zwischenablage kopiert.

Deklaration als JavaScript kopieren

Chromium-Problem: 1253635

Neuer Tab „Nutzlast“ im Bereich „Netzwerk“

Verwenden Sie den neuen Tab Nutzlast im Bereich Netzwerk, wenn Sie eine Netzwerkanfrage mit Nutzlast prüfen. Bisher waren die Nutzlastinformationen auf dem Tab Header verfügbar.

Tab „Nutzlast“ im Bereich „Netzwerk“

Chromium-Problem: 1214030

Die Darstellung von Properties im Bereich „Properties“ wurde verbessert.

Im Bereich Properties werden jetzt nur relevante Properties angezeigt, anstatt alle Properties der Instanz. DOM-Prototypen und ‑Methoden wurden entfernt.

In Chrome 95 wurden außerdem die Verbesserungen im Bereich Properties (Properties) eingeführt, sodass Sie die relevanten Properties jetzt noch leichter finden.

Darstellung von Properties im Bereich „Properties“

Chromium-Problem: 1226262

Konsolenupdates

Option zum Ausblenden von CORS-Fehlern in der Console

Sie können CORS-Fehler in der Konsole ausblenden. Da die CORS-Fehler jetzt auf dem Tab „Probleme“ angezeigt werden, können Sie die CORS-Fehler in der Konsole ausblenden, um eine bessere Übersicht zu erhalten.

Klicken Sie in der Konsole auf das Symbol Einstellungen und entfernen Sie das Häkchen aus dem Kästchen CORS-Fehler in der Konsole anzeigen.

Option zum Ausblenden von CORS-Fehlern in der Console

Chromium-Problem: 1251176

Richtige Vorschau und Bewertung von Intl-Objekten in der Console

Die Intl-Objekte haben jetzt eine richtige Vorschau und werden in der Console sofort ausgewertet. Bisher wurden die Intl-Objekte nicht sofort ausgewertet.

Internationale Objekte in der Console

Chromium-Problem: 1073804

Konsistente Async-Stacktraces

In der Console werden jetzt async-Stack-Traces für async-Funktionen ausgegeben, die mit anderen asynchronen Aufgaben und den im Aufrufstack angezeigten Informationen übereinstimmen.

Async-Stacktraces

Chromium-Problem: 1254259

Seitenleiste der Konsole beibehalten

Die Seitenleiste der Konsole wird nicht entfernt. In Chrome 94 haben wir die bevorstehende Einstellung der Seitenleiste der Console angekündigt und Entwickler um Feedback und Bedenken gebeten.

Wir haben jetzt genug Feedback zur Ankündigung der Einstellung erhalten und werden daran arbeiten, die Seitenleiste zu verbessern, anstatt sie zu entfernen.

Seitenleiste der Console

Chromium-Probleme: 1232937, 1255586

Der Bereich „Application Cache“ im Bereich „Anwendung“ ist eingestellt

Der Bereich Anwendungscache im Bereich „Anwendung“ wurde entfernt, da die Unterstützung für AppCache aus Chrome und anderen Chromium-basierten Browsern entfernt wurde.

Chromium-Problem: 1084190

[Experimentell] Neuer Bereich „Reporting API“ im Bereich „Anwendungen“

Mit der Reporting API können Sie unter anderem Sicherheitsverstöße auf Ihrer Seite und eingestellte API-Aufrufe im Blick behalten.

Wenn dieser Test aktiviert ist, können Sie den Berichtsstatus jetzt im neuen Bereich Reporting API im Bereich Anwendung einsehen.

Der Bereich Endpunkte befindet sich derzeit noch in der Entwicklungsphase. Derzeit werden dort keine Endpunkte für Berichte angezeigt.

In diesem Artikel finden Sie weitere Informationen zur Reporting API.

Bereich „Reporting API“ im Bereich „Anwendung“

Chromium-Problem: 1205856

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Ü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 dies tun.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

Neu in DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.