Neuerungen in den Entwicklertools (Chrome 88)

Jecelyn Yeen

Schnellerer Start der Entwicklertools

Das Starten der DevTools ist jetzt bei der JavaScript-Kompilierung um etwa 37% schneller (von 6,9 Sekunden auf 5 Sekunden). 🎉

Das Team hat einige Optimierungen vorgenommen, um den Leistungsaufwand für die Serialisierung, das Parsen und die Deserialisierung beim Start zu reduzieren.

In einem kommenden Blogpost für Entwickler wird die Implementierung ausführlich erläutert. Mehr dazu demnächst!

Chromium-Problem: 1029427

Neue Tools zur Visualisierung von Winkeln in Preisvergleichsportalen

Die DevTools bieten jetzt eine bessere Unterstützung für die Fehlerbehebung bei CSS-Winkeln.

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. Klicken Sie auf das Uhrsymbol, um das Uhr-Overlay ein- oder auszuschalten. Klicken Sie auf eine beliebige Stelle auf der Uhr oder ziehen Sie die Nadel, um den Winkel zu ändern.

Es gibt auch Maus- und Tastaturkürzel, mit denen sich der Winkelwert ändern lässt. Weitere Informationen finden Sie in unserer Dokumentation.

Chromium-Probleme: 1126178, 1138633

Nicht unterstützte Bildtypen emulieren

In den DevTools wurden auf dem Tab „Rendering“ zwei neue Emulationen hinzugefügt, mit denen Sie die Bildformate AVIF und WebP deaktivieren können. Mit diesen neuen Emulationen können Entwickler verschiedene Szenarien für das Laden von Bildern einfacher 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 bereitzustellen, mit einem Fallback-PNG-Bild für ältere Browser.

<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 das Symbol img src. Das aktuelle Bild-src (currentSrc) ist jetzt das WebP-Fallback-Bild.

Bildtypen emulieren

Chromium-Problem: 1130556

Speicherkontingentgröße im Bereich „Speicher“ simulieren

Sie können die Größe des Speicherkontingents jetzt im Bereich „Speicher“ überschreiben. Mit dieser Funktion können Sie verschiedene Geräte simulieren und das Verhalten Ihrer Apps bei geringer Speicherverfügbarkeit testen.

Klicken Sie auf 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-Spalte in den Aufzeichnungen im Steuerfeld „Leistung“

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

Nachdem Sie die Ladeleistung erfasst haben, aktivieren Sie im Bereich „Leistung“ das Kästchen Web Vitals, um die neue Leiste „Web Vitals“ aufzurufen.

Derzeit werden in der Leiste Informationen zu Web Vitals wie First Contentful Paint (FCP), Largest Contentful Paint (LCP) und Layout Shift (LS) angezeigt.

Unter web.dev/vitals erfahren Sie mehr darüber, wie Sie die Nutzerfreundlichkeit mit den Web Vitals-Messwerten optimieren können.

Web Vitals-Spalte

Chromium-Problem: –

CORS-Fehler im Bereich „Netzwerk“ melden

In den DevTools wird jetzt ein CORS-Fehler angezeigt, wenn eine Netzwerkanfrage aufgrund von CORS (Cross-Origin Resource Sharing) fehlschlägt.

Sehen Sie sich im Bereich Netzwerk die fehlgeschlagene CORS-Netzwerkanfrage an. In der Spalte „Status“ wird „CORS-Fehler“ angezeigt. Bewegen Sie den Mauszeiger auf den Fehler. In der Kurzinfo wird jetzt der Fehlercode angezeigt. Bisher wurde in den DevTools für CORS-Fehler nur der allgemeine Status „(failed)“ angezeigt.

Dies bildet die Grundlage für unsere nächsten Verbesserungen, bei denen wir eine detailliertere Beschreibung der CORS-Probleme liefern werden.

CORS-Fehler

Chromium-Problem: 1141824

Aktualisierungen der Ansicht „Frame-Details“

Informationen zur ursprungsübergreifenden Isolation in der Frame-Detailansicht

Der Status der plattformübergreifenden Isolation wird jetzt im Abschnitt Sicherheit und Isolation angezeigt.

Im neuen Bereich API-Verfügbarkeit sehen Sie, ob SharedArrayBuffers (SAB) verfügbar sind und ob sie mit postMessage() geteilt werden können.

Wenn der SAB und postMessage() derzeit verfügbar sind, der Kontext aber nicht plattformübergreifend isoliert ist, wird eine Warnung zur Einstellung angezeigt. Weitere Informationen zur plattformübergreifenden Isolation und dazu, warum sie für Funktionen wie SharedArrayBuffers erforderlich ist, finden Sie in diesem Artikel.

Informationen zu Cross-Origin-Anfragen

Chromium-Problem: 1139899

Neue Informationen zu Webworkern in der Frame-Detailansicht

In den DevTools werden jetzt spezielle Webworker unter dem Frame angezeigt, in dem sie erstellt werden.

Maximieren Sie im Bereich Anwendung einen Frame mit Webworkern und wählen Sie dann im Verzeichnis Worker einen Worker aus, um die Details des Webworkers aufzurufen.

Informationen zu Webworkern

Chromium-Probleme: 1122507, 1051466

Details zum Fensteröffner für geöffnete Fenster anzeigen

Sie können jetzt sehen, welcher Frame das Öffnen eines anderen Fensters verursacht hat.

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

Details zum Frame der Ursprungsseite

Chromium-Problem: 1107766

Netzwerkbereich über den Bereich „Dienstworker“ öffnen

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

Klicken Sie auf Anwendung > Dienstworker und dann auf die Netzwerkanfragen eines Dienstworkers. Im unteren Bereich wird das Steuerfeld Netzwerk geöffnet, in dem alle Anfragen angezeigt werden, die sich auf Service Worker beziehen. Die Netzwerkanfragen werden nach "is:service-worker-intercepted" gefiltert.

Netzwerkbereich über die Dienstprogramme öffnen

Chromium-Problem: –

Neue Kopieroptionen im Bereich „Netzwerk“

Property-Wert kopieren

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

Property-Wert kopieren

Klicken Sie im Bereich Netzwerk auf eine Netzwerkanfrage, um den Bereich Header zu öffnen. Klicken Sie mit der rechten Maustaste auf eine der folgenden Eigenschaften:

Wählen Sie dann Wert kopieren aus, um den Property-Wert 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

Wasm-Variablenwert bei Mausbewegung als Vorschau anzeigen

Wenn Sie den Mauszeiger bei einer angehaltenen WebAssembly-Disassembly (Wasm) auf eine Variable bewegen, wird in den DevTools 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.

Wasm-Variablen bei Mausbewegung als Vorschau anzeigen

Chromium-Probleme: 1058836, 1071432

Wasm-Variable in der Konsole auswerten

Sie können jetzt Wasm-Variablen in der Console auswerten, während die Ausführung an einem Haltepunkt angehalten ist.

In diesem Beispiel setzen wir einen Haltepunkt in Zeile local.get $input. Wenn Sie beim Debuggen $input in die Konsole eingeben, wird der aktuelle Wert der Variablen zurückgegeben, in diesem Fall 4.

Wasm-Variable in der Konsole auswerten

Chromium-Problem: 1127914

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

In den DevTools wird jetzt konsequent „KB“ für die Anzeige von Datei-/Speichergrößen verwendet. Bisher wurden in den DevTools KB (1.000 Byte) und KiB (1.024 Byte) vermischt. Im Bereich „Netzwerk“ wurden beispielsweise bisher die Labels „kB“ verwendet, die Berechnungen wurden jedoch in KiB ausgeführt, was zu unnötigen Verwirrungen führte.

Chromium-Problem: 1035309

Pseudoelemente im Elementbereich hervorheben

In den DevTools wurde der Farbkontrast von Pseudoelementen erhöht, damit sie besser zu erkennen sind.

Pseudoelemente hervorheben

Chromium-Problem: 1143833

Experimentelle Funktionen

CSS Flexbox-Fehlerbehebungstools

Flexbox-Debugging-Tools sind in Arbeit

In den DevTools wird im Bereich „Elemente“ jetzt ein flex-Symbol für Elemente angezeigt, auf die display: flex angewendet wurde.

Außerdem wurden den folgenden Flexbox-Eigenschaften neue Ausrichtungssymbole hinzugefügt:

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

Außerdem sind diese Symbole kontextbezogen. Die Symbolrichtung wird anhand der folgenden Kriterien angepasst:

  • flex-direction
  • direction
  • writing-mode

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

CSS Flex-Fehlerbehebung

Hier finden Sie die Designdokumente zu den Flexbox-Tools. Weitere Funktionen folgen bald.

Probieren Sie es aus und teilen Sie uns Ihre Meinung mit.

Chromium-Probleme: 1144090, 1139945

Tastenkürzel für Akkorde anpassen

In den DevTools wurde seit dem letzten Release experimentelle Unterstützung für die Anpassung von Tastenkombinationen hinzugefügt.

Sie können jetzt im Verknüpfungseditor Tastenkombinationen erstellen.

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

Tastenkombinationen für Akkorde

Chromium-Problem: 174309

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.