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 für Export und Wiedergabe ist jetzt online.

Wenn du die Sammlung direkt über den Rekorder öffnen möchtest, wähle oben im Steuerfeld Rekorder in der Aktionsleiste die Option Herunterladen Exportieren > Erweiterungen abrufen... aus.

Netzwerkverbesserungen

In dieser Version wurden einige Verbesserungen im Bereich Netzwerk vorgenommen.

Fehlergrund in der Spalte „Status“

In der Spalte Status wird jetzt immer ein Grund für den Fehler angezeigt. Bisher mussten Sie das check_box Big Request Rows (Zeilen mit großen Anfragen) aktivieren oder die Anfrage in der Tabelle auswählen.

Das Datum vor und nach dem Anzeigen des Fehlers in der Spalte „Status“.

Chromium-Probleme: 1506760.

Verbessertes Untermenü "Kopieren"

Das Untermenü Kopieren einer Anfrage ist jetzt übersichtlicher strukturiert.

Der Vorher-Nachher-Vergleich zum 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

In dieser Version wurden einige Verbesserungen im Bereich Leistung vorgenommen.

Navigationspfade auf der Zeitachse

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

Wenn Sie einen Navigationspfad festlegen möchten, wählen Sie auf der Zeitachse einen Bereich aus, bewegen Sie den Mauszeiger darauf und klicken Sie auf die Schaltfläche N ms zoom_in. Sie können mehrere verschachtelte Navigationspfade hintereinander erstellen. Wenn Sie zwischen den Zoomstufen wechseln möchten, klicken Sie auf den entsprechenden Navigationspfad in der Kette oberhalb der Zeitachse. Im nächsten Video sehen Sie, wie Navigationspfade dargestellt werden.

Chromium-Probleme: 1467739.

Ereignisinitiatoren im Haupt-Track

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

  • Stil- oder Layoutentwertung -> Stile neu berechnen oder Layout
  • Animationsframe anfordern > Ausgelöste Animationsframe
  • Callback bei Inaktivität anfordern -> Callback bei Inaktivität auslösen
  • Timer installieren -> Timer ausgelöst
  • Create WebSocket -> Send... (WebSocket erstellen) und Receive WebSocket Handshake (WebSocket-Handshake empfangen) oder WebSocket löschen

Um die Pfeile zu sehen, suchen Sie im Trace nach einem solchen Ereignis und klicken Sie darauf. Bisher war diese Funktion eine experimentelle Funktion.

Ein Pfeil von der Anfrage und Auslösung 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 JavaScript Profiler, der demnächst eingestellt wird, verfügbar.

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

Chromium-Probleme: 1511813.

Verbesserungen von Elementen

Diese Version enthält eine Reihe von Verbesserungen am Steuerfeld Elemente.

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 unter „Stile“ bearbeitet werden

Sie können jetzt die CSS-Pseudoelemente ::view-transition in Stile mit dem Inspector-Stylesheet bearbeiten.

Unterstützung für die Vorher-/Nachher-Bearbeitung von Pseudoelementen des Ansichtsübergangs

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

Chromium-Probleme: 1511233.

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

Das Attribut align-content funktioniert jetzt mit allen Blockcontainern, einschließlich table-caption und table-cell. Früher funktionierte es nur mit Raster und Flex.

Die Unterstützung von „before“ und „Align-content“ in Blockcontainern.

Chromium-Probleme: 1500511.

Neue Tastenkombination und neuen Befehl unter „Quellen“

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

Im Befehlsmenü wird der neue Befehl Aktive Datei in der Seitenleiste des Navigationsmenüs anzeigen abgerufen, der dieselbe Funktion wie die entsprechende Option im Drop-down-Menü des Editors hat.

Der neue Befehl, mit dem die aktive Datei in der Seitenleiste des Navigators angezeigt wird.

Chromium-Probleme: 1486933, 1467464.

Unterstützung des Sicherheitsstatus für emulierte faltbare Geräte

Im Gerätemodus können Sie jetzt den Status eines emulierten faltbaren Geräts festlegen: Kontinuierlich oder Zugeklappt. Die kontinuierliche Haltung bezieht sich auf eine „flach“ Position. Falten bildet einen Winkel zwischen den Abschnitten des Displays.

Ein Drop-down-Menü mit Optionen für die Haltung.

Außerdem wird in die Liste der Geräte ein neues emuliertes faltbares Gerät aufgenommen: Asus Zenbook Fold.

Chromium-Problem: 1066842.

Dynamisches Design

In den Entwicklertools wird jetzt automatisch das Farbschema von Chrome angepasst. So legen Sie ein Design fest:

  1. Öffnen Sie einen neuen Tab und klicken Sie rechts unten auf Bearbeiten Chrome anpassen.
  2. Unter „Darstellung“ können Sie unter Hintergrund Designs ändern ein Design auswählen oder eine Farbvorlage auswählen.

Die Entwicklertools stimmen mit dem unter „Darstellung“ ausgewählten Farbschema überein.

Chromium-Probleme: 1483276.

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

Im Bereich Netzwerk und Anwendung werden jetzt Warnungen neben Cookies hervorgehoben und angezeigt, die von den Einschränkungen für Drittanbieter im Tracking-Schutz betroffen sind.

Suchen Sie im Netzwerk eine Anfrage mit einem Warnsymbol, klicken Sie darauf und öffnen Sie den Tab Cookies.

Das Vorher-Nachher-Erfassen von Drittanbieter-Cookies im Steuerfeld „Netzwerk“.

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

Das Vorher-Nachher-Markieren von Drittanbieter-Cookies im Anwendungsfenster.

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 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. Vollständige Liste der Änderungen Zu den wichtigsten Änderungen gehört die neue Prüfung, mit der Sie feststellen können, ob Ihre Website noch Drittanbieter-Cookies verwendet.

Prüfung, die Drittanbieter-Cookies erkennt.

Informationen zu den Grundlagen der Verwendung des Steuerfelds Lighthouse in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558.

Bedienungshilfen

In dieser Version wurden die folgenden Verbesserungen der Bedienungshilfen vorgenommen:

  • Wenn Sie die Einstellungen Einstellungen > Tests öffnen, ist das Suchfeld jetzt automatisch fokussiert.
  • 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.
  • Folgendes wird jetzt korrekt von Screenreadern angesagt:
    • Der Status der Kästchen unter Quellen > Haltepunkte.
    • Positions- und Indexinformationen für eine Liste von Vorschlägen.
    • Das Aktionsergebnis beim Hinzufügen oder Löschen eines Standorts in den Einstellungen > Einstellungen > Standorte.
    • Gruppen von Ausschlussregeln (allgemein oder benutzerdefiniert) unter Einstellungen Einstellungen > Ignorieren-Liste.

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

Sonstige Highlights

Dies sind einige bemerkenswerte Korrekturen und Verbesserungen in dieser Version:

  • Animationen:
    • Der Fehler, dass das Screenshot-Pop-over außerhalb des gültigen Bereichs gerendert wurde (1506991) wurde behoben.
    • Der Fehler, bei dem entfernte Animationsknoten nicht als entfernt gekennzeichnet waren (1506561), wurde behoben.
  • Netzwerk:
    • Header-Überschreibungen: Ein Fehler mit einem falschen lilafarbenen Punktsymbol auf dem Tab Headers (1507856) wurde behoben.
    • Vorschau: Ein Fehler mit einer unnötigen doppelten Decodierung wurde behoben (1509336).
    • Es wurde ein Fehler behoben, aufgrund dessen kurze Anfragen nicht angezeigt wurden (1509862).
  • Application > IndexedDB: Schaltflächen in der Aktionsleiste neu angeordnet, um sie an andere Steuerfelder anzupassen (1393800).
  • Sensoren: Ein Fehler wurde behoben, bei dem ein nicht verfügbarer Standort falsch Callback 1486859 erfolgreich war.
  • Leistung:
    • Die Schaltfläche Müll entsorgen hat jetzt ein entsprechendes Symbol: „Mop“ anstelle eines „Containers“ (1507530).
    • Im Leistungs-Trace bleiben jetzt Daten erhalten, wenn about:blank (1509947) aufgerufen wird.

Vorschaukanäle herunterladen

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

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

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 Erste Schritte

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 abgebrochen.

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