Neuerungen in den Entwicklertools (Chrome 85)

Jecelyn Yeen

Stilbearbeitung für CSS-in-JS-Frameworks

Das Steuerfeld „Stile“ bietet jetzt eine bessere Unterstützung für das Bearbeiten von Stilen, die mit den CSSOM-APIs (CSS Object Model) erstellt wurden. Viele CSS-in-JS-Frameworks und ‑Bibliotheken verwenden die CSSOM-APIs im Hintergrund, um Stile zu erstellen.

Sie können jetzt auch Styles bearbeiten, die in JavaScript mit Constructable Stylesheets hinzugefügt wurden. Konstruierbare Stylesheets sind eine neue Möglichkeit, wiederverwendbare Styles zu erstellen und zu verteilen, wenn Shadow DOM verwendet wird.

Die mit CSSStyleSheet (CSSOM-APIs) hinzugefügten h1-Stile konnten beispielsweise bisher nicht bearbeitet werden. Folgende Elemente können jetzt im Bereich „Stile“ bearbeitet werden:

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 Das ist neu in Lighthouse 6.0. Eine vollständige Liste aller Änderungen finden Sie in den Versionshinweisen zu Version 6.0.0.

In Lighthouse 6.0 werden drei neue Messwerte im 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 Labormesswert, der als Proxy für einen weiteren Core Web Vital-Messwert, First Input Delay, dient.

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

Chromium-Problem #772558

Einstellung von First Meaningful Paint (FMP)

Die Messwert „Inhalte weitgehend gezeichnet“ (First Meaningful Paint, FMP) wird in Lighthouse 6.0 nicht mehr unterstützt. Sie wurde auch aus dem Bereich „Leistung“ entfernt. Largest Contentful Paint ist der empfohlene Ersatz für FMP. Eine Erklärung, warum der Messwert eingestellt wurde, finden Sie unter Inhalte weitgehend gezeichnet.

Chromium-Problem #1096008

Unterstützung für neue JavaScript-Funktionen

DevTools bietet jetzt eine bessere Unterstützung für einige der neuesten JavaScript-Sprachfunktionen:

• Autovervollständigung für die Syntax Optional Chaining: Die automatische Vervollständigung von Eigenschaften in der Console unterstützt jetzt die Syntax „Optional Chaining“, z.B. funktioniert name?. jetzt zusätzlich zu name. und name[.
• Syntaxhervorhebung für private Felder: Private Klassenfelder werden jetzt im Quellenbereich richtig syntaxhervorgehoben und formatiert.
• Syntaxhervorhebung für den Nullish Coalescing Operator: DevTools gibt den Nullish Coalescing Operator jetzt im Bereich „Quellen“ korrekt formatiert aus.

Chromium-Probleme #1083214, #1073903, #1083797

Neue Warnungen zu App-Verknüpfungen im Manifestbereich

App-Verknüpfungen helfen Nutzern, gängige oder empfohlene Aufgaben in einer Web-App schnell zu starten.

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

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

Chromium-Problem #955497

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

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

Chromium-Problem #1066579

Einheitliche Anzeige des Bereichs „Berechnet“

Der Bereich „Berechnet“ im Elementbereich wird jetzt bei allen Ansichtsfenstergrößen einheitlich als Bereich angezeigt. Bisher wurde der Bereich „Berechnet“ mit dem Bereich „Stile“ zusammengeführt, wenn der Darstellungsbereich der DevTools schmal war.

Chromium-Problem #1073899

Bytecode-Offsets für WebAssembly-Dateien

In DevTools werden jetzt Bytecode-Offsets verwendet, um Zeilennummern der Wasm-Disassemblierung anzuzeigen. So wird deutlicher, dass es sich um Binärdaten handelt, und es ist konsistenter mit der Art und Weise, wie die Wasm-Laufzeit auf Speicherorte verweist.

Chromium-Problem #1071432

Zeilenweises Kopieren und Ausschneiden im Quellenbereich

Wenn Sie im Editor für den Quellenbereich „Kopieren“ oder „Ausschneiden“ ausführen, ohne etwas auszuwählen, kopiert oder schneidet DevTools den Inhalt der aktuellen Zeile aus. Im folgenden Video 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 Konsoleneinstellungen

Gruppierung ähnlicher Konsolennachrichten aufheben

Die Ein/Aus-Schaltfläche Ähnliche gruppieren in den Konsoleneinstellungen gilt jetzt auch für doppelte Nachrichten. Bisher galt sie nur für ähnliche Nachrichten.

Bisher wurden die Nachrichten hello in DevTools beispielsweise nicht entgruppiert, obwohl Ähnliche gruppieren deaktiviert ist. Die hello-Nachrichten werden 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 ist das Verhalten der Einstellung mit anderen Optionen in den Konsoleneinstellungen konsistent.

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 wurden in den Entwicklertools keine Informationen zum Code-Caching angezeigt, wenn kein Code-Caching stattgefunden hat.

Chromium-Problem 912581

Abstimmung der Navigationszeit im Bereich „Leistung“

Im Bereich „Leistung“ wurden die Zeiten in den Linealen bisher basierend auf dem Startzeitpunkt der Aufzeichnung angezeigt. Das hat sich jetzt für Aufzeichnungen geändert, in denen der Nutzer navigiert. In DevTools werden jetzt Linealzeiten relativ zur Navigation angezeigt.

Außerdem haben wir die Zeiten für die Ereignisse 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 Zeiten übereinstimmen.

Chromium-Problem #974550

Neue Symbole für Haltepunkte, bedingte Haltepunkte und Logpoints

Das Steuerfeld Quellen hat neue Designs für Haltepunkte, bedingte Haltepunkte und Logpoints. Breakpoints haben ein neues Flag-Design mit helleren und freundlicheren Farben. Es wurden Symbole hinzugefügt, um bedingte Haltepunkte und Logpoints zu unterscheiden.

Chromium-Problem #1041830

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

• Sie können uns Feedback und Funktionsanfragen unter crbug.com senden.
• Melden Sie ein DevTools-Problem in den Entwicklertools über das more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Senden Sie einen Tweet an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu Neuerungen in den DevTools oder den YouTube-Videos mit DevTools-Tipps.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.