Neuerungen in den Entwicklertools (Chrome 88)

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 einige Optimierungen durch, um den Leistungsaufwand für die Serialisierung, das Parsen und Deserialisierung beim Start.

Demnächst gibt es einen Engineering-Blogpost, in dem die Implementierung ausführlich erläutert wird. 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.

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)), eine Uhr neben dem Winkel im Bereich „Stile“. Klicke auf das Uhrensymbol, um die Uhr ein-/auszuschalten. -Overlay. Klicke auf eine beliebige Stelle in der Uhr oder ziehe an der Nadel, um den Winkel zu ändern.

Sie können den Winkel auch mit Maus und Tastenkombinationen ändern. Weitere Informationen dazu finden Sie in der Dokumentation.

Chromium-Probleme: 1126178, 1138633

Nicht unterstützte Bildtypen emulieren

Mit den Entwicklertools wurden auf dem Tab „Rendering“ zwei neue Emulationen hinzugefügt, mit denen Sie AVIF und WebP-Images deaktivieren können Formaten. Diese neuen Emulationen erleichtern es Entwicklern, das Laden verschiedener Bilder zu testen ohne den Browser wechseln zu müssen.

Angenommen, wir haben den folgenden HTML-Code, um in neueren Browsern ein Bild in AVIF und WebP bereitzustellen, wobei ein 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 und wählen Sie „AVIF-Bildformat deaktivieren“ aus. und aktualisieren Sie die Seite. Bewegen Sie die Maus über das 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 Speicherkontingentgröße jetzt im Bereich „Speicher“ überschreiben. Mit dieser Funktion können Sie Simulieren Sie verschiedene Geräte und testen Sie das Verhalten Ihrer Anwendungen bei Szenarien mit geringer Festplattenverfügbarkeit.

Gehen Sie zu Anwendung > Klicken Sie unter Speicher das Kästchen Benutzerdefiniertes Speicherkontingent simulieren an. eine gültige Zahl eingeben, um das Speicherkontingent zu simulieren.

Chromium-Probleme: 945786, 1146985

Neue Web Vitals-Spur 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, aktivieren Sie im Bereich „Leistung“ das Kästchen Web Vitals. um den neuen Web Vitals-Kanal zu sehen.

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

Unter web.dev/vitals finden Sie weitere Informationen dazu, wie Sie die Nutzererfahrung im Web optimieren können. Vitalparameter

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 fehlgeschlagen ist (CORS).

Sehen Sie sich im Bereich Netzwerk die fehlgeschlagene CORS-Netzwerkanfrage an. In der Statusspalte wird "CORS" angezeigt, Fehler“ angezeigt. Bewegen Sie den Mauszeiger auf den Fehler. In der Kurzinfo wird jetzt der Fehlercode angezeigt. Bisher wurden nur Entwicklertools wurde der allgemeine Status „(Fehlgeschlagen)“ für CORS-Fehler angezeigt.

Damit legen wir den Grundstein für unsere nächsten Verbesserungen. CORS-Probleme!

Chromium-Problem: 1141824

Aktualisierungen der Frame-Detailansicht

Informationen zur ursprungsübergreifenden Isolierung in der Frame-Detailansicht

Der Status ursprungsübergreifend isoliert wird jetzt im Bereich Sicherheit und Isolation (Isolation).

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

Eine Warnung zur Einstellung wird angezeigt, wenn das Unternehmen ohne festen Standort in einem Unternehmen und die postMessage() derzeit verfügbar sind, aber das Kontext ist nicht ursprungsübergreifend isoliert. Weitere Informationen zur ursprungsübergreifenden Isolierung und zu den Gründen sind für Funktionen wie SharedArrayBuffers in diesem Artikel erforderlich.

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 unter dem Worker-Baum, um die Details des Web Workers aufzurufen.

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 die Schaltfläche Einleitung Frame, um das Öffner-Fenster im Elementbereich anzuzeigen.

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 > Service Workers: Klicken Sie auf die Netzwerkanfragen einer SW. Die Im unteren Bereich wird der Bereich Network geöffnet, in dem alle Service Worker-Anfragen (die Netzwerkanfragen werden nach "is:service-worker-intercepted" gefiltert.

Chromium-Problem: –

Neue Kopieroptionen im Steuerfeld "Netzwerk"

Attributwert kopieren

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

Klicken Sie im Bereich Netzwerk auf eine Netzwerkanfrage, um den Bereich Headers zu öffnen. Klicken Sie mit der rechten Maustaste Eine der Eigenschaften in diesem Abschnitt: „Anfragenutzlast“ (JSON) Formulardatenabfragestring-Parameter Anfrageheader-Antwortheader

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 Ihr Zwischenablage öffnen.

Chromium-Problem: 1139615

Updates für Wasm-Fehlerbehebung

Vorschau des Wasm-Variablenwerts bei Mouseover

Wenn Sie den Mauszeiger auf eine Variable in WebAssembly (Wasm) bewegen, während das Element an einem Haltepunkt pausiert ist, In den Entwicklertools wird jetzt der aktuelle Wert der Variable 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 um den Wert zu sehen.

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 beim Debugging $input ein in der Konsole wird der aktuelle Wert der Variablen zurückgegeben, in diesem Fall 4.

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 in den Entwicklertools gemischte KB (1.000 Byte) und KiB (1.024 Byte). Im Steuerfeld „Netzwerk“ wurde bisher z. B. „kB“ verwendet Labels, aber 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.

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 mit display: flex angewendet.

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.

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 Verknüpfung für Akkorde anzupassen.

Chromium-Problem: 174309

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhalten Sie Zugriff auf die neuesten Entwicklertools, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, bevor Ihre 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.
• Problem mit den Entwicklertools über Weitere Optionen melden > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
• 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