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. 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 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:

  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 Entwicklertools und rufen Sie den Bereich Privacy Sandbox auf. Dieser Bereich ist möglicherweise oben hinter der Drop-down-Schaltfläche Mehr Tabs. verborgen.
  4. Ö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. 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 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 Kästchen. 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:

  1. Öffnen Sie „Entwicklertools“ > Quellen, fügen Sie den Ordner hidden zur Ignorierliste hinzu und klicken Sie auf Kästchen. Bei erkannten Ausnahmen anhalten.
  2. Klicken Sie auf der Seite in der Liste der Szenarien auf die verschiedenen Schaltflächen, um zu sehen, dass 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. Wenn Sie sich die Details ansehen möchten, gehen Sie zu Application > 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.

Dialogfeld „Vertrauen Sie diesem Code?“ unter „Quellen“ und „Selbst-XSS-Warnung“ in der Console

Der Test Kästchen. 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.

Das Dialogfeld &quot;Vertrauen Sie diesem Code?&quot; beim Einfügen von Code in Quellen.

Chromium-Problem: 345205.

Event-Listener-Haltepunkte in Web Workern und Worklets

Wenn Sie unter Quellen > Ereignis-Listener-Haltepunkte einen Ereignis-Haltepunkt festlegen, wird der Debugger nicht nur bei diesem Ereignis auf Ihrer Website angehalten, sondern 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.

Das neue Medien-Badge für Audio- und Video-Tags wurde 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 wurde in spekulatives Laden umbenannt

Um eine übermäßige Verwendung des vorherigen Begriffs zu vermeiden und das Verhalten besser widerzuspiegeln, wurde Anwendung > Vorabladen 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 > Haltepunkte an.
  • 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:
    • 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 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:
    • 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.
  • Einstellungen:
    • 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.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • 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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde gekündigt.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59