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 dann 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.

Weitere Informationen zum Bereich „CSS-Übersicht“

Steuerfeld „CSS-Übersicht“

Chromium-Problem: 1254557

Die Bearbeitung und das Kopieren der CSS-Länge wurde 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 Maßeinheitswert per Drag-and-drop anpassen und den Maßeinheitstyp ü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.

Wenn Sie Probleme finden, melden Sie sie bitte unter goo.gle/length-feedback.

Sie können sie deaktivieren, indem Sie das Kästchen CSS-Tools zur Längenbearbeitung im Bereich „Styles“ aktivieren unter Einstellungen > Experimente anklicken.

Chromium-Probleme: 1259088, 1172993

Aktualisierungen des Rendering-Tabs

CSS-Medienfunktion „prefers-contrast“ 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.

In Chrome 96 wird ein Ursprungstest für das automatische dunkle Design auf Android eingeführt. Mit dieser Funktion wendet der Browser ein automatisch generiertes dunkles Design auf Websites mit hellem Design an, wenn der Nutzer im Betriebssystem dunkle Designs 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-Properties 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.

Durch die Verbesserungen im Bereich Properties (Properties) in Chrome 95 können Sie die relevanten Properties jetzt noch einfacher 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 CORS-Fehler jetzt auf dem Tab „Probleme“ gemeldet werden, können Sie CORS-Fehler in der Konsole ausblenden, um die Übersichtlichkeit zu verbessern.

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.

Intl-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 anstehende Einstellung der Console-Seitenleiste angekündigt und Entwickler um Feedback und Bedenken gebeten.

Wir haben jetzt genug Feedback zur Ankündigung der Einstellung erhalten und werden die Seitenleiste nicht entfernen, sondern verbessern.

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 „Anwendung“

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. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

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 den DevTools

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