Neuerungen in den Entwicklertools (Chrome 96)

Jecelyn Yeen

Vorschaufunktion: Neues Bereich „CSS-Übersicht“

Im neuen Bereich CSS-Übersicht sehen Sie potenzielle CSS-Verbesserungen auf Ihrer Seite. Ö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 die Liste der Elemente aufzurufen, auf die dieselbe Farbe angewendet wird. Klicken Sie auf ein Element, um es im Steuerfeld Elemente zu öffnen.

Der Bereich CSS-Übersicht ist eine Vorschaufunktion. Unser Team arbeitet noch daran und freuen uns auf dein Feedback, damit wir die Funktion verbessern können.

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

Bereich „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 werden für CSS-Eigenschaften mit Länge wiederhergestellt. Diese Funktionen sind in der letzten Version fehlerhaft.

Außerdem können Sie den Wert der Einheit durch Ziehen anpassen und den Einheitentyp über das Drop-down-Menü aktualisieren. Diese Funktion zum Erstellen von Add-ons sollte sich nicht auf die primäre Änderung als Text auswirken.

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

Sie können sie über Einstellungen > Tests > CSS-Längen-Authoring-Tools im Bereich „Stile“ aktivieren deaktivieren.

Chromium-Probleme: 1259088, 1172993

Aktualisierungen des Rendering-Tabs

CSS-Funktion „Kontrast-Kontrast bevorzugen“ emulieren

CSS-Funktion „Kontrast-Kontrast bevorzugen“ emulieren

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

Öffnen Sie das Befehlsmenü, führen Sie den Befehl Darstellung anzeigen aus und legen Sie das Drop-down-Menü CSS-Medienfunktion „präferenzen“ fest.

Chromium-Problem: 1139777

Funktion „Automatisches dunkles Design“ von Chrome emulieren

Mit den Entwicklertools können Sie das automatische dunkle Design emulieren und so auf einfache Weise sehen, wie Ihre Seite aussieht, wenn das automatische dunkle Design von 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 Darstellung anzeigen aus und legen Sie das Drop-down-Menü Automatischen dunklen Modus emulieren fest.

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 Tastenkombinationen sind besonders 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 beispielsweise paddingLeft: '1.5rem' in die Zwischenablage kopiert.

Deklaration als JavaScript kopieren

Chromium-Problem: 1253635

Neuer Nutzlast-Tab im Steuerfeld „Network“ (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 Headers verfügbar.

Tab „Nutzlast“ im Steuerfeld „Netzwerk“

Chromium-Problem: 1214030

Verbesserte Anzeige der Eigenschaften im Bereich „Eigenschaften“

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

Zusammen mit den 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 Console

Sie können CORS-Fehler in der Console 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 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

Richtige Vorschau und Auswertung von Intl-Objekten in der Console

Die Intl-Objekte verfügen jetzt über eine korrekte Vorschau und werden in der Console intensiv ausgewertet. Zuvor wurden die Intl-Objekte nicht eifrig ausgewertet.

Internationale Objekte in der Console

Chromium-Problem: 1073804

Konsistente asynchrone Stacktraces

Die Console meldet jetzt async-Stacktraces für async-Funktionen, damit sie mit anderen asynchronen Aufgaben übereinstimmen und mit dem übereinstimmen, was im Aufrufstack angezeigt wird.

asynchrone Stacktraces

Chromium-Problem: 1254259

Seitenleiste der Konsole 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 jetzt genug Feedback zu den Einstellungshinweisen erhalten und werden die Seitenleiste verbessern, anstatt sie zu entfernen.

Seitenleiste der Konsole

Chromium-Probleme: 1232937, 1255586

Bereich „Veralteter Anwendungs-Cache“ im Anwendungsbereich

Der Bereich Anwendungscache im Anwendungsbereich wurde entfernt, da die Unterstützung für AppCache in Chrome und anderen Chromium-basierten Browsern entfernt wurde.

Chromium-Problem: 1084190

[Experimentell] Neuer Bereich „Reporting API“ im Anwendungsbereich

Die Reporting API wurde entwickelt, um Sie unter anderem bei der Überwachung von Sicherheitsverstößen auf Ihrer Seite und eingestellten API-Aufrufen zu unterstützen.

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

Der Abschnitt Endpunkte befindet sich derzeit noch in der Entwicklungsphase und enthält vorerst keine Endpunkte für die Berichterstellung.

Weitere Informationen zur Reporting API finden Sie in diesem Artikel.

Bereich „Reporting API“ im Anwendungsbereich

Chromium-Problem: 1205856

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Ü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 es tun.

Kontaktaufnahme mit dem Team für Chrome-Entwicklertools

Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.

  • Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • Twittern Sie unter @ChromeDevTools.
  • Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 101

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 gekündigt.

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