Neue Funktionen in den Entwicklertools (Chrome 122)

Sofia Emelianova
Sofia Emelianova
GitHub

Die offizielle Sammlung von Rekorder-Erweiterungen ist jetzt verfügbar

Die offizielle Sammlung von Recorder-Erweiterungen für Export und Wiedergabe ist jetzt online.

Wenn Sie die Sammlung direkt über den Recorder öffnen möchten, wählen Sie in der Aktionsleiste oben im Bereich Recorder die Option Exportieren > Erweiterungen abrufen… aus.

Netzwerkverbesserungen

Diese Version enthält eine Reihe von Verbesserungen am Bereich Netzwerk.

Grund für den Fehler in der Spalte „Status“

In der Spalte Status wird jetzt immer ein Fehlergrund angezeigt. Bisher mussten Sie Zeilen mit großen Anfragen aktivieren oder die Anfrage in der Tabelle auswählen.

Vorher und nachher: Der Grund für den Fehler wird in der Spalte „Status“ angezeigt.

Chromium-Probleme: 1506760.

Verbessertes Untermenü „Kopieren“

Das Untermenü Kopieren einer Anfrage ist jetzt besser organisiert.

Das Untermenü „Kopieren“ vor und nach der Verbesserung.

Außerdem wird mit der Option Als cURL kopieren jetzt der richtige Befehl in die Zwischenablage unter Windows kopiert.

Chromium-Probleme: 1267033, 1276452, 798498.

Leistungsverbesserungen

Diese Version enthält eine Reihe von Verbesserungen für den Bereich Leistung.

Navigationspfade in der Zeitachse

In der Zeitachse oben im Bereich Leistung können Sie jetzt Breadcrumbs festlegen und zwischen ihnen wechseln.

Wenn Sie einen Breadcrumb festlegen möchten, wählen Sie einen Bereich auf der Zeitachse aus, bewegen Sie den Mauszeiger darauf und klicken Sie auf die Schaltfläche N ms . Sie können mehrere verschachtelte Breadcrumbs nacheinander erstellen. Wenn Sie zwischen Zoomstufen wechseln möchten, klicken Sie auf den entsprechenden Breadcrumb in der Kette über der Zeitachse. Im nächsten Video sehen Sie, wie Breadcrumbs funktionieren.

Chromium-Probleme: 1467739.

Ereignisauslöser im Haupt-Track

Unter Leistung > Haupt-Track werden jetzt standardmäßig Pfeile angezeigt, die Initiatoren und die nachfolgenden Ereignisse, die sie verursacht haben, miteinander verbinden.

  • Ungültigkeit von Stil oder Layout –> Stile neu berechnen oder Layout
  • Animationsframe anfordern -> Animationsframe ausgelöst
  • Inaktiven Callback anfordern -> Callback bei Inaktivität auslösen
  • Timer installieren -> Timer ausgelöst
  • WebSocket erstellen -> Senden... und WebSocket-Handshake empfangen oder WebSocket schließen

Wenn Sie die Pfeile sehen möchten, suchen Sie im Trace nach einem solchen Ereignis und klicken Sie darauf. Bisher war diese Funktion ein Test.

Ein Pfeil von der Anfrage und dem Auslösen eines Inaktivitäts-Callbacks.

Chromium-Probleme: 1434596.

Auswahlmenü für JavaScript-VM-Instanzen für Node.js DevTools

Im Bereich Leistung der Node.js DevTools können Sie jetzt eine JavaScript-VM-Instanz aus dem entsprechenden Drop-down-Menü in der Aktionsleiste auswählen. Eine ähnliche Funktion war im demnächst eingestellten JavaScript Profiler verfügbar.

Die Ansicht vor und nach dem Hinzufügen eines neuen Menüs, in dem Sie eine JavaScript-VM-Instanz auswählen können.

Chromium-Probleme: 1511813.

Verbesserungen bei Elementen

Diese Version enthält eine Reihe von Verbesserungen für den Bereich Elemente.

Zusätzlich zu den beiden folgenden Funktionen wird im Bereich Elemente jetzt der zuletzt geöffnete Tab gespeichert, z. B. Berechnet oder Eigenschaften.

Das Pseudoelement ::view-transition kann jetzt in „Stile“ bearbeitet werden.

Sie können jetzt die ::view-transition-CSS-Pseudoelemente in Styles über das Stylesheet des Inspektors bearbeiten.

Unterstützung für die Bearbeitung von Pseudo-Elementen für Ansichtsübergänge vor und nach der Bearbeitung.

Weitere Informationen finden Sie unter Smooth and simple transitions with the View Transitions API.

Chromium-Probleme: 1511233.

Unterstützung des Attributs align-content für Blockcontainer

Die align-content-Property funktioniert jetzt mit allen Blockcontainern, einschließlich table-caption und table-cell. Bisher funktionierte es nur mit Grid und Flex.

Die Unterstützung von „align-content“ vor und nach der Änderung in Blockcontainern.

Chromium-Probleme: 1500511.

Neue Tastenkombination und neuer Befehl in „Quellen“

Sie können jetzt Cmd (Mac) / Strg (Win) + Umschalt + Klick auf eine Zeilennummer in Quellen drücken, um einen Logpoint zu erstellen. Diese Tastenkombination ist eine Ergänzung zur bereits vorhandenen Tastenkombination Cmd (Mac) / Strg (Win) + Klick für bedingte Haltepunkte.

Das Befehlsmenü enthält den neuen Befehl Aktive Datei in der Navigator-Seitenleiste anzeigen, der dasselbe bewirkt wie die entsprechende Option im Drop-down-Menü des Editors.

Der neue Befehl zum Anzeigen der aktiven Datei in der Navigator-Seitenleiste.

Chromium-Probleme: 1486933, 1467464.

Unterstützung von Posen für emulierte faltbare Geräte

Mit dem Gerätemodus können Sie jetzt die Ausrichtung eines emulierten faltbaren Geräts festlegen: Kontinuierlich oder Gefaltet. Die kontinuierliche Position bezieht sich auf eine „flache“ Position, während die gefaltete Position einen Winkel zwischen den Abschnitten des Displays bildet.

Ein Drop-down-Menü mit Optionen für die Körperhaltung.

Außerdem wird der Liste Geräte ein neues emuliertes faltbares Gerät hinzugefügt: Asus Zenbook Fold.

Chromium-Problem: 1066842.

Dynamische Designs

Die Entwicklertools passen sich jetzt automatisch an das Farbschema von Chrome an. So legen Sie ein Design fest:

  1. Öffnen Sie einen neuen Tab und klicken Sie rechts unten auf Chrome anpassen.
  2. Wählen Sie unter „Darstellung“ über Designs ändern ein Design aus oder wählen Sie eine Farbvorlage aus.

Die Entwicklertools passen sich an das in den Einstellungen unter „Darstellung“ ausgewählte Farbdesign an.

Chromium-Probleme: 1483276.

Warnungen zum Auslaufen von Drittanbieter-Cookies in den Bereichen „Netzwerk“ und „Anwendung“

Sowohl im Bereich Netzwerk als auch im Bereich Anwendung werden jetzt Warnungen neben Cookies angezeigt, die von den Drittanbieter-Einschränkungen des Tracking-Schutzes betroffen sind.

Suchen Sie unter Netzwerk nach einer Anfrage mit einem , klicken Sie darauf und öffnen Sie den Tab Cookies.

Die Erfassung von Drittanbieter-Cookies im Netzwerkbereich vor und nach dem Blockieren.

Klicken Sie unter Anwendung auf Speicher > Cookies und dann auf eine Domain. Gelb markierte Cookies werden nicht im Browser gespeichert.

Vorher- und Nachher-Ansicht von Drittanbieter-Cookies im Bereich „Anwendung“

Bewegen Sie den Mauszeiger auf das Warnsymbol, um eine Kurzinfo mit einer Beschreibung der Probleme aufzurufen. Klicken Sie auf das Symbol, um den Tab Probleme mit weiteren Informationen zu öffnen.

Außerdem sind die Cookies in der Tabelle jetzt standardmäßig nach Namen sortiert.

Chromium-Probleme: 1506225, 1503961.

Lighthouse 11.4.0

Im Bereich Lighthouse wird jetzt Lighthouse 11.4.0 ausgeführt. Vollständige Liste der Änderungen Eine wichtige Änderung ist die neue Prüfung, mit der Sie erkennen können, ob auf Ihrer Website noch Drittanbieter-Cookies verwendet werden.

Prüfung, bei der Drittanbieter-Cookies erkannt werden.

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:

  • Wenn Sie die Einstellungen > Tests öffnen, ist das Feld Suche jetzt automatisch im Fokus.
  • Die Schaltfläche Eingabe löschen unter Netzwerk > Filter kann jetzt fokussiert werden.
  • Der Dateibaum unter Quellen > Seite wird jetzt im Modus mit hohem Kontrast korrekt angezeigt.
  • Screenreader geben jetzt Folgendes korrekt aus:
    • Der Status von Checkboxen unter Quellen > Breakpoints.
    • Positions- und Indexinformationen für eine Liste von Vorschlägen.
    • Aktionsergebnis beim Hinzufügen oder Löschen eines Standorts in den Einstellungen > Standorte.
    • Gruppen von Ausschlussregeln (allgemein oder benutzerdefiniert) in den Einstellungen > Ignorierliste.

Chromium-Probleme: 1504938, 1499868, 1512161, 1515224, 1515418, 1516998, 1517015.

Sonstige Highlights

Hier sind einige wichtige Fehlerbehebungen und Verbesserungen in dieser Version:

  • Animationen:
    • Der Fehler wurde behoben, bei dem das Screenshot-Pop-over außerhalb des Bildschirms gerendert wurde (1506991).
    • Der Fehler wurde behoben, durch den entfernte Animationsknoten nicht als entfernt gekennzeichnet wurden (1506561).
  • Netzwerk:
    • Header-Überschreibungen: Ein Fehler mit einem falschen lila Punkt-Symbol auf dem Tab Header wurde behoben (1507856).
    • Vorschau: Ein Fehler mit einer unnötigen doppelten Decodierung wurde behoben (1509336).
    • Es wurde ein Fehler behoben, durch den Short-Anfragen nicht angezeigt wurden (1509862).
  • Anwendung > IndexedDB: Die Schaltflächen in der Aktionsleiste wurden neu angeordnet, um die Konsistenz mit anderen Bereichen zu verbessern (1393800).
  • Sensoren: Ein Fehler mit einem fälschlicherweise erfolgreichen Callback für einen nicht verfügbaren Standort wurde behoben (1486859).
  • Leistung:
    • Die Schaltfläche Collect garbage (Müll sammeln) hat jetzt ein passendes Symbol, nämlich einen „Mopp“ statt eines „Mülleimers“ (1507530).
    • Im Leistungs-Trace bleiben Daten jetzt erhalten, wenn Sie zu about:blank navigieren (1509947).

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.