Neue Funktionen in den Entwicklertools (Chrome 123)

Sofia Emelianova
Sofia Emelianova
GitHub

Easter Egg finden

Das DevTools-Team hat dieses Jahr zum 1. April ein Easter Egg in DevTools versteckt.

Suchen Sie nach einem bunten 💫-Emoji.

Aktualisierungen des Bereichs „Elemente“

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

Fokussierte Seite in „Elemente“ > „Stile“ emulieren

Auf dem Tab Elemente > Stile ist jetzt unter der Schaltfläche Elementstatus umschalten (:hov) die Option Fokus auf Seite simulieren verfügbar. Bisher war diese Option nur im Bereich Rendering verfügbar.

Wenn Sie den Fokus von der Seite auf die Entwicklertools verlagern, werden einige Overlay-Elemente, die durch den Fokus ausgelöst werden, automatisch ausgeblendet. 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 ob es im Fokus wäre.

Das Vorher und Nachher einer emulierten fokussierten Seite auf dem Tab „Stile“.

Chromium-Problem: 1468393.

Farbauswahl, Winkelmesser und Easing-Editor in var()-Fallbacks

Um die CSS-Bearbeitung zu vereinfachen, können Sie auf dem Tab Elemente > Styles jetzt die Farbauswahl, die Winkeluhr und den Easing-Editor in var()-Fallbacks verwenden.

Die Tools „Farbauswahl“, „Winkelmesser“ und „Easing-Editor“ vor und nach dem Rendern in var()-Fallbacks.

Chromium-Problem: 1520417.

Tool für CSS-Länge wird eingestellt

Das Tool zum Erstellen von CSS-Längen wird nicht mehr unterstützt, da es laut Feedback den Workflow verlangsamt und keinen großen Mehrwert bietet.

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

Wenn Sie das Längen-Tool wieder aktivieren möchten, entfernen Sie das Häkchen bei Einstellungen > Tests > CSS-Tool zum Erstellen von <length> auf dem Tab „Stile“ einstellen.

Wenn Sie dieses Tool weiterhin verwenden möchten, würde das DevTools-Team gern Ihre Meinung dazu hören und erfahren, wie das Längentool Sie bei Ihrer Arbeit unterstützt. Sie können Feedback unter crbug/1522657 geben.

Der Test zur Einstellung ist deaktiviert.

Pop-over für das ausgewählte Suchergebnis unter „Leistung“ > „Haupt-Track“

Um die Suche zu erleichtern, wird im Flammen-Diagramm unter Leistung > Main jetzt ein Pop-over über dem entsprechenden Ereignis angezeigt, wenn Sie die Suchergebnisse durchlaufen.

Vorher und nachher: Ein Pop-over wird über dem ausgewählten Suchergebnis angezeigt.

Chromium-Problem: 1523279.

Aktualisierungen im Netzwerkbereich

In dieser Version gibt es einige Updates für den Bereich Netzwerk.

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

Auf dem Tab Netzwerk > EventStream sind folgende Informationen verfügbar:

  • 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 nach dem Hinzufügen einer Schaltfläche zum Löschen und eines Suchfilters.

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

Außerdem werden auf dem Tab EventStream jetzt auch Ereignisse erfasst, die Server über Fetch/XHR senden, nicht nur über die EventSource API. Demoseite

Chromium-Problem: 1488863, 40659493.

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

Auf dem Tab Netzwerk > Cookies werden jetzt neben Cookies, die ansonsten durch die Einstellung von Drittanbieter-Cookies blockiert worden wären, Kurzinfos mit den Gründen für die Ausnahme angezeigt.

Vorher- und Nachher-Ansicht eines Tooltips mit einem Ausnahme-Grund für ein Drittanbieter-Cookie.

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

Chromium-Problem: 41491846.

Alle Haltepunkte in „Quellen“ aktivieren und deaktivieren

Im Bereich Quellen > Haltepunkte sind die Optionen Aktivieren und Alle Haltepunkte deaktivieren wieder im Drop-down-Menü verfügbar. Bisher wurden diese Optionen beim Redesign der Breakpoints ausgelassen.

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

Die Situation vor und nach der Wiedereinführung der Optionen zum Aktivieren und Deaktivieren.

Chromium-Problem: 1522037.

Geladene Skripts in DevTools für Node.js ansehen

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

Vorher und nach dem Hinzufügen des Tab „Scripts“ mit einer Baumstruktur geladener Scripts.

Chromium-Problem: 1518364.

Lighthouse 11.5.0

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

Eine wichtige Änderung ist ein neuer Audit, mit dem die Ursachen für Layoutverschiebungen geschätzt werden. Dieses Audit ersetzt das Audit „Layout-Shift-Elemente“, in dem nur die Elemente aufgeführt wurden, die von Layout-Shifts betroffen sind.

Eine neue Prüfung, die die Ursachen für Layoutverschiebungen schätzt.

Die Grundlagen zur Verwendung des Lighthouse-Bereichs in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558.

Bedienungshilfen

Diese Version bietet die folgenden Verbesserungen in Bezug auf die Barrierefreiheit:

  • Screenreader geben jetzt Folgendes aus:
    • Der Linktext Weitere Informationen neben den Selektortypen im Bereich Recorder.
    • Wenn keine Tests mit dem Filter in den übereinstimmen Einstellungen > Tests.
    • Die Bestätigung der Aktion beim Entfernen, Bestätigen oder Wiederherstellen eines Kurzbefehls in den Einstellungen > Kurzbefehle.
  • Die Tabelle in den Einstellungen > Standorte wird jetzt korrekt als Tabelle für Bedienungshilfen gerendert.

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

Sonstige Highlights

Hier sind einige wichtige Fehlerbehebungen und Verbesserungen in dieser Version:

  • Die Schriftarten in den Entwicklertools wurden aktualisiert, damit sie mit Chrome übereinstimmen (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 die Lesbarkeit des Codes zu verbessern (1523640).
  • Netzwerk > Antworten: Verschiedene Anzeigeprobleme mit unterschiedlichen Formaten und Codierungen wurden behoben (1523128, 1509336, 1523128, 41481944, 1509336).

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.

Neu in den Entwicklertools

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