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 führte eine gewisse Optimierung durch, um den Leistungsaufwand für die Serialisierung, das Parsen und die Deserialisierung während des Starts zu reduzieren.

Demnächst gibt es einen Engineering-Blogpost, in dem die Implementierung ausführlich erläutert wird. Bleiben Sie dran!

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 Uhrensymbol, um das Uhr-Overlay ein-/auszuschalten. Klicke auf eine beliebige Stelle in der Uhr oder ziehe an der 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 Entwicklertools wurden auf dem Tab „Rendering“ zwei neue Emulationen hinzugefügt, mit denen Sie AVIF- und WebP-Bildformate deaktivieren können. Diese neuen Emulationen erleichtern Entwicklern das Testen verschiedener Ladeszenarien von Bildern, ohne den Browser wechseln zu müssen.

Angenommen, wir haben den folgenden HTML-Code, um in neueren Browsern ein Bild in AVIF und WebP mit einem Ersatz-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 img src. Die aktuelle Bildquelle (currentSrc) ist jetzt das Fallback-WebP-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 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.

Speicherkontingentgröße simulieren

Chromium-Probleme: 945786, 1146985

Neuer Web Vitals-Pfad in den Aufnahmen im Bereich „Leistung“

Bei Performance-Aufzeichnungen gibt es jetzt die Möglichkeit, Web Vitals-Informationen anzuzeigen.

Nachdem Sie die Ladeleistung erfasst haben, klicken Sie im Bereich „Leistung“ das Kästchen Web Vitals an, um den neuen Web Vitals-Kanal aufzurufen.

Der Fahrstreifen zeigt derzeit Web Vitals-Informationen wie First Contentful Paint (FCP), Largest Contentful Paint (LCP) und Layout Shift (LS) an.

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 Netzwerkbereich 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 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 nur der allgemeine Status (fehlgeschlagen) für CORS-Fehler angezeigt.

Damit legen Sie den Grundstein für unsere nächsten Verbesserungen und stellen eine detailliertere Beschreibung der CORS-Probleme bereit.

CORS-Fehler

Chromium-Problem: 1141824

Aktualisierungen der Frame-Detailansicht

Informationen zur ursprungsübergreifenden Isolierung in der Frame-Detailansicht

Der Status ursprungsübergreifend isoliert wird jetzt im Abschnitt Sicherheit und Isolation angezeigt.

Im neuen Abschnitt API-Verfügbarkeit wird die Verfügbarkeit von SharedArrayBuffers (SAB) angezeigt und es wird angegeben, ob sie über postMessage() freigegeben 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 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

Neue Web Worker-Informationen 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 Web-Workern und wählen Sie dann einen Worker im Worker-Baum aus, um die Web-Worker-Details anzusehen.

Informationen zu Web Workern

Chromium-Probleme: 1122507, 1051466

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

Sie können jetzt die Details darüber ansehen, welcher Frame das Öffnen eines weiteren 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 (Frame öffnen), um den Opener Frame im Steuerfeld „Elemente“ anzuzeigen.

Details zum Opener-Frame

Chromium-Problem: 1107766

Bereich „Netzwerk“ im Bereich „Service Workers“ öffnen

Mit dem neuen Link Netzwerkanfragen können Sie alle Informationen zum Routing von Service Worker-Anfragen ansehen. Dadurch erhalten Entwickler zusätzlichen Kontext beim Debuggen der Software.

Gehen Sie zu Anwendung > Dienst-Worker und klicken Sie auf die Netzwerkanfragen einer Software. Der Bereich Netzwerk wird im unteren Bereich geöffnet und zeigt alle Service Worker-bezogenen Anfragen an (die Netzwerkanfragen werden nach "is:service-worker-intercepted" gefiltert).

Netzwerkbereich über Service Worker öffnen

Chromium-Problem: –

Neue Kopieroptionen im Steuerfeld "Netzwerk"

Attributwert kopieren

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

Attributwert kopieren

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

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

Vorschau des Wasm-Variablenwerts bei Mouseover

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, fügen Sie einen Haltepunkt hinzu und aktualisieren Sie die Seite. Bewegen Sie den Mauszeiger auf eine Variable, um den Wert zu sehen.

Vorschau der Wasm-Variable bei Mouseover

Chromium-Probleme: 1058836, 1071432

Wasm-Variable in der Konsole auswerten

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

In diesem Beispiel setzen wir einen Haltepunkt in die Zeile local.get $input. Geben Sie bei der Fehlerbehebung in der Konsole $input ein, um den aktuellen Wert der Variablen zurückzugeben, der in diesem Fall 4 ist.

Wasm-Variable in der Konsole auswerten

Chromium-Problem: 1127914

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

Die Entwicklertools verwenden jetzt konsistent KB für die Anzeige von Datei-/Arbeitsspeichergrößen. Zuvor wurden in den Entwicklertools kB (1.000 Byte) und KiB (1.024 Byte) gemischt. Beispielsweise hat das Netzwerkpanel zuvor „kB“-Labels verwendet, aber tatsächlich Berechnungen mit KiB durchgeführt, was unnötige Verwirrung verursachte.

Chromium-Problem: 1035309

Pseudoelemente im Elementbereich 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 demnächst verfügbar!

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

Außerdem 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 wie folgt 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 Designdokumentation zu den Funktionen der Flexbox-Tools. 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

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

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools, kannst hochmoderne Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Kontaktaufnahme mit dem Team für Chrome-Entwicklertools

Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.

  • Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • Twittern Sie unter @ChromeDevTools.
  • Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 101

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 gekündigt.

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