Neuerungen in den Entwicklertools (Chrome 85)

Stilbearbeitung für CSS-in-JS-Frameworks

Der Bereich „Stile“ bietet jetzt eine bessere Unterstützung für das Bearbeiten von Stilen, die mit dem CSS-Objekt erstellt wurden. Model (CSSOM) APIs. Viele CSS-in-JS-Frameworks und -Bibliotheken nutzen die internen CSSOM-APIs, um konstruieren Sie Stile.

Sie können in JavaScript hinzugefügte Stile jetzt auch mit konstruierbaren Stylesheets bearbeiten. Bebaubar Stylesheets bieten eine neue Möglichkeit, wiederverwendbare Stile zu erstellen und zu verteilen, wenn Sie Shadow DOM verwenden.

Beispielsweise können die mit CSSStyleSheet (CSSOM APIs) hinzugefügten h1-Stile bisher nicht bearbeitet werden. Sie können jetzt im Bereich „Stile“ bearbeitet werden:

Chromium-Problem #946975

Lighthouse 6 im Lighthouse-Steuerfeld

Im Lighthouse-Steuerfeld wird jetzt Lighthouse 6 ausgeführt. Im Artikel Neu in Lighthouse 6.0 erhalten Sie weitere Zusammenfassung aller wichtigen Änderungen oder in den Versionshinweisen zu Version 6.0.0 finden Sie eine vollständige Liste aller Änderungen.

Mit Lighthouse 6.0 werden drei neue Messwerte in den Bericht aufgenommen: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) und Total Blocking Time (TBT). LCP und CLS sind zwei der neuen Core Web Vitals und TBT als Analyse-Proxy für einen anderen Core Web Vitals-Messwert, First Input Verzögerung.

Auch die Formel für die Leistungsbewertung wurde neu gewichtet, um die Anforderungen der Nutzer besser widerzuspiegeln. Wird geladen... Nutzererfahrung.

Chromium-Problem #772558

Einstellung von First Meaningful Paint (FMP)

First Meaningful Paint (FMP) wurde in Lighthouse 6.0 eingestellt. Sie wurde auch aus der Bereich „Leistung“. Largest Contentful Paint ist der empfohlene Ersatz für FMP. Siehe Erste Meaningful Paint zur Erläuterung, warum es 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 Verkettung – automatische Vervollständigung der Syntax – automatische Vervollständigung von Eigenschaften jetzt in der Konsole unterstützt optionale Verkettungssyntax, z.B. name?. funktioniert jetzt zusätzlich zu name. und name[.
• Syntaxhervorhebung für private Felder: Privatklassenfelder funktionieren jetzt korrekt. im Bereich „Quellen“ die Syntax hervorgehoben und schön ausgedruckt.
• Syntaxhervorhebung für Nullish Coalescing-Operator – die Entwicklertools werden jetzt ordnungsgemäß gedruckt Operator "nullish Coalescing" im Bereich "Quellen"

Chromium-Probleme #1083214, #1073903, #1083797

Neue Warnungen zu App-Verknüpfungen im Manifestbereich

Mit App-Verknüpfungen können Nutzer schnell häufige oder empfohlene Aufgaben in einer Web-App starten.

Im Manifestbereich werden jetzt Warnungen in folgenden Fällen angezeigt:

• Die App-Verknüpfungssymbole sind kleiner als 96 x 96 Pixel.
• App-Verknüpfungssymbole und Manifestsymbole sind nicht quadratisch, da sie ignoriert werden.

Chromium-Problem #955497

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

Der Tab „Timing“ des Steuerfelds „Netzwerk“ enthält jetzt respondWith-Ereignisse für Service Worker. respondWith ist der Zeitpunkt unmittelbar vor der Ausführung des fetch-Event-Handlers des Service Workers zu dem Zeitpunkt, an dem der Das respondWith-Promise des fetch-Handlers wurde erledigt.

Chromium-Problem #1066579

Konsistente Anzeige des berechneten Bereichs

Der berechnete Bereich im Steuerfeld „Elemente“ wird jetzt einheitlich über den gesamten Darstellungsbereich hinweg angezeigt Größen. Bisher wurde der berechnete Bereich im Bereich „Stile“ zusammengeführt, wenn die Breite des Entwicklertools Darstellungsbereich schmal war.

Chromium-Problem #1073899

Bytecode-Offsets für WebAssembly-Dateien

Die Entwicklertools verwenden jetzt Bytecode-Offsets für die Anzeige der Zeilennummern der Wasm-Demontage. So können Sie deutlicher, dass Sie sich die Binärdaten ansehen, und stimmt besser mit der Art und Weise überein, wie die Wasm-Laufzeit auf Standorte verweist.

Chromium-Problem #1071432

Zeilenweises Kopieren und Ausschneiden im Bereich „Quellen“

Wenn Sie im Editor für den Bereich „Quellen“ Inhalte kopieren oder ausschneiden, ohne eine Auswahl zu treffen, kopiert die Entwicklertools oder den aktuellen Zeileninhalt ausschneiden. Im folgenden Video befindet sich der Cursor beispielsweise am Ende des 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 identischer Konsolennachrichten aufheben

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

In den Entwicklertools wurde beispielsweise die Gruppierung der Nachrichten "hello" in den Entwicklertools nicht aufgehoben, obwohl die Gruppierung Ähnliche gruppieren deaktiviert ist. Jetzt ist die Gruppierung der hello-Nachrichten aufgehoben:

Chromium-Problem #1082963

Einstellungen für Nur ausgewählten Kontext werden beibehalten.

Die Einstellungen unter Nur Kontext in den Console-Einstellungen bleiben erhalten. Vorher waren die Einstellungen wurden jedes Mal zurückgesetzt, wenn Sie die Entwicklertools schließen und wieder öffnen. Durch diese Änderung wird das Einstellungsverhalten Übereinstimmung mit anderen Optionen in den Console-Einstellungen.

Chromium-Problem #1055875

Updates im Bereich „Leistung“

Informationen zum JavaScript-Kompilierungs-Cache im Bereich „Leistung“

Informationen zum JavaScript-Kompilierungs-Cache werden jetzt immer auf dem Tab „Zusammenfassung“ der Seite Bereich „Leistung“. Bisher wurde in den Entwicklertools nichts mit dem Code-Caching angezeigt, wenn Code Caching stattfindet.

Chromium-Problem #912581

Ausrichtung der Navigation im Steuerfeld „Leistung“

Im Bereich „Leistung“ wurden in den Linealen die Zeiten für den Beginn der Aufzeichnung angezeigt. Dies hat für Aufzeichnungen geändert, bei denen der Nutzer navigiert und in denen die Entwicklertools nun die Zeitangaben des Lineals relativ zum in die Navigation aufnehmen.

Wir haben auch die Zeiten für DOMContentLoaded, First Paint, First Contentful Paint und Largest aktualisiert Contentful Paint-Ereignisse relativ zum Beginn der Navigation, d. h., sie entsprechen dem von PerformanceObserver gemeldete Zeiten.

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 haben ein überarbeitetes Flaggendesign mit helleren und freundlicheren Farben. Symbole werden hinzugefügt zu zwischen bedingten Haltepunkten und Logpoints unterscheiden.

Chromium-Problem #1041830

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