Neu in den Entwicklertools (Chrome 120)

Sofia Emelianova
Sofia Emelianova
GitHub

Einstellung von Drittanbieter-Cookies

Ihre Website verwendet möglicherweise Drittanbieter-Cookies und es ist an der Zeit, entsprechende Maßnahmen zu ergreifen, bevor diese eingestellt werden. Informationen dazu, was Sie bei betroffenen Cookies tun können, finden Sie unter Vorbereitung auf die Einstellung von Drittanbieter-Cookies.

Das Kästchen Kästchen. Mit Problemen von Drittanbieter-Cookies ist für alle Chrome-Nutzer standardmäßig aktiviert. Auf dem Tab Probleme werden Sie jetzt über die Cookies informiert, die von der bevorstehenden Einstellung und schrittweisen Einstellung von Drittanbieter-Cookies betroffen sind. Sie können das Kästchen jederzeit deaktivieren, um diese Probleme nicht mehr zu sehen.

Auf dem Tab „Probleme“ wird eine Warnung zur bevorstehenden Einstellung von Drittanbieter-Cookies angezeigt.

Chromium-Problem: 1466310.

Cookies Ihrer Website mit dem Privacy Sandbox Analysis Tool analysieren

Die Erweiterung Privacy Sandbox Analysis Tool für DevTools befindet sich in aktiver Entwicklung. Die aktuelle Pre-Release-Version ist 0.3.2. Mit dem Tool können Sie nachvollziehen, wie auf Ihrer Website Cookies verwendet werden, und erhalten Informationen zu den neuen datenschutzfreundlichen Chrome APIs.

So analysieren Sie Ihre Cookies:

  1. Installieren Sie die Erweiterung in Chrome.
  2. Öffnen Sie Ihre Website in einem einzigen Tab, um die beste Analyse zu erhalten.
  3. Öffnen Sie die DevTools und gehen Sie zum Bereich Privacy Sandbox. Möglicherweise ist dieses Steuerfeld oben hinter dem Drop-down-Menü Mehr Tabs. ausgeblendet.
  4. Öffnen Sie den Bereich Cookies und klicken Sie auf Diesen Tab analysieren. Wenn das Tool keine Cookies gefunden hat, laden Sie die Seite neu.

Privacy Sandbox Analysis Tool

Weitere Informationen zur Verwendung des Privacy Sandbox Analysis Tools (PSAT) finden Sie unter den folgenden Links:

  • PSAT-Anleitung.
  • Wenn Sie vorhersagen möchten, was nach der Einstellung wahrscheinlich passieren wird, richten Sie eine Testumgebung ein.
  • Informationen dazu, wie Sie betroffene Aspekte identifizieren, finden Sie unter Allgemeine Analyseaktionen.
  • Informationen zum Analysieren gängiger Szenarien, darunter Analysen, E-Commerce, SSO-Dienste und eingebettete Inhalte, finden Sie in den Demobeispielen unter Analyseszenarien.

Weitere Informationen finden Sie unter Probleme melden.

Erweiterte Ignorierliste

Standardausnahmemuster für node_modules

In dieser Version wird der Standardreguläre Ausdruck als benutzerdefinierte Ausschlussregel unter Einstellungen. Einstellungen > Ignorierliste aktiviert. Damit Sie sich ganz auf Ihren Code konzentrieren können, überspringt der Debugger Skripts von /node_modules/ und /bower_components/ jetzt standardmäßig. Sie können diese Regel jederzeit in den Einstellungen deaktivieren.

Vorher und nachher: Hinzufügen eines regulären Ausdrucks

Chromium-Problem: 1496301

Ausnahmen beenden die Ausführung jetzt, wenn sie abgefangen oder durch nicht ignorierten Code übergeben werden

Wenn Sie Code debuggen und die Option Kästchen. Bei aufgefangenen Ausnahmen anhalten aktiviert ist, stoppt der Debugger die Ausführung bei den folgenden aufgefangenen Ausnahmen, sowohl synchron als auch asynchron:

  • Ausnahmen, die in nicht ignorierten Frames im Aufrufstack erfasst wurden.
  • Aufgefangene Ausnahmen, die nicht ignorierte Frames im Aufrufstack passieren. Siehe dazu den Screenshot.

Bei einer abgefangenen Ausnahme anhalten, die nicht ignorierten Code passiert hat.

Öffnen Sie diese Demoseite, um dieses Verhalten zu testen:

  1. Öffnen Sie „Entwicklertools“ > Quellen, fügen Sie den Ordner hidden der Ignorierliste hinzu und aktivieren Sie Kästchen. Bei erkannten Ausnahmen anhalten.
  2. Klicken Sie auf der Seite unter der Liste der Szenarien „Erfasst“ auf die verschiedenen Schaltflächen, um zu sehen, wie die Ausführung in den genannten Fällen pausiert wird.

Um die Ausführung bei erkannten und/oder nicht abgefangenen Ausnahmen (sofern aktiviert) in asynchronen Aufrufen anzuhalten, sucht der Debugger übergreifend nach Ablehnungs-Handlern. Ab dieser Version sagt der Debugger nicht mehr voraus, dass Promise.finally() eine Ausnahme abfangen wird, ähnlich wie der Block try...finally keine Ausnahmen abfängt.

Chromium-Probleme: 1489312, 1291064.

x_google_ignoreList in Quellzuordnungen in ignoreList umbenannt

In der Spezifikation für Quellkarten wurde ignoreList anstelle von x_google_ignoreList eingeführt. In den DevTools wird jetzt der neue Name mit einem Fallback für den alten unterstützt. Frameworks und Bundler können jetzt den neuen Feldnamen verwenden.

Mit Quellzuordnungen können Sie Fehler in dem von Ihnen geschriebenen Code beheben, anstatt den von Ihrer Website bereitgestellten Code zu reduzieren.

Weitere Informationen zu Quellzuordnungen finden Sie unter:

Neuer Eingabemodus für die Remote-Fehlerbehebung

Sie können jetzt beim Remote-Debuggen eines Chrome-Tabs zwischen Touch- und Mauseingabe wechseln. Beispiel: Sie führen eine Chrome-Instanz mit der --remote-debugging-port=<port> aus und stellen über chrome://inspect/#devices eine Verbindung zu diesem Netzwerkziel her.

Im Video sehen Sie, wie das Umschalten des Eingabemodus funktioniert.

Chromium-Problem: 1410433

Im Bereich „Elemente“ werden jetzt URLs für #document-Knoten angezeigt

Damit Sie iFrames leichter debuggen können, wird im Steuerfeld Elemente jetzt neben #document Knoten documentURL angezeigt.

Im Vorher-/Nachher-Vergleich wird neben dem Knoten #document die documentURL angezeigt.

Chromium-Problem: 1376976

Gültige Content Security Policy im Bereich „Anwendung“

Sie können sich jetzt die Details der Content Security Policy (CSP) eines geprüften Frames ansehen. Wenn Sie sich die Details ansehen möchten, gehen Sie zu Anwendung > Frames, wählen Sie einen Frame aus und scrollen Sie nach unten zum Abschnitt Content Security Policy (CSP).

Im Abschnitt „Content Security Policy“ auf dem Tab „Anwendung“

Chromium-Problem: 1424714

Verbesserte Fehlerbehebung bei Animationen

Auf dem Tab Animationen haben Sie jetzt folgende Möglichkeiten:

  • Klicken Sie auf eine beliebige Stelle in der Kopfzeile der Zeitachse, um den Abspielkopf festzulegen. Die Animation wird weiter abgespielt, wenn sie bereits abgespielt wurde, und stoppt ansonsten. Bisher mussten Sie es ziehen.
  • Ändern Sie die Größe der Namensspalte, um die vollständigen Animationsnamen zu sehen.

Chromium-Probleme: 1492460, 1489721

Dialogfeld „Ist dieser Code vertrauenswürdig?“ in „Quellen“ und Warnung vor Self-XSS in der Console

Der Kästchen.-Test Warnung bei Self-XSS beim Einfügen von Code anzeigenist standardmäßig aktiviert. Self-XSS (Self Cross-Site Scripting) ist ein Angriff, bei dem Sie dazu verleitet werden, schädlichen Code in DevTools einzufügen, wodurch ein Angreifer die Kontrolle über Ihre Webkonten und personenbezogenen Daten erlangen kann.

Wenn Sie ein neuer DevTools-Nutzer sind und versuchen, Code einzufügen, wird im Bereich Quellen jetzt das Dialogfeld Vertrauen Sie diesem Code? angezeigt. In der Konsole wird jetzt eine ähnliche Warnung angezeigt. Fügen Sie nur den Code ein, den Sie verstehen und selbst geprüft haben. Geben Sie zum Einfügen allow pasting ein, wenn Sie dazu aufgefordert werden. Nachdem das Einfügen einmal erlaubt wurde, wird die Warnung nie wieder angezeigt.

Das Dialogfeld „Ist dieser Code vertrauenswürdig?“, das beim Einfügen von Code in „Quellen“ angezeigt wird.

Chromium-Problem: 345205

Event-Listener-Haltepunkte in Webworkern und Worklets

Wenn Sie unter Quellen > Ereignis-Listener-Bruchstellen einen Ereignis-Bruchpunkt festlegen, wird der Debugger nicht nur bei diesem Ereignis auf Ihrer Website angehalten, sondern auch, wenn das entsprechende Ereignis in einem Webworker oder Worklet beliebigen Typs auftritt, einschließlich des Shared Storage Worklets.

Der Debugger wird pausiert, wenn ein Dienstarbeiter die Funktion „set timeout“ aufruft.

Chromium-Problem: 1445175.

Das neue Medienlogo für <audio> und <video>

Sie können das neue Mediensymbol für <audio>- und <video>-Elemente jetzt im Bereich Elemente aktivieren. Wenn du auf das Badge klickst, wirst du zum Bereich Medien weitergeleitet, wo du Fehler bei diesen Elementen beheben kannst.

Das neue Mediensymbol für Audio- und Video-Tags ist aktiviert.

Diese Funktion befindet sich in der Entwicklung und wird weiter verbessert. Das DevTools-Team möchte sich bei Junseo (Jeremy) Yoo für diese Verbesserung bedanken.

Chromium-Problem: 1448214.

„Vorabladen“ in „Spekulatives Laden“ umbenannt

Um eine übermäßige Verwendung des bisherigen Begriffs zu vermeiden und das Verhalten besser zu beschreiben, wurde Anwendung > Vorabladen in Spekulatives Laden umbenannt. Mit dem vorhersagenden Laden wird ein nahezu sofortiger Seitenaufbau ermöglicht. Dabei werden anhand von Spekulationsregeln, die Sie für Ihre Website definieren können, die am häufigsten besuchten Seiten vorab gerendert und vorab abgerufen.

Vorher und nachher: umbenanntes Vorladen in spekulatives Laden

Chromium-Problem: 1478888.

Lighthouse 11.2.0

Im Bereich Lighthouse wird jetzt Lighthouse 11.2.0 ausgeführt. Vollständige Liste der Änderungen

Dieses Update umfasst eine Überarbeitung der Kategorie „Leistung“. Leistungsstatistiken werden jetzt anhand ihrer geschätzten Auswirkungen auf die Leistungsmesswerte bewertet und priorisiert. Außerdem enthält die Leistungsbewertung detailliertere Informationen dazu, wie sich die einzelnen Messwerte auf die Bewertung auswirken.

Die Leistung vor und nach der Leistungsoptimierung

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

Chromium-Probleme: 772558

Verbesserte Bedienungshilfen

In dieser Version wurden die Bedienungshilfen verbessert:

  • Screenreader geben jetzt den Status (angeklickt oder nicht angeklickt) von Kästchen unter Quellen > Unterbrechungen an.
  • Sie können jetzt über die Tastatur auf das Drop-down-Menü Ähnliche Probleme ausblenden zugreifen.

Chromium-Probleme: 1488645, 1484918.

Sonstige Highlights

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

  • Leistung: Es wurde behoben, dass in der Aufzeichnung manchmal der LCP-Indikator fehlte (1487136).
  • Spekulative Ladevorgänge: Die vollständigen URLs für Ziele im Drop-down-Menü im Bereich Netzwerk wurden korrigiert (1471020).
  • Abdeckung:
    • Feste zeilenweise Abdeckung für gut gedruckten Code (1464974).
    • Die Informationen zur Abdeckung werden jetzt aktualisiert, wenn die Seite neu geladen wird (1494457).
  • Konsole:
    • Die teilweise Textauswahl in Nachrichten wurde behoben (1487449).
    • Das Flackern des Drop-down-Menüs für die automatische Vervollständigung wurde behoben (1487453).
    • Unterstützte Klammern in Stack-Pfaden und URLs in Stack-Traces (1473926)
  • Quellen: Syntaxhervorhebung des TypeScript-Schlüssels using (1490515) wird unterstützt.
  • Im Menü Schnellzugriff werden jetzt private Methoden angezeigt (1492957).
  • Anwendung > Hintergrunddienste: In der oberen Aktionsleiste wird der Text jetzt beim Ändern der Größe umgebrochen (1487276).
  • Elemente > Stile:
    • Die Auflösung der übernommenen CSS-Variablen für Elemente mit Anzeigenflächen wurde korrigiert (1492162).
    • Beim Deaktivieren einer CSS-Eigenschaft werden jetzt deren Kommentare entfernt, um Syntaxunterbrechungen zu korrigieren (1101224).
  • Netzwerk: In der Spalte Priorität wird jetzt eine Kurzinfo mit Informationen zur ursprünglichen Priorität angezeigt. Diese wird auch angezeigt, wenn die Option Zeilen mit großen Anfragen aktiviert ist (1495735).
  • Einstellung:
    • Die Einstellung Farbformat wurde in früheren Versionen deaktiviert und ist jetzt entfernt.
    • Die Option „Alle Überschreibungen löschen“ unter Quellen wurde aufgrund der geringen Nutzung nach der Optimierung von Überschreibungen entfernt (1473681).

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 dies tun.

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 aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.