Neuerungen in den Entwicklertools (Chrome 88)

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 CSS-Tools zur Winkelvisualisierung

Die Entwicklertools bieten jetzt eine bessere Unterstützung für das Debugging von 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) oder transform: rotate(angle)), wird im Bereich „Stile“ neben dem Winkel ein Uhrsymbol 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 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 Speicherkontingentgröße 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.

Speicherkontingentgröße simulieren

Chromium-Probleme: 945786, 1146985

Neue Web Vitals-Spur in den Aufnahmen im Bereich „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 Isolierung in der Frame-Detailansicht

Der Status ursprungsübergreifend isoliert 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.

Eine Warnung zur Einstellung wird angezeigt, wenn das SAB und postMessage() derzeit verfügbar sind, der Kontext jedoch nicht ursprungsübergreifend isoliert ist. 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 Start-Frame für geöffnete Fenster anzeigen

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

Wählen Sie ein geöffnetes Fenster unter der Baumstruktur Frames aus, um die Fensterdetails zu sehen. 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 Service Worker ö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.

Attributwert kopieren

Klicken Sie im Bereich Netzwerk auf eine Netzwerkanfrage, um den Bereich Header zu öffnen. Klicken Sie mit der rechten Maustaste auf eines der Attribute in diesem Abschnitt: Anfragenutzlast (JSON) Formulardatenabfragestring-Parameter Antwortheader für Anfrageheader

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 für Wasm-Fehlerbehebung

Wasm-Variablenwert bei Mausbewegung als Vorschau anzeigen

Wenn der Mauszeiger auf eine Variable in WebAssembly (Wasm) bewegt wird, während das Element 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.

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. Zuvor hatte die Entwicklertools eine Mischung aus KB (1.000 Byte) und KiB (1.024 Byte). 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 jetzt im Bereich „Elemente“ 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

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

Du kannst jetzt im Shortcut-Editor Akkorde erstellen – sogenannte Tastenkürzel mit mehreren Tasten.

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 den Entwicklertools

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