Neuerungen in den Entwicklertools (Chrome 85)

Jecelyn Yeen

Stilbearbeitung für CSS-in-JS-Frameworks

Im Bereich „Stile“ können jetzt Stile, die mit den CSS Object Model (CSSOM) APIs erstellt wurden, besser bearbeitet werden. Viele CSS-in-JS-Frameworks und ‑Bibliotheken verwenden die CSSOM APIs, um Stile zu erstellen.

Mit Constructable Stylesheets können Sie jetzt auch Styles bearbeiten, die in JavaScript hinzugefügt wurden. Mit konstruierbaren Stylesheets können Sie bei Verwendung von Shadow DOM auf neue Weise wiederverwendbare Stile erstellen und verteilen.

Beispielsweise konnten die h1-Stile, die mit CSSStyleSheet (CSSOM APIs) hinzugefügt wurden, bisher nicht bearbeitet werden. Im Bereich „Stile“ können jetzt folgende Elemente bearbeitet werden:

Chromium-Problem #946975

Lighthouse 6 im Leuchtturm-Steuerfeld

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

In 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 von Google. TBT ist ein Proxy für Labormessungen für einen weiteren Core Web Vital, die First Input Delay.

Die Formel für den Leistungsbewertungswert wurde ebenfalls neu gewichtet, um die Ladezeit für Nutzer besser widerzuspiegeln.

Neue Leistungsmesswerte in Lighthouse 6.0

Chromium-Problem #772558

Einstellung von „Inhalte weitgehend gezeichnet“ (First Meaningful Paint, FMP)

„Inhalte weitgehend gezeichnet“ (First Meaningful Paint, FMP) wird in Lighthouse 6.0 eingestellt. Außerdem wurde sie aus dem Bereich „Leistung“ entfernt. Largest Contentful Paint ist der empfohlene Ersatz für FMP. Eine Erklärung dazu, warum der Messwert eingestellt wurde, finden Sie unter Inhalte weitgehend gezeichnet.

Chromium-Problem #1096008

Unterstützung neuer JavaScript-Funktionen

In den DevTools werden jetzt einige der neuesten JavaScript-Sprachfunktionen besser unterstützt:

  • Autovervollständigung der Syntax für optionale Verknüpfungen: Die automatische Property-Vervollständigung in der Console unterstützt jetzt die Syntax für optionale Verknüpfungen. Beispielsweise funktioniert jetzt zusätzlich zu name. und name[ auch name?..
  • Syntaxhervorhebung für private Felder: Private Klassenfelder werden jetzt im Bereich „Quellen“ korrekt syntaxhervorgehoben und schön formatiert.
  • Syntaxhervorhebung für den Null-Verschmelzungsoperator: In den Entwicklertools wird der Null-Verschmelzungsoperator im Bereich „Quellen“ jetzt korrekt in einer lesbaren Formatierung dargestellt.

Chromium-Probleme #1083214, #1073903, #1083797

Neue Warnungen zu App-Verknüpfungen im Manifest-Bereich

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

Im Bereich „Manifest“ werden jetzt Warnungen angezeigt, wenn:

  • die Symbole für App-Verknüpfungen sind kleiner als 96 × 96 Pixel
  • die Symbole für App-Verknüpfungen und Manifeste 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 Bereich „Netzwerk“ enthält jetzt Service Worker-respondWith-Ereignisse. respondWith ist der Zeitraum zwischen dem Zeitpunkt unmittelbar vor dem Ausführen des fetch-Ereignishandlers des Dienstarbeiters und dem Zeitpunkt, zu dem das respondWith-Versprechen des fetch-Handlers erfüllt wird.

Service Worker-Methode „respondWith“

Chromium-Problem #1066579

Einheitliche Darstellung des Bereichs „Berechnet“

Der Bereich „Berechnet“ im Bereich „Elemente“ wird jetzt bei allen Ansichtsgrößen einheitlich als Bereich angezeigt. Bisher wurde der Bereich „Berechnet“ im Bereich „Stile“ zusammengeführt, wenn die Breite des Darstellungsbereichs der DevTools schmal war.

Chromium-Problem #1073899

Bytecode-Abweichungen für WebAssembly-Dateien

In den DevTools werden jetzt Bytecode-Abweichungen für die Anzeige von Zeilennummern der Wasm-Deassemblage verwendet. So wird deutlicher, dass es sich um Binärdaten handelt, und es entspricht eher der Art und Weise, wie die Wasm-Laufzeit auf Speicherorte verweist.

Bytecode-Abweichungen

Chromium-Problem #1071432

Zeilenweises Kopieren und Ausschneiden im Bereich „Quellen“

Wenn Sie im Editor des Bereichs „Quellen“ ohne Auswahl kopieren oder ausschneiden, werden in den DevTools der Inhalt der aktuellen Zeile kopiert oder ausgeschnitten. Im Video unten befindet sich der Cursor beispielsweise am Ende von Zeile 1. Nachdem Sie die Tastenkombination zum Ausschneiden gedrückt haben, wird die gesamte Zeile in die Zwischenablage kopiert und gelöscht.

Chromium-Problem #800028

Änderungen an den Console-Einstellungen

Gleiche Konsolenmelden aufheben

Die Option Ähnliche Nachrichten gruppieren in den Konsoleneinstellungen gilt jetzt auch für doppelte Nachrichten. Bisher galt sie nur für ähnliche Nachrichten.

Bisher wurden die Meldungen hello in den DevTools beispielsweise nicht gruppiert, obwohl die Option Ähnliche gruppieren deaktiviert war. Die hello Nachrichten sind jetzt nicht mehr gruppiert:

Chromium-Problem #1082963

Einstellungen für Nur ausgewählter Kontext beibehalten

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

Nur ausgewählter Kontext

Chromium-Problem #1055875

Aktualisierungen des Bereichs „Leistung“

Informationen zum JavaScript-Kompilierungscache im Bereich „Leistung“

Informationen zum JavaScript-Kompilierungscache werden jetzt immer auf dem Tab „Zusammenfassung“ im Bereich „Leistung“ angezeigt. Bisher wurde in den DevTools nichts zum Code-Caching angezeigt, wenn kein Code-Caching stattfand.

Informationen zum JavaScript-Kompilierungscache

Chromium-Problem #912581

Im Bereich „Leistung“ wurden in den Zeitleisten Zeiten angezeigt, die auf dem Zeitpunkt der Aufzeichnung basierten. Das hat sich jetzt für Aufzeichnungen geändert, bei denen sich der Nutzer bewegt. In den DevTools werden jetzt die Zeitangaben des Lineals relativ zur Navigation angezeigt.

Navigationszeiten im Bereich „Leistung“ ausrichten

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

Chromium-Problem #974550

Neue Symbole für Haltepunkte, bedingte Haltepunkte und Logpunkte

Im Bereich Quellen gibt es neue Designs für Haltestellen, bedingte Haltestellen und Logpoints. Die Breakpoints haben ein überarbeitetes Flaggendesign mit helleren und freundlicheren Farben erhalten. Symbole werden hinzugefügt, um bedingte Haltepunkte und Logpoints zu unterscheiden.

Haltepunkte

Chromium-Problem #1041830

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

Neu in den DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.