Neuerungen in den Entwicklertools (Chrome 88)

Jecelyn Yeen

Schnellerer Start der Entwicklertools

Der Start von DevTools ist jetzt um etwa 37% schneller, was die JavaScript-Kompilierung betrifft (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 demnächst erscheinenden Engineering-Blogpost wird die Implementierung im Detail erläutert. Mehr dazu demnächst!

Chromium-Problem: 1029427

Neue Tools zur Visualisierung von CSS-Winkeln

Die Entwicklertools bieten jetzt eine bessere Unterstützung für das Debuggen von CSS-Winkeln.

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 neben dem Winkel im Bereich „Stile“ ein Uhrsymbol angezeigt. Klicken Sie auf das Uhrensymbol, um das Uhren-Overlay ein- oder auszublenden. Klicken Sie auf eine beliebige Stelle auf der Uhr oder ziehen Sie die Nadel, um den Winkel zu ändern.

Es gibt auch Maus- und Tastenkombinationen, mit denen Sie den Winkelwert ändern können. 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 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 und ein Fallback-PNG-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 das Symbol img src. Die aktuelle Bildquelle (currentSrc) ist jetzt das Fallback-WebP-Bild.

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 in Szenarien mit geringem Speicherplatz testen.

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

Chromium-Probleme: 945786, 1146985

Neuer Web Vitals-Bereich in den Aufzeichnungen des Leistungsbereichs

Leistungsaufzeichnungen bieten jetzt die Möglichkeit, Web-Vitals-Informationen anzuzeigen.

Nachdem Sie die Ladeleistung aufgezeichnet haben, aktivieren Sie im Bereich „Leistung“ das Kästchen Web Vitals, um den neuen Web Vitals-Track zu sehen.

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

Unter web.dev/vitals finden Sie weitere Informationen dazu, wie Sie die Nutzerfreundlichkeit mit den Web Vitals-Messwerten optimieren können.

Chromium-Problem: N/A

CORS-Fehler im Netzwerkbereich melden

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

Sehen Sie sich die fehlgeschlagene CORS-Netzwerkanfrage im Netzwerkbereich 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 Entwicklertools für CORS-Fehler nur der allgemeine Status (failed) angezeigt.

Das ist die Grundlage für unsere nächsten Verbesserungen, mit denen wir detailliertere Beschreibungen der CORS-Probleme bereitstellen.

Chromium-Problem: 1141824

Aktualisierungen der Ansicht „Frame-Details“

Informationen zur ursprungsübergreifenden Isolation in der Ansicht „Frame-Details“

Der Status „Cross-Origin Isolated“ wird jetzt im Abschnitt Sicherheit und Isolation angezeigt.

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

Eine Einstellungswarnung wird angezeigt, wenn das SAB und postMessage() derzeit verfügbar sind, der Kontext jedoch nicht ursprungsübergreifend isoliert ist. Weitere Informationen zur ursprungsübergreifenden Isolation und dazu, warum sie für Funktionen wie SharedArrayBuffers erforderlich ist

Chromium-Problem: 1139899

Neue Web Workers-Informationen in der Ansicht „Framedetails“

In den Entwicklertools werden jetzt dedizierte Webworker unter dem Frame angezeigt, in dem sie erstellt werden.

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

Chromium-Probleme: 1122507, 1051466

Details zum Opener-Frame für geöffnete Fenster anzeigen

Sie können sich jetzt die Details dazu ansehen, welcher Frame das Öffnen eines anderen Fensters verursacht hat.

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

Chromium-Problem: 1107766

Netzwerkbereich über den Bereich „Service Worker“ öffnen

Über den neuen Link Netzwerkanfragen können Sie sich alle Routinginformationen für Service Worker-Anfragen ansehen. So erhalten Entwickler zusätzlichen Kontext beim Debuggen der Software.

Rufen Sie Anwendung > Service Worker auf und klicken Sie auf die Netzwerkanfragen eines Service Workers. Das Netzwerk-Steuerfeld wird im unteren Bereich geöffnet und zeigt alle Anfragen im Zusammenhang mit Service Workern an. Die Netzwerkanfragen werden nach "is:service-worker-intercepted" gefiltert.

Chromium-Problem: N/A

Neue Kopieroptionen im Netzwerkbereich

Property-Wert kopieren

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

Klicken Sie im Bereich Network auf eine Netzwerkanfrage, um den Bereich Headers zu öffnen. Klicken Sie mit der rechten Maustaste auf eine der Eigenschaften in diesen Abschnitten: „Request payload (JSON)“, „Form Data“, „Query String Parameters“, „Request Headers“, „Response Headers“.

Anschließend können Sie Wert kopieren auswählen, 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.

Chromium-Problem: 1139615

Updates für das Wasm-Debugging

Vorschau des Wasm-Variablenwerts beim Bewegen des Mauszeigers

Wenn Sie in der WebAssembly-Disassemblierung (Wasm) mit dem Mauszeiger auf eine Variable zeigen, während die Ausführung an einem Haltepunkt pausiert ist, 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.

Chromium-Probleme: 1058836, 1071432

Wasm-Variable in der Konsole auswerten

Sie können jetzt Wasm-Variablen in der Console auswerten, während Sie an einem Haltepunkt pausieren.

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

Chromium-Problem: 1127914

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

In den DevTools wird jetzt einheitlich „kB“ für die Anzeige von Datei- und Speichergrößen verwendet. Bisher wurden in DevTools kB (1.000 Byte) und KiB (1.024 Byte) gemischt. Im Netzwerkbereich wurden beispielsweise zuvor Labels mit „kB“ verwendet, die Berechnungen wurden aber tatsächlich mit KiB durchgeführt. Das hat unnötige Verwirrung gestiftet.

Chromium-Problem: 1035309

Pseudoelemente im Elementbereich hervorheben

In den DevTools wurde der Farbkontrast von Pseudoelementen erhöht, damit Sie sie besser erkennen können.

Chromium-Problem: 1143833

Experimentelle Funktionen

Tools zur Fehlerbehebung für CSS Flexbox

Bald gibt es Flexbox-Debugging-Tools!

In den Entwicklertools wird jetzt im Bereich „Elemente“ ein flex-Symbol für Elemente mit angewendetem display: flex angezeigt.

Außerdem wurden in 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 Ausrichtung des Symbols wird entsprechend den folgenden Faktoren angepasst:

• flex-direction
• direction
• writing-mode

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

Hier finden Sie das Design-Dokument der Flexbox-Tooling-Funktionen. Weitere Funktionen werden demnächst hinzugefügt.

Probieren Sie es aus und lassen Sie uns wissen, was Sie davon halten.

Chromium-Probleme: 1144090, 1139945

Tastenkombinationen für Akkorde anpassen

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

Sie können jetzt im Tastenkürzel-Editor Akkorde (auch als Tastenkombinationen bezeichnet) erstellen.

Gehen Sie zu Einstellungen > Tastenkombinationen, bewegen Sie den Mauszeiger auf einen Befehl und klicken Sie auf die Schaltfläche Bearbeiten (Stiftsymbol), um die Tastenkombination für Akkorde anzupassen.

Chromium-Problem: 174309

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

• Sie können uns Feedback und Funktionsanfragen unter crbug.com senden.
• Melden Sie ein DevTools-Problem in den Entwicklertools über das more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Senden Sie einen Tweet an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu Neuerungen in den DevTools oder den YouTube-Videos mit DevTools-Tipps.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.