Neuerungen in den Entwicklertools (Chrome 85)

Stilbearbeitung für CSS-in-JS-Frameworks

Im Bereich „Styles“ werden jetzt Bearbeitungsstile unterstützt, die mit den CSS Object Model (CSSOM) APIs erstellt wurden. Viele CSS-in-JS-Frameworks und -Bibliotheken verwenden die CSSOM APIs im Hintergrund, um Stile zu erstellen.

Sie können jetzt auch in JavaScript hinzugefügte Stile mithilfe von konstruierbaren Stylesheets bearbeiten. Konstruierbare Stylesheets sind eine neue Möglichkeit, wiederverwendbare Stile bei Verwendung von Shadow DOM zu erstellen und zu verteilen.

Die mit CSSStyleSheet hinzugefügten h1-Stile (CSSOM APIs) können beispielsweise bisher nicht bearbeitet werden. Im Bereich „Stile“ können Sie jetzt Folgendes bearbeiten:

Chromium-Problem #946975

Lighthouse 6 im Lighthouse-Bereich

Im Lighthouse-Bereich wird jetzt Lighthouse 6 ausgeführt. Eine Zusammenfassung aller wichtigen Änderungen finden Sie unter Neuerungen in Lighthouse 6.0. Eine vollständige Liste aller Änderungen finden Sie in den Versionshinweisen für Version 6.0.0.

Mit Lighthouse 6.0 werden drei neue Messwerte für den Bericht eingeführt: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) und Total Blocking Time (TBT). LCP und CLS sind zwei der neuen Core Web Vitals von Google. TBT ist ein Lab-Mess-Proxy für einen weiteren Core Web Vital-Wert, First Input Delay.

Die Formel für die Leistungsbewertung wurde neu gewichtet, um die Ladegeschwindigkeit der Nutzer besser widerzuspiegeln.

Neue Leistungsmesswerte in Lighthouse 6.0

Chromium-Problem #772558

Einstellung von First Meaningful Paint (FMP)

First Meaningful Paint (FMP) wurde in Lighthouse 6.0 eingestellt. Sie wurde auch aus dem Steuerfeld „Leistung“ entfernt. Largest Contentful Paint ist der empfohlene Ersatz für FMP. Unter First Meaningful Paint finden Sie eine Erklärung, warum die API eingestellt wurde.

Chromium-Problem #1096008

Unterstützung neuer JavaScript-Funktionen

Die Entwicklertools bieten jetzt eine bessere Unterstützung für einige der neuesten JavaScript-Sprachfunktionen:

  • Optionale Verkettungssyntax: Autovervollständigung von Properties in der Console unterstützt jetzt eine optionale Verkettungssyntax, z.B. name?. funktioniert jetzt zusätzlich zu name. und name[.
  • Syntaxhervorhebung für private Felder: Felder von Privatklassen werden jetzt im Quellenbereich korrekt hervorgehoben und optimiert.
  • Syntaxhervorhebung für Nullish-Coalescing-Operator: In den Entwicklertools wird der Nullish-Koalescing-Operator im Bereich „Quellen“ jetzt korrekt gedruckt.

Chromium-Probleme #1083214, #1073903, #1083797

Warnungen bei neuen App-Verknüpfungen im Manifestbereich

App-Verknüpfungen helfen Nutzern, häufige oder empfohlene Aufgaben in einer Webanwendung schnell zu starten.

Im Manifestbereich werden jetzt Warnungen angezeigt, wenn:

  • Die Symbole für die App-Verknüpfungen sind kleiner als 96 x 96 Pixel.
  • Die App-Verknüpfungssymbole und Manifestsymbole sind nicht quadratisch (sie werden ignoriert)

Warnungen zu App-Verknüpfungen

Chromium-Problem #955497

Service Worker-respondWith-Ereignisse auf dem Tab „Timing“

Der Tab „Timing“ im Steuerfeld „Netzwerk“ enthält jetzt respondWith-Ereignisse für Service Worker. respondWith ist die Zeit, die unmittelbar vor der Ausführung des Event-Handlers des Service Workers fetch bis zu dem Zeitpunkt ist, zu dem das Promise respondWith des Handlers fetch erfüllt ist.

Service Worker „responseWith“

Chromium-Problem #1066579

Konsistente Anzeige des Bereichs „Berechnet“

Der Bereich „Berechnet“ im Bereich „Elemente“ wird jetzt einheitlich als Bereich für alle Größen des Darstellungsbereichs angezeigt. Bisher wurde der Bereich „Berechnet“ mit dem Bereich „Stile“ zusammengeführt, wenn die Breite des Darstellungsbereichs der Entwicklertools schmal war.

Chromium-Problem #1073899

Bytecode-Offsets für WebAssembly-Dateien

In den Entwicklertools werden jetzt Bytecode-Offsets zur Anzeige der Zeilennummern von Wasm-Auseinanderbauen verwendet. Dadurch wird deutlicher, dass es sich um Binärdaten handelt, und es stimmt besser mit der Art und Weise überein, wie die Wasm-Laufzeit auf Standorte verweist.

Bytecode-Offsets

Chromium-Problem #1071432

Zeilenweises Kopieren und Ausschneiden im Bereich „Quellen“

Wenn Sie Daten kopieren oder ausschneiden, ohne im Editor für den Bereich „Quellen“ ausgewählt zu werden, kopieren oder schneiden die Entwicklertools den aktuellen Linieninhalt aus. Im folgenden Video befindet sich der Cursor beispielsweise am Ende von Zeile 1. Nach dem Drücken der Tastenkombination „Ausschneiden“ wird die gesamte Zeile in die Zwischenablage kopiert und gelöscht.

Chromium-Problem #800028

Aktualisierung der Console-Einstellungen

Gruppierung derselben Konsolennachrichten aufheben

Die Ein/Aus-Schaltfläche Ähnliche gruppieren in den Console-Einstellungen gilt jetzt auch für doppelte Nachrichten. Zuvor wurde sie nur auf ähnliche Nachrichten angewendet.

Beispielsweise wurde die Gruppierung der Nachrichten hello in den Entwicklertools bisher nicht aufgehoben, obwohl die Option Gruppe ähnlich deaktiviert ist. Jetzt wird die Gruppierung der hello-Nachrichten aufgehoben:

Chromium-Problem #1082963

Einstellungen für Nur ausgewählten Kontext beibehalten

Die Einstellung Nur ausgewählter Kontext in den Console-Einstellungen wird jetzt beibehalten. Bisher wurden die Einstellungen jedes Mal zurückgesetzt, wenn die Entwicklertools geschlossen und wieder geöffnet wurden. Durch diese Änderung entspricht das Verhalten der Einstellung anderen Console-Einstellungen.

Nur ausgewählter Kontext

Chromium-Problem #1055875

Neuerungen im Bereich „Leistung“

Informationen zum JavaScript-Kompilierungscache im Bereich „Leistung“

Informationen aus dem JavaScript-Kompilierungscache werden jetzt im Steuerfeld „Leistung“ immer auf dem Tab „Zusammenfassung“ angezeigt. Früher haben die Entwicklertools nichts mit dem Code-Caching angezeigt, wenn das Code-Caching nicht stattgefunden hat.

Informationen zum JavaScript-Kompilierungscache

Chromium-Problem #912581

Im Steuerfeld „Leistung“ werden die Zeiten in den Linealen basierend auf dem Beginn der Aufzeichnung angezeigt. Dies hat sich jetzt für Aufzeichnungen geändert, bei denen der Nutzer navigiert. Die Entwicklertools zeigen jetzt stattdessen die Linealzeiten relativ zur Navigation an.

Navigationstiming im Bereich „Leistung“ ausrichten

Außerdem haben wir die Zeiten für DOMContentLoaded-, First Paint-, First Contentful Paint- und Largest Contentful Paint-Ereignisse so aktualisiert, dass sie sich auf den Beginn der Navigation beziehen. Das bedeutet, dass sie den von PerformanceObserver gemeldeten Zeitangaben entsprechen.

Chromium-Problem #974550

Neue Symbole für Haltepunkte, bedingte Haltepunkte und Logpoints

Der Bereich Quellen hat ein neues Design für Haltepunkte, bedingte Haltepunkte und Logpoints. Haltepunkte erhalten ein neues Flag-Design mit helleren und freundlicheren Farben. Zur Unterscheidung bedingter Haltepunkte und Logpoints werden Symbole hinzugefügt.

Haltepunkte

Chromium-Problem #1041830

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