Neue Funktionen in den Entwicklertools (Chrome 123)

Sofia Emelianova
Sofia Emelianova
GitHub

Osterei finden

Zum diesjährigen Aprilscherz hat das DevTools-Team irgendwo in den DevTools ein Osterei versteckt.

Sie erkennen es an einem bunten 💫-Emoji.

Aktualisierungen des Bereichs „Elemente“

Diese Version enthält mehrere Updates für den Bereich Elemente.

Fokussierte Seite unter „Elemente“ > „Stile“ emulieren

Auf dem Tab Elemente > Stile gibt es jetzt unter der Schaltfläche Elementstatus umschalten (:hov) die Option Eine fokussierte Seite emulieren. Bisher war diese Option nur im Bereich Rendering zu finden.

Wenn Sie den Fokus von der Seite auf die Entwicklertools legen, werden einige Overlay-Elemente automatisch ausgeblendet, wenn sie durch den Fokus ausgelöst werden. Dazu gehören z. B. Drop-down-Listen, Menüs oder Datumsauswahlen. Mit der Option Fokussierte Seite emulieren können Sie ein solches Element so debuggen, als wäre es im Fokus.

Vorher-Nachher-Vergleich der Emulierung einer fokussierten Seite auf dem Tab „Stile“.

Chromium-Problem: 1468393

Farbauswahl, Winkeluhr und Ease-In-Editor in var()-Fallbacks

Zur Vereinfachung der CSS-Bearbeitung können Sie auf dem Tab Elemente > Styles jetzt die Farbvorlage, die Winkeluhr und den Easing-Editor in var()-Fallbacks verwenden.

Die Farbauswahl, die Winkeluhr und der Editor für die Übergänge vor und nach dem Rendern in var()-Fallbacks.

Chromium-Problem: 1520417.

Das Tool „Preisvergleichsportal – Länge“ wird eingestellt

Das Tool zum Erstellen von CSS-Längen wird aufgrund von Feedback eingestellt, dass es den Workflow verlangsamt und nicht viel Mehrwert bietet.

Sie können den Wert nicht mehr per Drag-and-drop anpassen oder einen Maßeinheitstyp aus dem Drop-down-Menü auswählen. Doppelklicken Sie stattdessen auf den Wert und geben Sie einen neuen ein.

Wenn Sie das Tool „length“ wieder aktivieren möchten, deaktivieren Sie Einstellungen > Experimente > CSS-Tool „<length>“ auf dem Tab „Styles“ deaktivieren.

Wenn Sie dieses Tool weiterhin verwenden möchten, würde das DevTools-Team gerne wissen, wie es Ihnen bei Ihrem Workflow hilft. Du kannst uns gerne unter crbug/1522657 Feedback geben.

Der Test zur Einstellung ist deaktiviert.

Pop-up für das ausgewählte Suchergebnis unter „Leistung“ > „Haupt-Tracking-Code“

Zur besseren Übersicht wird im Flammendiagramm im Bereich Leistung > Haupt jetzt ein Pop-up-Fenster über dem entsprechenden Ereignis angezeigt, wenn Sie die Suchergebnisse durchgehen.

Das Vorher-Nachher-Vergleichstool zeigt ein Pop-up über dem ausgewählten Suchergebnis an.

Chromium-Problem: 1523279.

Aktualisierungen des Netzwerkbereichs

Diese Version enthält einige Updates für den Bereich Netzwerk.

Schaltfläche „Löschen“ und Suchfilter auf dem Tab „Netzwerk“ > „EventStream“

Auf dem Tab Netzwerk > Ereignisstream werden folgende Daten angezeigt:

  • Eine Schaltfläche Löschen, mit der erfasste Ereignisse in der Tabelle gelöscht werden.
  • Ein Suchfilter, der reguläre Ausdrücke versteht.

Vorher- und Nachher-Bilder mit Schaltfläche „Löschen“ und Suchfilter

Das DevTools-Team möchte sich bei Charles Vazac für diese Funktion bedanken.

Außerdem werden auf dem Tab EventStream jetzt nicht nur Ereignisse erfasst, die über die EventSource API gesendet werden, sondern auch Ereignisse, die von Servern über fetch/XHR gesendet werden. Probieren Sie es auf dieser Demoseite aus.

Chromium-Problem: 1488863, 40659493

Kurzinfos mit Gründen für Ausnahmen für Drittanbieter-Cookies unter „Netzwerk“ > „Cookies“

Auf dem Tab Netzwerk > Cookies werden jetzt neben Cookies, die aufgrund der Einstellung von Drittanbieter-Cookies eigentlich blockiert werden sollten, Kurzinfos mit den Gründen für die Ausnahme angezeigt.

Vorher-Nachher-Vergleich mit einer Kurzinfo mit einem Grund für eine Ausnahme für ein Drittanbieter-Cookie.

Drittanbieter-Cookies können aus folgenden Gründen zugelassen werden:

Chromium-Problem: 41491846.

Alle Unterbrechungen in „Quellen“ aktivieren und deaktivieren

Im Bereich Quellen > Bruchstellen sind die Optionen Aktivieren und Alle Bruchstellen deaktivieren wieder im Drop-down-Menü verfügbar. Bisher wurden diese Optionen beim Neudesign der Seitenauflösungen nicht berücksichtigt.

Wenn Sie alle Haltepunkte aktivieren oder deaktivieren möchten, klicken Sie unter Quellen > Haltepunkte mit der rechten Maustaste auf einen Haltepunkt und wählen Sie die entsprechende Option aus.

Vorher und nachher: Die Optionen „Aktivieren“ und „Deaktivieren“ wurden wieder eingeführt.

Chromium-Problem: 1522037

Geladene Scripts in den DevTools für Node.js ansehen

In den DevTools für Node.js werden jetzt geladene Scripts im Navigationsbaum unter Quellen > Scripts angezeigt.

Vorher- und Nachher-Bilder des Tabs „Scripts“ mit einem Verzeichnis der geladenen Scripts

Chromium-Problem: 1518364.

Lighthouse 11.5.0

Im Bereich Lighthouse wird jetzt Lighthouse 11.5.0 ausgeführt. Vollständige Liste der Änderungen

Zu den bemerkenswerten Änderungen gehört eine neue Prüfung, mit der die Grundursachen für Layoutänderungen geschätzt werden. Diese Prüfung ersetzt die Prüfung „Layout-Shift-Elemente“, in der nur die Elemente aufgeführt wurden, die von Layoutänderungen betroffen waren.

Eine neue Prüfung, mit der die Grundursachen für Layoutänderungen geschätzt werden.

Informationen zu den Grundlagen der Verwendung des Lighthouse-Steuerfelds in den DevTools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558

Bedienungshilfen

Diese Version enthält folgende Verbesserungen der Barrierefreiheit:

  • Screenreader sprechen jetzt Folgendes an:
    • Der Linktext Weitere Informationen neben den Auswahltypen im Bereich Aufzeichnung.
    • Wenn unter Einstellungen > Tests keine Tests mit dem Filter übereinstimmen
    • Die Bestätigung der Aktion beim Entfernen, Bestätigen oder Wiederherstellen eines Kurzbefehls unter Einstellungen > Kurzbefehle.
  • Die Tabelle unter Einstellungen > Standorte wird jetzt korrekt als Tabelle für Bedienungshilfen dargestellt.

Chromium-Probleme: 1516957, 324282443, 324467508, 324930007.

Sonstige Highlights

Hier sind einige wichtige Fehlerkorrekturen und Verbesserungen in dieser Version:

  • Schriftarten in den DevTools werden an Chrome angepasst (1523538).
  • Leistung: Die Anzeige von Screenshots beim Bewegen des Mauszeigers über die Zeitachse wurde korrigiert (1519469).
  • Quellen: Die Zeilenhöhe im Editor wurde erhöht, um den Code besser lesbar zu machen (1523640).
  • Netzwerk > Antworten: Es wurden verschiedene Probleme mit der Darstellung verschiedener Formate und Codierungen behoben (1523128, 1509336, 1523128, 41481944, 1509336).

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, 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 DevTools

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