Neu in den Entwicklertools (Chrome 120)

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

Das Kästchen Mit Problemen von Drittanbieter-Cookies ist standardmäßig für alle Chrome-Nutzer 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.

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 der aktiven Entwicklung und ist in der neuesten Vorabversion 0.3.2 verfügbar. 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 Analyse zu optimieren.
3. Öffnen Sie die Entwicklertools und rufen Sie den Bereich Privacy Sandbox auf. Dieses Feld ist möglicherweise oben hinter der Drop-down-Schaltfläche  verborgen.
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.

Weitere Informationen zur Verwendung des Privacy Sandbox Analysis Tool (PSAT) finden Sie hier:

• PSAT – Anleitung
• Um vorherzusagen, was wahrscheinlich passieren wird, wenn die Einstellung in Kraft tritt, richten Sie eine Evaluierungsumgebung ein.
• Informationen dazu, welche Aspekte betroffen sind, finden Sie unter Allgemeine Analyseaktionen.
• Informationen zum Analysieren gängiger Szenarien, einschließlich Analysen, E-Commerce, SSO-Dienste und eingebettete Inhalte, finden Sie in den Demo-Beispielen unter Analyseszenarien.

Weitere Informationen finden Sie unter Probleme melden.

Erweiterte Ignorierliste

Standardmäßiges Ausschlussmuster für node_modules

In dieser Version kann der reguläre Standardausdruck als benutzerdefinierte Ausschlussregel unter Einstellungen > Ignorierliste verwendet werden. Damit Sie sich nur auf Ihren Code konzentrieren können, überspringt der Debugger jetzt standardmäßig Skripts aus /node_modules/ und /bower_components/. Sie können diese Regel jederzeit in den Einstellungen deaktivieren.

Chromium-Problem: 1496301.

Ausnahmen beenden jetzt die Ausführung, wenn sie abgefangen werden oder nicht ignorierter Code durchlaufen wird.

Wenn Sie Code mit aktiviertem Pause on caught exceptions (Bei abgefangenen Ausnahmen pausieren) debuggen, hält der Debugger die Ausführung jetzt bei den folgenden abgefangenen Ausnahmen an, sowohl synchron als auch asynchron:

• Ausnahmen, die in nicht ignorierten Frames im Aufrufstack abgefangen werden.
• Abgefangene Ausnahmen, die nicht ignorierte Frames im Aufrufstack durchlaufen. Ein Beispiel sehen Sie im Screenshot.

Um dieses Verhalten zu testen, öffnen Sie diese Demoseite:

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

Wenn die Ausführung bei abgefangenen und/oder nicht abgefangenen Ausnahmen (wenn aktiviert) in asynchronen Aufrufen pausiert werden soll, sucht der Debugger in Promises nach Ablehnungs-Handlern. Ab dieser Version sagt der Debugger nicht mehr voraus, dass Promise.finally() eine Ausnahme abfängt, ähnlich wie der try...finally-Block keine Ausnahmen abfängt.

Chromium-Probleme: 1489312, 1291064.

x_google_ignoreList in Quellzuordnungen in ignoreList umbenannt

In der Source Maps-Spezifikation wurde das Feld ignoreList anstelle von x_google_ignoreList übernommen. DevTools unterstützt jetzt den neuen Namen mit einem Fallback für den alten. Frameworks und Bundler können jetzt den neuen Feldnamen verwenden.

Mit Quellzuordnungen können Sie den von Ihnen geschriebenen Code debuggen und nicht den reduzierten Code, der von Ihrer Website bereitgestellt wird.

Weitere Informationen zu Quellzuordnungen finden Sie unter:

• Was sind Quellzuordnungen?
• Originalcode anstelle von mit Quellzuordnungen bereitgestelltem Code debuggen

Neue Ein-/Aus-Schaltfläche für den Eingabemodus beim Remote-Debugging

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

In diesem Video sehen Sie, wie der Eingabemodus umgeschaltet wird.

Chromium-Problem: 1410433.

Im Elementbereich 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.

Chromium-Problem: 1376976.

Gültige Content Security Policy im Anwendungsbereich

Sie können sich jetzt die Content Security Policy (CSP)-Details eines untersuchten Frames ansehen. Rufen Sie Anwendung > Frames auf, wählen Sie einen Frame aus und scrollen Sie nach unten zum Abschnitt Content Security Policy (CSP) (Inhaltsicherheitsrichtlinie).

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 zu positionieren. Die Animation wird weiter wiedergegeben, wenn sie bereits lief, andernfalls wird sie beendet. Bisher mussten Sie es ziehen.
• Passen Sie die Größe der Spalte „Name“ an, um die vollständigen Namen der Animationen zu sehen.

Chromium-Probleme: 1492460, 1489721.

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

Das -Experiment Warnung zu Self-XSS beim Einfügen von Code anzeigen ist standardmäßig aktiviert. Self-XSS (Self Cross-Site Scripting) ist ein Angriff, bei dem Sie dazu verleitet werden, schädlichen Code in die Entwicklertools einzufügen. Dadurch kann ein Angreifer die Kontrolle über Ihre Webkonten und personenbezogenen Daten erlangen.

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

Chromium-Problem: 345205.

Event-Listener-Haltepunkte in Webworkern und Worklets

Wenn Sie in Quellen > Event-Listener-Breakpoints einen Event-Breakpoint festlegen, wird nicht nur die Ausführung auf Ihrer Website angehalten, sondern der Debugger hält jetzt auch an, wenn das entsprechende Ereignis in einem Web-Worker oder Worklet eines beliebigen Typs, einschließlich des Shared Storage-Worklets, eintritt.

Chromium-Problem: 1445175.

Das neue Media-Badge für <audio> und <video>

Sie können das neue Mediensymbol jetzt für <audio>- und <video>-Elemente im Bereich Elemente aktivieren. Wenn Sie auf das Badge klicken, gelangen Sie zum Bereich „Media“, in dem Sie diese Elemente debuggen können.

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

Chromium-Problem: 1448214.

„Preloading“ wurde in „Spekulatives Laden“ umbenannt

Um den vorherigen Begriff nicht zu häufig zu verwenden und das Verhalten besser widerzuspiegeln, wurde Anwendung > Preloading in Speculative Loads umbenannt. Spekulatives Laden ermöglicht einen nahezu sofortigen Seitenaufbau basierend auf Spekulationsregeln, die Sie für Ihre Website definieren können, um die meisten aufgerufenen Seiten vorab zu rendern und abzurufen.

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 Leistungskategorie. Leistungsstatistiken werden jetzt anhand ihrer geschätzten Auswirkungen auf die Leistungsmesswerte bewertet und priorisiert. Außerdem enthält das Messgerät für den Leistungsindex detailliertere Informationen dazu, wie sich die einzelnen Messwerte auf den Index auswirken.

Die Grundlagen zur Verwendung des Lighthouse-Bereichs in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Probleme: 772558.

Verbesserte Bedienungshilfen

Diese Version bietet die folgenden Verbesserungen in Bezug auf die Barrierefreiheit:

• Screenreader geben jetzt den Status (aktiviert oder deaktiviert) von Checkboxen unter Quellen > Breakpoints an.
• Sie können jetzt mit der Tastatur auf das Drop-down-Menü Ähnliche Probleme ausblenden zugreifen.

Chromium-Probleme: 1488645, 1484918.

Sonstige Highlights

Hier sind einige wichtige Fehlerbehebungen und Verbesserungen in dieser Version:

• Leistung: Das manchmal fehlende LCP-Symbol in der Aufzeichnung wurde behoben (1487136).
• Spekulative Ladevorgänge: Die vollständigen URLs für Ziele im Drop-down-Menü im Bereich Netzwerk wurden korrigiert (1471020).
• Abdeckung:
  • Die zeilenweise Abdeckung für formatierten Code wurde korrigiert (1464974).
  • Die Informationen zur Abdeckung werden jetzt beim Neuladen der Seite aktualisiert (1494457).
• Console:
  • Problem mit der Auswahl von Textteilen in Nachrichten behoben (1487449).
  • Das Flackern des Drop-down-Menüs für die automatische Vervollständigung wurde behoben (1487453).
  • Unterstützung von Klammern in Stapelpfaden und URLs in Stapel-Traces (1473926)
• Quellen: Die Syntaxhervorhebung des TypeScript-Schlüsselworts using wurde unterstützt (1490515).
• Im Menü Schnell öffnen werden jetzt private Methoden angezeigt (1492957).
• Anwendung > Hintergrunddienste: In der oberen Aktionsleiste wird Text jetzt umgebrochen, wenn die Größe geändert wird (1487276).
• Elemente > Stile:
  • Die Auflösung der geerbten CSS-Variablen für Elemente mit Slots wurde korrigiert (1492162).
  • Wenn eine CSS-Property deaktiviert wird, werden ihre 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 Zeilen mit großen Anfragen aktiviert ist) (1495735).
• Einstellung:
  • Die Einstellung Farbformat wurde in früheren Versionen deaktiviert und ist jetzt nicht mehr verfügbar.
  • Die Option „Alle Überschreibungen löschen“ unter Quellen wurde aufgrund der geringen Nutzung nach der Optimierung von Überschreibungen (1473681) entfernt.

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

• Sie können uns Feedback und Funktionsanfragen unter crbug.com senden.
• Melden Sie ein DevTools-Problem in den Entwicklertools über das more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Senden Sie einen Tweet an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu Neuerungen in den DevTools oder den YouTube-Videos mit DevTools-Tipps.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in DevTools behandelt wurden.