Neue Funktionen in den Entwicklertools (Chrome 122)

Sofia Emelianova
Sofia Emelianova
GitHub

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.

Fehlerursache 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 Copy as cURL jetzt der richtige Befehl in die Zwischenablage unter Windows 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.

  • Entwertung von Stil oder Layout -> 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 dem Auslösen eines inaktiven Callbacks.

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 Pseudoelement ::view-transition kann jetzt unter „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 Reibungslose und einfache Ü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 sie nur mit „grid“ und „flex“.

Die Vorher- und Nachher-Ausrichtung von Content wird in Blockcontainern unterstützt.

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 den Status eines emulierten faltbaren Geräts festlegen: Continuous oder Folded. 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 unter „Darstellung“ ausgewählten Farbdesign.

Chromium-Probleme: 1483276.

Warnungen zur Einstellung von Drittanbieter-Cookies im Bereich „Netzwerk“ und „Anwendung“

In den Bereichen Netzwerk und Anwendung werden jetzt Warnungen neben Cookies hervorgehoben und angezeigt, die von den Drittanbietereinschränkungen von Schutz vor Tracking betroffen sind.

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

Der Wert „Vorher“ und „Nach dem Erfassen von Drittanbieter-Cookies“ im Steuerfeld „Netzwerk“.

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

Die Vorher- und Nachher-Markierung von Drittanbieter-Cookies im Anwendungsbereich.

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 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.
    • Unter Einstellungen > Ignorierliste können Sie Gruppen von Ausschlussregeln (allgemein oder benutzerdefiniert) erstellen.

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

Sonstige Highlights

Hier sind einige wichtige Fehlerkorrekturen und Verbesserungen in dieser Version:

  • Animationen:
    • Der Fehler, bei dem Screenshot-Pop-over außerhalb des zulässigen Bereichs gerendert wurden, wurde behoben (1506991).
    • Der Fehler, bei dem entfernte Animationsknoten nicht als entfernt gekennzeichnet waren (1506561), wurde behoben.
  • 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: Behebung eines Fehlers, durch den 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: „Mopp“ statt „Mülleimer“ (1507530).
    • In der Leistungsaufzeichnung werden jetzt Daten bei der Navigation zu about:blank (1509947) gespeichert.

Vorschaukanäle herunterladen

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

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools