Diese Seite wurde von der Cloud Translation API übersetzt.

Neu in den Entwicklertools (Chrome 120)

Sofia Emelianova

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 Probleme mit Drittanbieter-Cookies einschließen ist standardmäßig für alle Chrome-Nutzer aktiviert. Auf dem Tab Probleme werden Sie daher jetzt vor den Cookies gewarnt, die von der bevorstehenden Einstellung und Einstellung von Drittanbieter-Cookies betroffen sind. Sie können das Häkchen jederzeit entfernen, wenn Sie diese Probleme nicht mehr sehen möchten.

Eine Warnung zur bevorstehenden Einstellung von Drittanbieter-Cookies auf dem Tab „Probleme“.

Chromium-Problem: 1466310.

Cookies Ihrer Website mit dem Privacy Sandbox Analysis Tool analysieren

Die Erweiterung Privacy Sandbox Analysis Tool für die Entwicklertools wird derzeit aktiv mit der aktuellen Vorabveröffentlichung Version 0.3.2 entwickelt. Mit diesem Tool können Sie nachvollziehen, wie Cookies auf Ihrer Website verwendet werden, und Hinweise zu den neuen datenschutzfreundlichen APIs von Chrome erhalten.

So analysieren Sie Ihre Cookies:

Installieren Sie die Erweiterung in Chrome.
Öffnen Sie Ihre Website in einem einzigen Tab, um die beste Analyse zu erhalten.
Öffnen Sie die Entwicklertools und rufen Sie den Bereich Privacy Sandbox auf. Dieser Bereich ist möglicherweise oben hinter der Drop-down-Schaltfläche verborgen.
Öffnen Sie den Abschnitt Cookies und klicken Sie auf Diesen Tab analysieren. Wenn das Tool keine Cookies findet, aktualisieren Sie die Seite.

Das Privacy Sandbox Analysis Tool.

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

PSAT-Anleitung.
Richten Sie eine Bewertungsumgebung ein, um vorherzusagen, was nach Inkrafttreten der Einstellung voraussichtlich passieren wird.
Informationen dazu, wie Sie betroffene Aspekte identifizieren, finden Sie unter Allgemeine Analyseaktionen.
In den Demobeispielen unter Analyseszenarien erfahren Sie, wie Sie häufige Szenarien analysieren, z. B. Analysen, E-Commerce, SSO-Dienste, eingebettete Inhalte und mehr.

Weitere Informationen finden Sie im Hilfeartikel Probleme melden.

Erweiterter Eintrag zum Ignorieren

Standardausschlussmuster für `node_modules`

Mit dieser Version wird der standardmäßige reguläre Ausdruck als benutzerdefinierte Ausschlussregel unter Einstellungen > aktiviert. Liste zu ignorierender Nutzer 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 nach dem Hinzufügen eines regulären Ausdrucks.

Chromium-Problem: 1496301.

Ausnahmen stoppen die Ausführung jetzt, wenn sie erfasst wird oder nicht ignorierten Code durchläuft

Wenn Sie bei der Code-Fehlerbehebung die Option Bei erkannten Ausnahmen anhalten aktiviert haben, stoppt Debugger jetzt die Ausführung bei den folgenden synchronen und asynchronen Ausnahmen:

Ausnahmen, die in nicht ignorierten Frames im Aufrufstack erfasst werden.
Es wurden Ausnahmen erfasst, die nicht ignorierte Frames im Aufrufstack passieren. Sehen Sie sich als Beispiel den Screenshot an.

Pause bei einer erfassten Ausnahme, die über nicht ignorierten Code weitergegeben wurde.

Wenn Sie das Verhalten testen möchten, öffnen Sie diese Demoseite:

Entwicklertools öffnen > Quellen, fügen Sie den hidden Ordner zur Ignorierliste hinzu und aktivieren Sie Bei erkannten Ausnahmen anhalten.
Auf der Seite unter dem Feld „Erfasst“ Szenarien ansehen, klicken Sie auf die verschiedenen Schaltflächen, um zu sehen, wie die Ausführung in den genannten Fällen pausiert wurde.

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 prognostiziert der Debugger nicht mehr, dass Promise.finally() eine Ausnahme abfangen wird, ähnlich wie beim try...finally-Block nicht mehr.

Chromium-Probleme: 1489312, 1291064.

`x_google_ignoreList` wurde in Quellzuordnungen in `ignoreList` umbenannt

Für die Source Maps-Spezifikation wurde das Feld ignoreList anstelle von x_google_ignoreList übernommen. Die Entwicklertools unterstützen 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 Fehler in dem von Ihnen geschriebenen Code beheben, anstatt den von Ihrer Website bereitgestellten Code zu reduzieren.

Weitere Informationen zu Quellzuordnungen finden Sie unter:

Neue Ein/Aus-Schaltfläche für den Eingabemodus während der Remote-Fehlerbehebung

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

Im Video sehen Sie, wie der Eingabemodus in Aktion umschaltet.

Chromium-Problem: 1410433.

Im Steuerfeld „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- und Nachher-Ergebnis wird „documentURL“ neben dem Knoten „#document“ angezeigt.

Chromium-Problem: 1376976.

Effektive Content Security Policy im Anwendungsbereich

Sie können sich jetzt die Details der Content Security Policy (CSP) eines geprüften Frames ansehen. Die Details findest du unter Anwendung > Frames: Wählen Sie einen Frame aus und scrollen Sie nach unten zum Abschnitt Content Security Policy (CSP).

Der Bereich „Content Security Policy“ auf dem Tab „Anwendung“.

Chromium-Problem: 1424714.

Verbesserte Fehlerbehebung für 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.

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

Der Test Warnung zu Self-XSS beim Einfügen von Code anzeigen Test 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. Angreifer können so die Kontrolle über Ihre Webkonten und personenbezogenen Daten erlangen.

Wenn Sie ein neuer Nutzer der Entwicklertools sind und versuchen, Code einzufügen, wird im Bereich Quellen jetzt das Dialogfeld Ist diesem Code vertrauenswürdig? angezeigt und in der Konsole wird jetzt eine ähnliche Warnung angezeigt. Fügen Sie nur den Code ein, den Sie verstehen und überprüft haben. Geben Sie zum Einfügen allow pasting ein, wenn Sie dazu aufgefordert werden. Wenn das Einfügen bereits einmal erlaubt wurde, wird diese Warnung nie mehr angezeigt.

Die Meldung "Ist diesem Code vertrauenswürdig?" wenn Sie Code in Quellen einfügen.

Chromium-Problem: 345205.

Event-Listener-Haltepunkte in Web Workern und Worklets

Wenn Sie unter Quellen > Event Listener Breakpoints Neben dem Pausieren dieses Ereignisses auf Ihrer Website wird der Debugger jetzt auch pausiert, wenn das entsprechende Ereignis in einem Web Worker oder Worklet eines beliebigen Typs auftritt, einschließlich des Shared Storage Worklet.

Der Debugger wird pausiert, wenn ein Service Worker die Funktion zum Festlegen des Zeitlimits aufruft.

Chromium-Problem: 1445175.

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

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

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 wurde in spekulatives Laden umbenannt

Um die übermäßige Verwendung des vorherigen Begriffs zu vermeiden und das Verhalten besser wiederzugeben, klicken Sie auf Anwendung > Preloading wurde in Spekulative Ladevorgänge umbenannt. Spekulatives Laden ermöglicht einen beinahe sofortigen Seitenaufbau auf der Grundlage von Spekulationsregeln, die Sie für Ihre Website definieren können, um die meisten aufgerufenen Seiten vorab zu laden und vorab abzurufen.

Das Vorher- und nach dem Umbenennen des Vorabladens in das spekulative Laden.

Chromium-Problem: 1478888.

Lighthouse 11.2.0

Im Bereich Lighthouse wird jetzt Lighthouse 11.2.0 ausgeführt. Eine vollständige Liste der Änderungen finden Sie hier.

Dieses Update umfasst auch eine Überarbeitung der Leistungskategorie. Leistungsstatistiken werden jetzt basierend auf den geschätzten Auswirkungen auf die Leistungsmesswerte bewertet und priorisiert. Darüber hinaus enthält die Anzeige des Leistungswerts detailliertere Informationen dazu, wie sich die einzelnen Messwerte auf den Wert auswirken.

Leistung vor und nach der Überarbeitung

Grundlegende Informationen zur Verwendung des Bereichs Lighthouse in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Probleme: 772558.

Verbesserte Bedienungshilfen

In dieser Version wurden die Bedienungshilfen verbessert:

Screenreader geben jetzt den Status (aktiviert oder deaktiviert) von Kästchen unter Quellen an. Haltepunkte:
Du kannst jetzt über die Tastatur auf das Drop-down-Menü Probleme wie dieses ausblenden zugreifen.

Chromium-Probleme: 1488645, 1484918.

Verschiedene Highlights

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

Leistung: Ein Problem mit der manchmal fehlenden LCP-Anzeige in der Aufzeichnung (1487136) wurde behoben.
Spekulative Ladevorgänge: Die vollständigen URLs für Ziele wurden im Drop-down-Menü im Bereich Netzwerk korrigiert (1471020).
Abdeckung: <ph type="x-smartling-placeholder">
- Feste zeilenweise Abdeckung für gut gedruckten Code (1464974).
- Die Informationen zur Abdeckung werden jetzt aktualisiert, wenn die Seite neu geladen wird (1494457).
Konsole: <ph type="x-smartling-placeholder">
- Die Teiltextauswahl in Nachrichten wurde korrigiert (1487449).
- Das Flackern im Drop-down-Menü für die automatische Vervollständigung (1487453) wurde behoben.
- Klammern werden in Stapelpfaden und URLs in Stacktraces unterstützt (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 umgebrochen, wenn die Größe geändert wird (1487276).
Elemente > Stile: <ph type="x-smartling-placeholder">
- 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 zur Priorität (1495735) angezeigt. Dies ist auch der Fall, wenn das Kästchen Zeilen große Anfragen angeklickt ist.
Einstellung von Produkten und Funktionen: <ph type="x-smartling-placeholder">
- Die Einstellung Farbformat war in früheren Versionen deaktiviert und wurde entfernt.
- Die Option „Alle Überschreibungen löschen“ in Quellen wurde nach der Optimierung von Überschreibungen (1473681) aufgrund der geringen Nutzung entfernt.

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.