Neuerungen in den Entwicklertools (Chrome 96)

Jecelyn Yeen

Funktion in der Vorabversion: Neuer Bereich „CSS-Übersicht“

Im neuen CSS-Übersichtsmenü können Sie potenzielle CSS-Verbesserungen auf Ihrer Seite ermitteln. Öffnen Sie den Bereich CSS-Übersicht und klicken Sie dann auf Übersicht aufnehmen, 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 die Liste der Elemente aufzurufen, für die dieselbe Farbe verwendet wird. Klicken Sie auf ein Element, um es im Bereich Elemente zu öffnen.

Das Steuerfeld CSS-Übersicht ist eine Vorschaufunktion. Unser Team arbeitet fortlaufend an dieser Funktion und wir würden uns sehr über Ihr Feedback freuen.

Weitere Informationen zum Steuerfeld „CSS-Übersicht“

Bereich „CSS-Übersicht“

Chromium-Problem: 1254557

Wiederherstellung und Verbesserung der Bearbeitungs- und Kopierfunktionen für CSS-Längen

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

Außerdem können Sie den Einheitenwert per Drag-and-drop anpassen und den Einheitentyp über das Drop-down-Menü aktualisieren. Diese Funktion zum Erstellen von Add-on-Längen sollte sich nicht auf die primäre Bearbeitung als Text auswirken.

Wenn Sie Probleme feststellen, melden Sie diese bitte über goo.gle/length-feedback.

Sie können die Funktion über das Kästchen Einstellungen > Tests > Tools zum Erstellen von CSS-Längen im Bereich „Stile“ aktivieren deaktivieren.

Chromium-Probleme: 1259088, 1172993

Tab-Updates rendern

CSS-Medienfunktion „prefers-contrast“ emulieren

CSS-Medienfunktion „prefers-contrast“ emulieren

Mit der Media-Funktion prefers-contrast wird erkannt, 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

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 das automatische dunkle Design von Chrome aktiviert ist.

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

Automatisches dunkles Design von Chrome emulieren

Chromium-Problem: 1243309

Deklarationen als JavaScript im Bereich „Styles“ kopieren

Im Kontextmenü wurden zwei neue Optionen hinzugefügt, mit denen Sie CSS-Regeln ganz einfach als JavaScript-Attribute kopieren können. Diese Optionen 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 paddingLeft: '1.5rem' in die Zwischenablage kopiert.

Deklaration als JavaScript kopieren

Chromium-Problem: 1253635

Neuer Tab „Nutzlast“ im Netzwerkbereich

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

Tab „Nutzlast“ im Netzwerkbereich

Chromium-Problem: 1214030

Verbesserte Darstellung von Eigenschaften im Bereich „Eigenschaften“

Im Bereich Properties (Attribute) werden jetzt nur noch relevante Attribute anstelle aller Attribute der Instanz angezeigt. DOM-Prototypen und -Methoden wurden entfernt.

Dank der Verbesserungen im Bereich Eigenschaften in Chrome 95 können Sie die relevanten Eigenschaften jetzt leichter finden.

Anzeige von Eigenschaften im Bereich „Eigenschaften“

Chromium-Problem: 1226262

Konsolenupdates

Option zum Ausblenden von CORS-Fehlern in der Konsole

Sie können CORS-Fehler in der Konsole ausblenden. Da die CORS-Fehler jetzt auf dem Tab „Probleme“ gemeldet werden, können Sie sie 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 Konsole

Chromium-Problem: 1251176

Vorschau und Bewertung von Intl-Objekten in der Console

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

Intl-Objekte in der Konsole

Chromium-Problem: 1073804

Konsistente Async-Stacktraces

In der Console werden jetzt async-Stacktraces für async-Funktionen gemeldet, um mit anderen asynchronen Aufgaben und dem, was im Aufrufstack angezeigt wird, übereinzustimmen.

Async-Stacktraces

Chromium-Problem: 1254259

Seitenleiste der Konsole beibehalten

Die Seitenleiste der Konsole wird beibehalten. In Chrome 94 haben wir die bevorstehende Einstellung der Konsolen-Seitenleiste angekündigt und Entwickler um Feedback und Bedenken gebeten.

Wir haben jetzt genügend Feedback zur Einstellung erhalten und werden die Seitenleiste verbessern, anstatt sie zu entfernen.

Konsolenseitenleiste

Chromium-Probleme: 1232937, 1255586

Bereich „Application Cache“ im Bereich „Anwendung“ ist veraltet

Der Bereich Anwendungscache im Bereich „Anwendung“ wurde entfernt, da AppCache in Chrome und anderen Chromium-basierten Browsern nicht mehr unterstützt wird.

Chromium-Problem: 1084190

[Experimentell] Neuer Bereich „Reporting API“ im Anwendungsbereich

Die Reporting API wurde entwickelt, um Ihnen bei der Überwachung von Sicherheitsverstößen auf Ihrer Seite, eingestellten API-Aufrufen und mehr zu helfen.

Wenn dieses Testvorhaben aktiviert ist, können Sie den Berichtsstatus jetzt im neuen Bereich Reporting API im Bereich Anwendung aufrufen.

Der Bereich Endpunkte befindet sich derzeit noch in der Entwicklung. Es werden also noch keine Reporting-Endpunkte angezeigt.

Weitere Informationen zur Reporting API finden Sie in diesem Artikel.

Bereich „Reporting API“ im Bereich „Anwendung“

Chromium-Problem: 1205856

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.

Neu in den Entwicklertools

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