Neuerungen in den Entwicklertools (Chrome 96)

Jecelyn Yeen

Vorschaufunktion: Neuer Bereich „CSS-Übersicht“

Im neuen Bereich CSS-Übersicht sehen Sie mögliche CSS-Verbesserungen auf Ihrer Seite. Öffnen Sie den Bereich CSS-Übersicht und klicken Sie dann auf Übersicht erfassen, um einen Bericht über das CSS Ihrer Seite zu erstellen.

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

Das Steuerfeld CSS-Übersicht ist eine Vorschaufunktion. Unser Team arbeitet derzeit noch daran und wir freuen uns über Ihr Feedback zu weiteren Verbesserungen.

In diesem Artikel erhalten Sie weitere Informationen zum Bereich CSS-Übersicht.

Bereich „CSS-Übersicht“

Chromium-Problem: 1254557

Wiederhergestellter und verbesserter Ablauf zum Bearbeiten und Kopieren von CSS-Längen

Die Funktionen CSS kopieren und Als Text bearbeiten werden für CSS-Properties mit Länge wiederhergestellt. Diese Möglichkeiten funktionieren in der letzten Version nicht mehr.

Außerdem können Sie den Wert für die Einheit per Drag-and-drop anpassen und den Einheitentyp über das Drop-down-Menü aktualisieren. Diese Add-on-Bearbeitungsfunktion sollte sich nicht auf die primäre Änderung als Text auswirken.

Falls Probleme aufgetreten sind, melde sie bitte unter goo.gle/length-feedback.

Sie können die Funktion deaktivieren, indem Sie unter Einstellungen > Experimente > CSS-Längen-Authoring-Tools im Bereich „Stile“ aktivieren klicken.

Chromium-Probleme: 1259088, 1172993

Aktualisierungen des Tabs „Rendering“

CSS-Medienfunktion „Bevorzugt-Kontrast“ emulieren

CSS-Medienfunktion „Bevorzugt-Kontrast“ emulieren

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

Öffnen Sie das Befehlsmenü, führen Sie den Befehl Rendering anzeigen aus und öffnen Sie das Drop-down-Menü CSS-Medienfunktion emulieren – Kontrast.

Chromium-Problem: 1139777

Chrome-Funktion „Dunkles Design“ emulieren

Mit den Entwicklertools kannst du das automatische dunkle Design emulieren. So kannst du auf einen Blick sehen, wie deine Seite aussieht, wenn das automatische dunkle Design in Chrome aktiviert ist.

Mit Chrome 96 wird ein Ursprungstest für das automatische dunkle Design auf Android-Geräten eingeführt. Mit dieser Funktion wendet der Browser ein automatisch generiertes dunkles Design auf helle Websites an, wenn der Nutzer im Betriebssystem das dunkle Design aktiviert hat.

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

Chrome-Funktion „Dunkles Design“ emulieren

Chromium-Problem: 1243309

Deklarationen als JavaScript in den Bereich „Stile“ kopieren

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

Klicken Sie im Bereich Styles 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 Steuerfeld „Netzwerk“

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

Tab „Nutzlast“ im Steuerfeld „Netzwerk“

Chromium-Problem: 1214030

Verbesserte Anzeige von Eigenschaften im Bereich „Eigenschaften“

Im Bereich Eigenschaften werden jetzt nur relevante Attribute anstatt aller Eigenschaften der Instanz angezeigt. DOM-Prototypen und -Methoden wurden entfernt.

Zusammen mit den Verbesserungen im Bereich Eigenschaften in Chrome 95 kannst du die relevanten Eigenschaften jetzt leichter finden.

Anzeige von Eigenschaften im Bereich „Eigenschaften“

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“ aufgeführt werden, kann das Ausblenden von CORS-Fehlern in der Konsole dazu beitragen, die Übersichtlichkeit zu verbessern.

Klicken Sie in der Console auf das Symbol Einstellungen und entfernen Sie das Häkchen bei CORS-Fehler in der Konsole anzeigen.

Option zum Ausblenden von CORS-Fehlern in der Console

Chromium-Problem: 1251176

Vorschau und Bewertung von Intl-Objekten in der Console

Die International-Objekte haben jetzt eine korrekte Vorschau und werden in der Konsole aufmerksam ausgewertet. Bisher wurden die Intl-Objekte nicht sorgfältig ausgewertet.

Internationale Objekte in der Console

Chromium-Problem: 1073804

Konsistente asynchrone Stacktraces

In der Konsole werden jetzt async-Stacktraces für async-Funktionen angezeigt, um mit anderen asynchronen Aufgaben und den Inhalten im Aufrufstack konsistent zu sein.

asynchrone Stacktraces

Chromium-Problem: 1254259

Seitenleiste der Console beibehalten

Die Seitenleiste der Console bleibt erhalten. In Chrome 94 haben wir die bevorstehende Einstellung der Seitenleiste der Console angekündigt und Entwickler um Feedback und Bedenken gebeten.

Wir haben genug Feedback zu den Einstellungshinweisen erhalten und werden daran arbeiten, die Seitenleiste zu verbessern, anstatt sie zu entfernen.

Seitenleiste der Console

Chromium-Probleme: 1232937, 1255586

Veralteter Bereich „Anwendungscache“ im Bereich „Anwendung“

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

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

Wenn dieser Test aktiviert ist, wird der Status der Berichte jetzt im neuen Bereich Reporting API im Bereich Anwendung angezeigt.

Der Bereich Endpunkte befindet sich noch in der aktiven Entwicklung (es werden vorerst keine Berichtendpunkte angezeigt).

Weitere Informationen zur Reporting API erhalten Sie in diesem Artikel.

Bereich „Reporting API“ im Steuerfeld „Anwendung“

Chromium-Problem: 1205856

Vorschaukanäle herunterladen

Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome Erste Schritte

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde abgebrochen.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59