Neuerungen in den Entwicklertools (Chrome 85)

Stilbearbeitung für CSS-in-JS-Frameworks

Der Bereich „Stile“ unterstützt jetzt das Bearbeiten von Stilen, die mit den CSS Object Models (CSSOM) APIs erstellt wurden. Viele CSS-in-JS-Frameworks und -Bibliotheken verwenden die internen CSSOM APIs zum Erstellen von Stilen.

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

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

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 von Google. TBT ist ein Lab-Analyseproxy für einen weiteren Core Web Vital, „First Input Delay“.

Außerdem wurde die Formel für die Leistungsbewertung neu gewichtet, um die Nutzerfreundlichkeit beim Laden 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 wird erläutert, 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 mit automatischer Vervollständigung: Die automatische Vervollständigung von Eigenschaften in der Console unterstützt jetzt optionale Verkettungssyntax. Beispielsweise funktioniert name?. jetzt zusätzlich zu name. und name[.
  • Syntaxhervorhebung für private Felder: Felder der privaten Klasse werden im Bereich „Quellen“ jetzt korrekt mit Syntax hervorgehoben und hervorgehoben.
  • Syntaxhervorhebung für Nullish-Koalescing-Operator: In den Entwicklertools wird der Nullish-Koalescing-Operator im Bereich „Quellen“ jetzt korrekt dargestellt.

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.

Warnungen zu App-Verknüpfungen

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, ab dem der fetch-Event-Handler des Service Workers bis zu dem Zeitpunkt ausgeführt wird, an dem das respondWith-Promise des fetch-Handlers erfüllt ist.

Service Worker „responseWith“

Chromium-Problem #1066579

Konsistente Anzeige des berechneten Bereichs

Der berechnete Bereich im Bereich „Elemente“ wird jetzt einheitlich über alle Größen des Darstellungsbereichs hinweg angezeigt. Bisher wurde der berechnete Bereich im Bereich „Stile“ zusammengeführt, wenn der Darstellungsbereich der Entwicklertools kleiner 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. Dadurch wird deutlicher, dass Sie sich die Binärdaten ansehen, und es stimmt mehr mit der Art und Weise, wie die Wasm-Laufzeit Standorte referenziert.

Bytecode-Offsets

Chromium-Problem #1071432

Zeilenweises Kopieren und Ausschneiden im Bereich „Quellen“

Wenn Sie im Editor für den Bereich „Quellen“ das Kopieren oder Ausschneiden ohne Auswahl ausführen, wird der aktuelle Zeileninhalt von den Entwicklertools kopiert oder ausgeschnitten. 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 identischer Konsolennachrichten aufheben

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

In der Vergangenheit wurde beispielsweise die Gruppierung der Nachrichten hello in den Entwicklertools nicht aufgehoben, obwohl das Kästchen Ähnliche Gruppe 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. 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 anderen Optionen der Console-Einstellungen.

Nur ausgewählter Kontext

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“ des Steuerfelds „Leistung“ angezeigt. Bisher wurden in den Entwicklertools keine Informationen zum Code-Caching angezeigt, wenn das Code-Caching nicht stattfand.

Informationen zum JavaScript-Kompilierungs-Cache

Chromium-Problem #912581

Im Bereich „Leistung“ wurden in den Linealen die Zeiten für den Beginn der Aufzeichnung angezeigt. Dies hat sich nun für Aufzeichnungen geändert, in denen der Nutzer navigiert. In den Entwicklertools werden jetzt die Linealzeiten relativ zur Navigation angezeigt.

Timing der Navigation im Bereich „Leistung“ anpassen

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 und somit mit den von PerformanceObserver gemeldeten Zeiten übereinstimmen.

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. Zur Unterscheidung bedingter Haltepunkte und Logpoints werden Symbole hinzugefügt.

Haltepunkte

Chromium-Problem #1041830

Vorschaukanäle herunterladen

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 101

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 gekündigt.

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