Neuerungen in den Entwicklertools (Chrome 96)

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 wir freuen uns auf dein Feedback für weitere Verbesserungen.

In diesem Artikel erfahren Sie mehr über den 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 unter Einstellungen > Tests > Aktivieren Sie Authoring-Tools für die CSS-Länge im Bereich „Stile“.

Chromium-Probleme: 1259088, 1172993

Aktualisierungen des Rendering-Tabs

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.

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.

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.

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.

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.

Chromium-Problem: 1251176

Richtige Vorschau und Auswertung von Intl-Objekten in der Console

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

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.

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.

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.

Chromium-Problem: 1205856

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhalten Sie Zugriff auf die neuesten Entwicklertools, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, bevor Ihre 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.
• Problem mit den Entwicklertools über Weitere Optionen melden > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
• 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