Neue Funktionen in den Entwicklertools (Chrome 122)

Sofia Emelianova
Sofia Emelianova

Die offizielle Sammlung von Rekorder-Erweiterungen ist verfügbar

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

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

Netzwerkverbesserungen

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

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

In der Spalte Status wird jetzt immer ein Fehlergrund angezeigt. Bisher mussten Sie das Kästchen Big request rows aktivieren oder die Anfrage in der Tabelle auswählen.

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

Chromium-Probleme: 1506760

Verbessertes Untermenü „Kopieren“

Das Untermenü Kopieren eines Antrags ist jetzt besser organisiert.

Das Vorher-Nachher-Vergleichsbild für das verbesserte Untermenü „Kopieren“.

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

Chromium-Probleme: 1267033, 1276452, 798498.

Leistungsverbesserungen

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

Navigationspfade in der Zeitachse

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

Wenn Sie einen Klickpfad festlegen möchten, wählen Sie einen Bereich in 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 Zoomebenen wechseln möchten, klicken Sie auf die entsprechende Breadcrumb-Ansicht in der Kette oben auf der Zeitachse. Im nächsten Video sehen Sie, wie Breadcrumbs funktionieren.

Chromium-Probleme: 1467739

Ereignisauslöser im Hauptpfad

Im Bereich Leistung > Haupt werden jetzt standardmäßig Pfeile angezeigt, die Auslöser und die nachfolgenden Ereignisse verbinden, die sie verursacht haben.

  • Stil- oder Layoutfehler -> Stile neu berechnen oder Layout
  • Animationsframe anfordern -> Animationsframe ausgelöst
  • Inaktiven Callback anfordern -> Inaktiven Callback 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 das Auslösen eines Callbacks bei Inaktivität.

Chromium-Probleme: 1434596

Menü zur Auswahl einer JavaScript-VM-Instanz für Node.js DevTools

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

Vorher und nachher: Ein neues Menü zum Auswählen einer JavaScript-VM-Instanz wurde hinzugefügt.

Chromium-Probleme: 1511813.

Verbesserungen bei Elementen

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

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

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

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

Die Vorher-Nachher-Bearbeitung von Pseudoelementen für Ansichtsübergänge.

Weitere Informationen finden Sie unter Einfache und flüssige Übergänge mit der View Transitions API.

Chromium-Probleme: 1511233.

Unterstützung der Property align-content für Blockcontainer

Die Property align-content funktioniert jetzt mit allen Blockcontainern, einschließlich table-caption und table-cell. Bisher funktionierte er nur mit „grid“ und „flex“.

Die Unterstützung für das Ausrichten von Inhalten vor und nach Blockcontainern.

Chromium-Probleme: 1500511.

Neue Tastenkombination und neuer Befehl unter „Quellen“

Sie können jetzt Cmd (Mac) / Strg (Win) + Umschalt gedrückt halten und auf eine Zeilennummer in Quellen klicken, um einen Logpunkt zu erstellen. Diese Tastenkombination ist eine Ergänzung zur bereits vorhandenen Tastenkombination Befehlstaste (Mac) / Strg (Win) + Klick für bedingte Haltestellen.

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

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

Chromium-Probleme: 1486933, 1467464.

Unterstützung für die Position von emulierten faltbaren Geräten

Im Gerätemodus können Sie jetzt die Position eines emulierten faltbaren Geräts festlegen: Ausgeklappt oder Zugeklappt. Die kontinuierliche Haltung bezieht sich auf eine „flache“ Position und bildet im zusammengeklappten Zustand einen Winkel zwischen den Bereichen des Displays.

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

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

Chromium-Problem: 1066842.

Dynamisches Design

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 oder eine Farbvorlage aus.

Die Entwicklertools entsprechen dem in „Darstellung“ ausgewählten Farbdesign.

Chromium-Probleme: 1483276

Warnungen zur Einstellung von Drittanbieter-Cookies in den Bereichen „Netzwerk“ und „Anwendung“

Sowohl im Bereich Netzwerk als auch im Bereich Anwendung werden jetzt Cookies hervorgehoben und Warnungen neben Cookies angezeigt, die von den Einschränkungen für Drittanbieter durch die Schutzmaßnahmen gegen Tracking betroffen sind.

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

Die Anzahl der Drittanbieter-Cookies im Bereich „Netzwerk“ vor und nach der Erfassung

Klicken Sie auf der Seite Anwendung auf Speicher > Cookies und wählen Sie eine Domain aus. Gelb markierte Cookies werden nicht im Browser gespeichert.

Vorher und nachher: Hervorhebung von Drittanbieter-Cookies im Bereich „Anwendung“

Bewegen Sie den Mauszeiger auf das Warnsymbol, um eine Kurzinfo zu den Problemen zu sehen. Klicken Sie auf das Symbol, um den Tab Probleme mit weiteren Informationen zu öffnen.

Außerdem werden die Cookies in der Tabelle jetzt standardmäßig nach Name 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 Zu den bemerkenswerten Änderungen gehört die neue Prüfung, mit der Sie feststellen können, ob auf Ihrer Website noch Drittanbieter-Cookies verwendet werden.

Prüfung, bei der Drittanbieter-Cookies erkannt 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:

  • Wenn Sie die Einstellungen > Tests öffnen, ist das Feld Suchen 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 lesen jetzt Folgendes richtig vor:
    • Der Status der Kästchen unter Quellen > Unterbrechungen.
    • Informationen zur Position und zum Index für eine Liste mit Vorschlägen.
    • Aktionsergebnis beim Hinzufügen oder Löschen eines Standorts in den Einstellungen > Standorte.
    • Gruppen von allgemeinen oder benutzerdefinierten Ausschlussregeln unter Einstellungen > Ignorierliste

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

Sonstige Highlights

Hier sind einige wichtige Fehlerkorrekturen und Verbesserungen in dieser Version:

  • Animationen:
    • Der Fehler wurde behoben, bei dem das Pop-over für Screenshots außerhalb des sichtbaren Bereichs gerendert wurde (1506991).
    • Der Fehler wurde behoben, durch den entfernte Animationsknoten nicht als entfernt gekennzeichnet wurden (1506561).
  • Netzwerk:
    • Header-Überschreibungen: Es wurde ein Fehler behoben, bei dem auf dem Tab Header ein falsches lila Punktsymbol angezeigt wurde (1507856).
    • Vorabversion: Ein Fehler bei der unnötigen doppelten Dekodierung wurde behoben (1509336).
    • Ein Fehler wurde behoben, durch den Kurzanfragen nicht angezeigt wurden (1509862).
  • Anwendung > IndexedDB: Die Schaltflächen in der Aktionsleiste wurden neu angeordnet, um für Einheitlichkeit mit anderen Bereichen zu sorgen (1393800).
  • Sensoren: Fehler behoben, bei dem bei einem nicht verfügbaren Standort ein fehlerhafter Rückruf als erfolgreich angezeigt wurde (1486859).
  • Leistung:
    • Die Schaltfläche Müll einsammeln hat jetzt ein passendes Symbol: „Wischmop“ statt „Mülleimer“ (1507530).
    • In der Leistungs-Trace werden jetzt Daten bei der Navigation zu about:blank (1509947) beibehalten.

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.