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 Rekorder-Erweiterungen zum Exportieren und Replay ist jetzt verfügbar.

Um die Sammlung direkt im Rekorder zu öffnen, wählen Sie in der Aktionsleiste oben im Bereich Rekorder die Option Herunterladen Exportieren > Erweiterungen abrufen... aus.

Netzwerkverbesserungen

In dieser Version wurden einige Verbesserungen im Bereich Netzwerk vorgenommen.

Fehlerursache in der Spalte „Status“

In der Spalte Status wird jetzt immer der Grund für den Fehler angezeigt. Bisher mussten Sie das check_box Große Anfragezeilen aktivieren oder die Anfrage in der Tabelle auswählen.

Die Vorher- und Nachher-Anzeige der Fehlerursache in der Spalte „Status“.

Chromium-Probleme: 1506760.

Verbessertes Untermenü „Kopieren“

Das Untermenü Kopieren einer Anfrage ist jetzt besser organisiert.

Der Vorher-Nachher-Effekt im 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

In dieser Version wurden im Bereich Leistung einige Verbesserungen vorgenommen.

Navigationspfade auf der Zeitachse

Auf der Zeitachse oben im Steuerfeld Leistung können Sie jetzt Navigationspfade festlegen und zwischen ihnen wechseln.

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

Chromium-Probleme: 1467739.

Initiatoren von Ereignissen im Haupt-Track

Unter Leistung > Haupt-Track werden jetzt standardmäßig Pfeile angezeigt, die die Initiatoren und die folgenden von ihnen verursachten Ereignisse verbinden.

  • Entwertung von Stil oder Layout -> Stile neu berechnen oder Layout
  • Animationsframe anfordern -> Animationsframe ausgelöst
  • Rückruf bei Inaktivität anfordern -> Rückruf bei Inaktivität anfordern
  • Installations-Timer -> Timer ausgelöst
  • WebSocket erstellen -> Senden... und WebSocket-Handshake empfangen oder WebSocket löschen

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

Ein Pfeil von der Anfrage und dem Auslösen eines inaktiven Callbacks.

Chromium-Probleme: 1434596.

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

Im Bereich Leistung der Node.js-Entwicklertools 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.

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

Chromium-Probleme: 1511813.

Verbesserungen an Elementen

In dieser Version wurden im Bereich Elemente eine Reihe von Verbesserungen vorgenommen.

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

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

Sie können jetzt die CSS-Pseudoelemente ::view-transition unter Styles mit dem Prüftool bearbeiten.

Die Vorher- und Nachher-Bearbeitung unterstützt Pseudoelemente mit Ansichtsübergang.

Weitere Informationen finden Sie unter Reibungslose und einfache Übergänge mit der View Transitions API.

Chromium-Probleme: 1511233.

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

Das Attribut align-content funktioniert jetzt mit allen Blockcontainern, einschließlich table-caption und table-cell. Zuvor funktionierte dies nur mit Raster und Flex.

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

Chromium-Probleme: 1500511.

Neue Tastenkombination und neuer Befehl in „Quellen“

Sie können jetzt in Quellen mit der Tastenkombination Cmd (Mac) / Cmd (Windows) + Cmd auf eine Zeilennummer klicken, um einen Logpoint zu erstellen. Diese Tastenkombination ist eine Ergänzung der bereits vorhandenen Cmd (Mac) / Cmd (Windows) + Klick für bedingte Haltepunkte.

Im Befehlsmenü wird der neue Befehl Aktive Datei in der Navigator-Seitenleiste anzeigen angezeigt. Er hat dieselbe Funktion wie die entsprechende Option im Drop-down-Menü des Editors.

Mit dem neuen Befehl wird die aktive Datei in der Navigator-Seitenleiste angezeigt.

Chromium-Probleme: 1486933, 1467464.

Sicherheitsstatus für emulierte faltbare Geräte

Im Gerätemodus können Sie jetzt den Status eines emulierten faltbaren Geräts festlegen: Continuous oder Folded. Die durchgehende Position bezieht sich auf eine „flache“ Position und gefaltet bildet einen Winkel zwischen den einzelnen Bereichen des Displays.

Ein Drop-down-Menü mit Statusoptionen.

Außerdem wird in der Geräteliste ein neues emuliertes faltbares Gerät eingeführt: Asus Zenbook Fold.

Chromium-Problem: 1066842.

Dynamisches Design

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

  1. Öffnen Sie einen neuen Tab und klicken Sie rechts unten auf Bearbeiten Chrome anpassen.
  2. Wählen Sie unter „Darstellung“ ein Design über Hintergrund Designs ändern 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.

Klicken Sie unter Netzwerk auf eine Anfrage mit einem Warnungssymbol und öffnen Sie den Tab Cookies.

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

Gehen Sie unter Anwendung zu Speicher > Cookies und klicken Sie auf eine Domain. Gelb hervorgehobene Cookies werden nicht im Browser gespeichert.

Die Vorher- und Nachher-Markierung von Drittanbieter-Cookies im Bereich „Anwendung“.

Bewegen Sie den Mauszeiger auf das Warnsymbol, um eine Kurzinfo mit den Problemen aufzurufen, und 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 Namen sortiert.

Chromium-Probleme: 1506225, 1503961.

Lighthouse 11.4.0

Im Bereich Lighthouse wird jetzt Lighthouse 11.4.0 ausgeführt. Eine vollständige Liste der Änderungen finden Sie hier. Zu den wichtigsten Änderungen gehört unter anderem die neue Prüfung, mit der Sie feststellen können, ob auf Ihrer Website noch Drittanbieter-Cookies verwendet werden.

Audit, bei dem Drittanbieter-Cookies erkannt werden.

Grundlegende Informationen zur Verwendung des Bereichs Lighthouse in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558.

Bedienungshilfen

In dieser Version wurden die Bedienungshilfen verbessert:

  • Wenn Sie die Einstellungen unter Einstellungen > Tests öffnen, ist das Suchfeld jetzt automatisch hervorgehoben.
  • Die Schaltfläche Abbrechen Eingabe löschen unter Netzwerk > Filter ist jetzt fokussierbar.
  • Die Dateistruktur unter Quellen > Seite wird jetzt im Modus mit hohem Kontrast korrekt angezeigt.
  • Screenreader geben jetzt Folgendes korrekt an:
    • Der Status der Kästchen in Quellen > Haltepunkte.
    • Positions- und Indexinformationen für eine Liste von Vorschlägen.
    • Aktionsergebnis beim Hinzufügen oder Löschen eines Standorts unter Einstellungen Einstellungen > Standorte.
    • In den Einstellungen unter Einstellungen > Ignorierliste können Sie Gruppen von Ausschlussregeln (allgemein oder benutzerdefiniert) erstellen.

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

Verschiedene Highlights

Im Folgenden sind einige bemerkenswerte Fehlerbehebungen und Verbesserungen in dieser Version aufgeführt:

  • Animationen:
    • Der Fehler, bei dem Screenshot-Popover 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: Ein Fehler mit einem falschen lila Punktsymbol auf dem Tab Headers (1507856) wurde behoben.
    • Vorschau: Ein Fehler mit unnötiger doppelter Decodierung wurde behoben (1509336).
    • Ein Fehler wurde behoben, aufgrund dessen kurze Anfragen nicht angezeigt wurden (1509862).
  • Anwendung > IndexedDB: Neu angeordnete Schaltflächen in der Aktionsleiste, um sie an andere Bereiche anzupassen (1393800).
  • Sensoren: Es wurde ein Fehler behoben, bei dem der Standort nicht verfügbar war und der Rückruf falsch war (1486859).
  • Leistung:
    • Die Schaltfläche Papierkorb speichern hat jetzt ein entsprechendes Symbol: „mop“ anstelle eines „behälters“ (1507530).
    • Im Leistungs-Trace werden jetzt beim Aufrufen von about:blank (1509947) Daten gespeichert.

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools, kannst hochmoderne Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Kontaktaufnahme mit dem Team für Chrome-Entwicklertools

Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.

  • Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • Twittern Sie unter @ChromeDevTools.
  • Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde gekündigt.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59