Neu in den Entwicklertools (Chrome 120)

Sofia Emelianova
Sofia Emelianova
GitHub

Einstellung von Drittanbieter-Cookies

Auf Ihrer Website werden möglicherweise Drittanbieter-Cookies verwendet. Es wird Zeit, entsprechende Maßnahmen zu ergreifen, da diese bald nicht mehr unterstützt werden. Weitere Informationen dazu, was Sie mit 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 einzelnen Tab, um die beste Analyse zu erhalten.
  3. Öffnen Sie die Entwicklertools 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.

Das Privacy Sandbox Analysis Tool

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

  • Anleitung für den PSAT
  • Wenn Sie vorhersagen möchten, was nach der Einstellung wahrscheinlich passieren wird, richten Sie eine Testumgebung ein.
  • Informationen dazu, welche Aspekte betroffen sind, 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 nur auf Ihren Code konzentrieren können, werden im Debugger jetzt standardmäßig Scripts aus /node_modules/ und /bower_components/ übersprungen. 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 die Entwicklertools > Quellen, fügen Sie den Ordner hidden der Ignorieren-Liste hinzu und aktivieren Sie Kästchen. Bei aufgetretenen Ausnahmen pausieren.
  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 abgefangenen und/oder nicht abgefangenen Ausnahmen (falls aktiviert) in asynchronen Aufrufen anzuhalten, sucht der Debugger in Promises 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 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 den von Ihnen geschriebenen Code debuggen, anstatt den minimierten Code, der von Ihrer Website gesendet wird.

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 einfacher debuggen können, wird im Bereich Elemente jetzt documentURL neben #document-Knoten 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 die Details aufrufen möchten, klicken Sie auf 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 Zeitachsenüberschrift, um den Abspielkopf zu setzen. Die Animation wird fortgesetzt, wenn sie bereits wiedergegeben wurde, andernfalls wird sie beendet. Bisher mussten Sie sie ziehen.
  • Ändern Sie die Größe der Spalte „Name“, um die vollständigen Namen der Animationen zu sehen.

Chromium-Probleme: 1492460, 1489721

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

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 Code ein, den Sie verstehen und den Sie 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 Sie auf das Symbol klicken, gelangen Sie zum Bereich Medien, in dem Sie diese Elemente beheben können.

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 Preloading 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

Diese Version enthält folgende Verbesserungen der Barrierefreiheit:

  • 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

Hier sind einige wichtige Fehlerkorrekturen und Verbesserungen in dieser Version:

  • 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:
    • Die Zeile für Zeile prüfbare Abdeckung für schön formatierten Code wurde korrigiert (1464974).
    • Die Abdeckungsinformationen werden jetzt beim Aktualisieren der Seite aktualisiert (1494457).
  • Konsole:
    • Die teilweise Textauswahl in Nachrichten wurde korrigiert (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: Unterstützung der Syntaxhervorhebung des TypeScript-Keywords using (1490515).
  • Im Menü Schnell öffnen werden jetzt auch 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 Steckplätzen wurde korrigiert (1492162).
    • Wenn eine CSS-Property deaktiviert wird, werden die zugehörigen Kommentare jetzt entfernt, um Syntaxfehler zu beheben (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

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

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.