Neuerungen in den Entwicklertools (Chrome 88)

Jecelyn Yeen

Schnellerer Start der Entwicklertools

Die Entwicklertools starten jetzt ~37% schneller in Bezug auf die JavaScript-Kompilierung (von 6,9 auf 5 Sekunden). 🎉

Das Team führte einige Optimierungen durch, um den Leistungsaufwand bei Serialisierung, Parsen und Deserialisierung während des Start-ups zu reduzieren.

In einem kommenden Engineering-Blogpost wird die Implementierung im Detail erläutert. Mehr dazu demnächst!

Chromium-Problem: 1029427

Neue CSS-Tools zur Winkelvisualisierung

Die Entwicklertools bieten jetzt eine bessere Unterstützung für das CSS-Winkel-Debugging.

CSS-Winkel

Wenn auf ein HTML-Element auf Ihrer Seite ein CSS-Winkel angewendet wird (z.B. background: linear-gradient(angle, color-stop1, color-stop2), transform: rotate(angle)), wird im Bereich „Stile“ neben dem Winkel ein Uhrensymbol angezeigt. Klicke auf das Uhrensymbol, um das Uhr-Overlay umzuschalten. Klicke auf eine beliebige Stelle in der Uhr oder ziehe die Nadel, um den Winkel zu ändern!

Es gibt auch Maus- und Tastenkombinationen zum Ändern des Winkelwerts. Weitere Informationen finden Sie in unserer Dokumentation.

Chromium-Probleme: 1126178, 1138633

Nicht unterstützte Bildtypen emulieren

In den Entwicklertools wurden auf dem Tab „Rendering“ zwei neue Emulationen hinzugefügt, mit denen du die AVIF- und WebP-Bildformate deaktivieren kannst. Diese neuen Emulationen erleichtern es Entwicklern, verschiedene Szenarien beim Laden von Bildern zu testen, ohne den Browser wechseln zu müssen.

Angenommen, wir haben den folgenden HTML-Code, um ein Bild in AVIF und WebP für neuere Browser mit einem PNG-Fallback-Bild für ältere Browser bereitzustellen.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

Öffnen Sie den Tab Rendering, wählen Sie „AVIF-Bildformat deaktivieren“ aus und aktualisieren Sie die Seite. Bewegen Sie den Mauszeiger auf img src. Die aktuelle Bildquelle (currentSrc) ist jetzt das WebP-Fallback-Bild.

Bildtypen emulieren

Chromium-Problem: 1130556

Größe des Speicherkontingents im Bereich „Speicher“ simulieren

Sie können jetzt die Größe des Speicherkontingents im Bereich „Speicher“ überschreiben. Mit diesem Feature können Sie verschiedene Geräte simulieren und das Verhalten Ihrer Anwendungen in Szenarien mit geringer Laufwerksverfügbarkeit testen.

Gehen Sie zu Anwendung > Speicher, aktivieren Sie das Kästchen Benutzerdefiniertes Speicherkontingent simulieren und geben Sie eine gültige Zahl ein, um das Speicherkontingent zu simulieren.

Größe des Speicherkontingents simulieren

Chromium-Probleme: 945786, 1146985

Neue Web Vitals-Spur in den Aufzeichnungen im Bereich „Leistung“

Bei Leistungsaufzeichnungen können jetzt auch Web Vitals-Daten angezeigt werden.

Nachdem Sie die Ladeleistung erfasst haben, klicken Sie im Bereich „Leistung“ das Kästchen Web Vitals an, um die neue Web Vitals-Spur zu sehen.

Hier werden derzeit Web Vitals-Informationen wie First Contentful Paint (FCP), Largest Contentful Paint (LCP) und Layout Shift (LS) angezeigt.

Unter web.dev/vitals findest du weitere Informationen dazu, wie du die Nutzererfahrung mit den WebVitals-Messwerten optimieren kannst.

Web Vitals-Spur

Chromium-Problem: –

CORS-Fehler im Steuerfeld „Netzwerk“ melden

In den Entwicklertools wird jetzt ein CORS-Fehler angezeigt, wenn eine Netzwerkanfrage aufgrund von Cross-Origin Resource Sharing (CORS) fehlgeschlagen ist.

Sehen Sie sich im Bereich Netzwerk die fehlgeschlagene CORS-Netzwerkanfrage an. In der Statusspalte wird "CORS_error" angezeigt. Bewegen Sie den Mauszeiger auf den Fehler. In der Kurzinfo wird jetzt der Fehlercode angezeigt. Bisher wurde in den Entwicklertools für CORS-Fehler nur der allgemeine Status (fehlgeschlagen) angezeigt.

Damit legen Sie den Grundstein für unsere nächsten Verbesserungen, die eine detailliertere Beschreibung der CORS-Probleme bieten.

CORS-Fehler

Chromium-Problem: 1141824

Aktualisierungen der Frame-Detailansicht

Informationen zur ursprungsübergreifenden Isolierung in der Frame-Detailansicht

Der Status der ursprungsübergreifenden Isolierung wird jetzt im Abschnitt Sicherheit und Isolierung angezeigt.

Im neuen Bereich API-Verfügbarkeit wird die Verfügbarkeit von SharedArrayBuffers (SAB) angezeigt und angegeben, ob sie mit postMessage() freigegeben werden können.

Es wird eine Einstellungswarnung angezeigt, wenn das SAB und postMessage() derzeit verfügbar sind. Der Kontext ist jedoch nicht ursprungsübergreifend isoliert. Weitere Informationen zur ursprungsübergreifenden Isolierung und dazu, warum sie für Features wie SharedArrayBuffers erforderlich ist, finden Sie in diesem Artikel.

Ursprungsübergreifende Informationen

Chromium-Problem: 1139899

Informationen zu neuen Web Workern in der Frame-Detailansicht

In den Entwicklertools werden jetzt dedizierte Web-Worker unter dem Frame angezeigt, in dem sie erstellt wurden.

Maximieren Sie im Bereich Anwendung einen Frame mit Web-Workern und wählen Sie dann unter der Worker-Baumstruktur einen Worker aus, um die Details des Web-Workers aufzurufen.

Informationen zu Web Workern

Chromium-Probleme: 1122507, 1051466

Details zum Eröffnungsrahmen für geöffnete Fenster anzeigen

Sie können jetzt die Details dazu anzeigen, welcher Frame zum Öffnen eines weiteren Fensters geführt hat.

Wählen Sie unter der Struktur Frames ein geöffnetes Fenster aus, um die Fensterdetails aufzurufen. Klicken Sie auf den Link Opener Frame, um den Opener-Frame im Bereich „Elements“ einzublenden.

Details zum Eröffnungsframe

Chromium-Problem: 1107766

Netzwerkbereich über Service Workers-Bereich öffnen

Über den neuen Link Netzwerkanfragen können Sie sich alle Informationen zum Routing von Service Worker-Anfragen (SW) ansehen. Dies bietet Entwicklern zusätzlichen Kontext beim Debugging der Software.

Rufen Sie Application > Service Workers (Anwendung > Service Workers) auf und klicken Sie auf die Network requests (Netzwerkanfragen) eines SW. Im unteren Bereich wird der Bereich Netzwerk geöffnet. Dort sehen Sie alle Service Worker-Anfragen. Die Netzwerkanfragen werden nach "is:service-worker-intercepted" gefiltert.

Netzwerkbereich in Service Workers öffnen

Chromium-Problem: –

Neue Kopieroptionen im Steuerfeld „Netzwerk“

Property-Wert kopieren

Mit der neuen Option Wert kopieren im Kontextmenü können Sie den Attributwert einer Netzwerkanfrage kopieren.

Property-Wert kopieren

Klicken Sie im Bereich Netzwerk auf eine Netzwerkanfrage, um den Bereich Headers zu öffnen. Klicken Sie mit der rechten Maustaste auf eine der Eigenschaften im folgenden Abschnitt: Anfrage-Nutzlast (JSON) Formulardaten Abfragestring-Parameter Anfrageheader-Antwortheader

Anschließend können Sie Wert kopieren auswählen, um den Eigenschaftswert in die Zwischenablage zu kopieren.

Chromium-Problem: 1132084

Stacktrace für Netzwerkinitiator kopieren

Klicken Sie mit der rechten Maustaste auf eine Netzwerkanfrage und wählen Sie Stacktrace kopieren aus, um den Stacktrace in die Zwischenablage zu kopieren.

Stacktrace kopieren

Chromium-Problem: 1139615

Updates zur Wasm-Fehlerbehebung

Vorschau des Wasm-Variablenwerts bei Mouseover anzeigen

Wenn der Mauszeiger in der WebAssembly-(Wasm-)-Auseinandersetzung mit dem Mauszeiger auf eine Variable bewegt wird, während sie an einem Haltepunkt pausiert ist, wird in den Entwicklertools jetzt der aktuelle Wert der Variablen angezeigt.

Öffnen Sie im Bereich Quellen eine Wasm-Datei, setzen Sie einen Haltepunkt und aktualisieren Sie die Seite. Bewegen Sie den Mauszeiger auf eine Variable, um den Wert zu sehen.

Vorschau der Wasm-Variable bei Mouseover anzeigen

Chromium-Probleme: 1058836, 1071432

Wasm-Variable in der Console auswerten

Sie können jetzt die Wasm-Variable in der Console auswerten, während sie an einem Haltepunkt pausiert ist.

In diesem Beispiel setzen wir einen Haltepunkt in die Zeile local.get $input. Geben Sie beim Debugging $input in die Console ein. Damit wird der aktuelle Wert der Variablen zurückgegeben – in diesem Fall 4.

Wasm-Variable in der Console auswerten

Chromium-Problem: 1127914

Einheitliche Maßeinheiten für Datei-/Arbeitsspeichergrößen

Entwicklertools verwenden jetzt konsistent KB für die Anzeige von Datei-/Arbeitsspeichergrößen. Bisher wurden DevTools gemischt in KB (1.000 Byte) und KiB (1.024 Byte). Im Steuerfeld „Network“ wurden zuvor beispielsweise „kB“-Labels verwendet, aber tatsächlich wurden Berechnungen mit KiB durchgeführt, was zu unnötiger Verwirrung führte.

Chromium-Problem: 1035309

Pseudoelemente im Steuerfeld „Elemente“ hervorheben

In den Entwicklertools wurde der Farbkontrast von Pseudoelementen erhöht, damit du sie besser erkennen kannst.

Pseudoelemente hervorheben

Chromium-Problem: 1143833

Experimentelle Funktionen

CSS-Flexbox-Debugging-Tools

Flexbox-Debugging-Tools sind bald verfügbar!

Zunächst wird in den Entwicklertools im Bereich „Elemente“ jetzt für Elemente, auf die display: flex angewendet wurde, das Logo flex angezeigt.

Darüber hinaus werden in den folgenden Flexbox-Eigenschaften neue Ausrichtungssymbole hinzugefügt:

  • flex-direction
  • align-items
  • align-content
  • align-self
  • justify-items
  • justify-content

Darüber hinaus sind diese Symbole kontextsensitiv. Die Symbolrichtung wird folgendermaßen angepasst:

  • flex-direction
  • direction
  • writing-mode

Diese Symbole sollen Ihnen helfen, das Flexbox-Layout der Seite besser zu visualisieren.

CSS-Flex-Debugging

Hier finden Sie das Designdokument der Flexbox-Toolfunktionen. Weitere Funktionen werden demnächst hinzugefügt.

Probieren Sie sie aus und lassen Sie uns wissen, was Sie davon halten!

Chromium-Probleme: 1144090, 1139945

Tastenkombinationen für Akkorde anpassen

Die Entwicklertools haben seit der letzten Version experimentelle Unterstützung für das Anpassen von Tastenkombinationen hinzugefügt.

Du kannst jetzt im Kurzbefehl-Editor Akkorde (auch als Tastenkombinationen bezeichnet) erstellen.

Gehe zu Einstellungen > Tastenkürzel, bewege den Mauszeiger auf einen Befehl und klicke auf die Schaltfläche Bearbeiten (Stiftsymbol), um den Kurzbefehl für Akkorde anzupassen.

Tastenkombinationen für Akkorde

Chromium-Problem: 174309

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