Neuerungen in den Entwicklertools (Chrome 88)

Jecelyn Yeen

Schnellerer Start der Entwicklertools

Der Start der Entwicklertools ist in Bezug auf die JavaScript-Kompilierung jetzt um ca.37% schneller (von 6,9 auf 5 s)! 🎉

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.

Du kannst den Winkel auch mithilfe von Maus und Tastenkombinationen ändern. Weitere Informationen dazu findest du in der 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 Anwendungen bei geringer Festplattenverfügbarkeit testen.

Gehen Sie zu Anwendung > Speicher, klicken Sie das Kästchen Benutzerdefiniertes Speicherkontingent simulieren an 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 Performance-Aufzeichnungen gibt es jetzt die Möglichkeit, Web Vitals-Informationen anzuzeigen.

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 findest du weitere Informationen dazu, wie du mithilfe der Web Vitals-Messwerte die Nutzerfreundlichkeit optimieren kannst.

Web Vitals-Spur

Chromium-Problem: –

CORS-Fehler im Bereich „Netzwerk“ melden

In den Entwicklertools wird jetzt ein CORS-Fehler angezeigt, wenn eine Netzwerkanfrage aufgrund von Cross-Origin Resource Sharing (CORS) 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 die 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.

Ursprungsübergreifende Informationen

Chromium-Problem: 1139899

Neue Informationen zu Webworkern in der Frame-Detailansicht

In den Entwicklertools werden jetzt dedizierte Web Worker unter dem Frame angezeigt, wodurch 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. Der Bereich Netzwerk wird im unteren Bereich geöffnet und zeigt alle Service Worker-bezogenen Anfragen an (die Netzwerkanfragen werden nach &quot;is:service-worker-intercepted&quot; gefiltert).

Netzwerkbereich über die Service Worker öffnen

Chromium-Problem: –

Neue Kopieroptionen im Steuerfeld "Netzwerk"

Property-Wert kopieren

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

Attributwert 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 Ihre Zwischenablage zu kopieren.

Stacktrace kopieren

Chromium-Problem: 1139615

Updates für 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, fügen Sie einen Haltepunkt hinzu 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

Zunächst wird in den Entwicklertools im Bereich „Elemente“ das Logo flex 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-Debugging

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

Seit der letzten Veröffentlichung werden in den Entwicklertools experimentelle Unterstützung für benutzerdefinierte Tastenkombinationen hinzugefügt.

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

Gehen Sie zu Einstellungen > Verknüpfungen, bewegen Sie den Mauszeiger auf einen Befehl und klicken Sie auf die Schaltfläche Bearbeiten (Stiftsymbol), um die Akkordverknüpfung 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 Zugriff auf die neuesten DevTools-Funktionen, ermöglichen den Test moderner Webplattform-APIs 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 DevTools

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