Neue Funktionen in den Entwicklertools (Chrome 122)

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 herunterladen Exportieren > Erweiterungen abrufen... in der Aktionsleiste oben im Rekorder-Bereich.

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.

Chromium-Probleme: 1506760.

Verbessertes Untermenü „Kopieren“

Das Untermenü Kopieren einer Anfrage ist jetzt besser organisiert.

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

Das Menü Leistung > Im 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
• Callback bei Inaktivität anfordern -> Rückruf bei Inaktivität auslösen
• Timer installieren -> Timer ausgelöst
• WebSocket erstellen -> Senden... und WebSocket-Handshake erhalten 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.

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.

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.

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.

Chromium-Probleme: 1500511.

Neue Tastenkombination und neuer Befehl in „Quellen“

Sie können jetzt die Tastenkombination Cmd (Mac) / Strg (Windows) + Umschalttaste + Klicken auf eine Zeilennummer in Quellen verwenden, um einen Logpoint zu erstellen. Diese Tastenkombination ist eine Ergänzung der bereits vorhandenen Befehlstaste (Mac) / Strg (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.

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 kontinuierliche Haltung bezieht sich auf eine „flache“ zusammengeklappt ist, bildet einen Winkel zwischen den einzelnen Bereichen des Displays.

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.

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.

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

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.

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 du die Einstellungen öffnest, Einstellungen > Tests: Das Suchfeld ist jetzt automatisch hervorgehoben.
• Über die Schaltfläche Abbrechen Eingabe löschen unter Netzwerk > Filter ist jetzt fokussierbar.
• Dateistruktur unter Quellen > Seite wird im Modus mit hohem Kontrast jetzt korrekt angezeigt.
• Screenreader geben jetzt Folgendes korrekt an: <ph type="x-smartling-placeholder">
  </ph>
  • Status der Kästchen unter Quellen > Haltepunkte:
  • Positions- und Indexinformationen für eine Liste von Vorschlägen.
  • Aktionsergebnis beim Hinzufügen oder Löschen eines Standorts in den Einstellungen Einstellungen > Standorte:
  • Gruppen von Ausschlussregeln (allgemein oder benutzerdefiniert) in den Einstellungen Einstellungen > Ignorierliste:

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: <ph type="x-smartling-placeholder">
  </ph>
  • 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: <ph type="x-smartling-placeholder">
  </ph>
  • 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: <ph type="x-smartling-placeholder">
  </ph>
  • Die Schaltfläche Make Garbage hat jetzt ein passendes Symbol: „mop“. statt einer „bin“ (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.
• Problem mit den Entwicklertools über Weitere Optionen melden > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
• 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