Neu in den Entwicklertools (Chrome 120)

Sofia Emelianova
Sofia Emelianova
GitHub

Einstellung von Drittanbieter-Cookies

Ihre Website verwendet möglicherweise Drittanbieter-Cookies. Wir empfehlen Ihnen, entsprechende Maßnahmen zu ergreifen, da diese bald eingestellt werden. Weitere Informationen zur Behebung von betroffenen Cookies finden Sie unter Vorbereitung auf die Deaktivierung 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 auf die Cookies hingewiesen, die von der bevorstehenden Einstellung und Einstellung von Drittanbieter-Cookies betroffen sind. Sie können das Häkchen jederzeit entfernen, damit diese Probleme nicht mehr angezeigt werden.

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

Chromium-Problem: 1466310.

Cookies Ihrer Website mit dem Privacy Sandbox-Analysetool analysieren

Die Erweiterung Privacy Sandbox-Analysetool für die Entwicklertools wird derzeit mit der neuesten Vorabveröffentlichung der Version 0.3.2 entwickelt. Das Tool informiert Sie darüber, wie Cookies auf Ihrer Website verwendet werden, und bietet Informationen zu den neuen datenschutzfreundlichen Chrome APIs.

So analysieren Sie Ihre Cookies:

  1. Installieren Sie die Erweiterung in Chrome.
  2. Öffnen Sie Ihre Website auf einem einzigen Tab, um die bestmögliche Analyse zu erhalten.
  3. Öffne die Entwicklertools und rufe 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 Tab analysieren. Falls das Tool keine Cookies findet, aktualisiere die Seite.

Das Privacy Sandbox-Analysetool

Weitere Informationen zur Verwendung des Privacy Sandbox-Analysetools (PSAT) finden Sie hier:

  • PSAT's How To
  • Richten Sie eine Bewertungsumgebung ein, um vorherzusagen, was nach dem Inkrafttreten der Einstellung wahrscheinlich passieren wird.
  • Informationen zum Identifizieren von betroffenen Aspekten finden Sie unter Allgemeine Analyseaktionen.
  • Um zu erfahren, wie Sie gängige Szenarien wie Analysen, E-Commerce, SSO-Dienste, eingebettete Inhalte und mehr analysieren können, sehen Sie sich die Demobeispiele unter Analyseszenarien an.

Weitere Informationen

Erweiterte Liste zum Ignorieren

Standard-Ausschlussmuster für node_modules

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

Das Datum vor und nach dem Hinzufügen eines regulären Ausdrucks.

Chromium-Problem: 1496301.

Wenn Ausnahmen erkannt oder nicht ignorierten Code übergeben werden, wird die Ausführung jetzt gestoppt

Wenn Sie beim Debuggen von Code die Option Kästchen. Bei erkannten Ausnahmen anhalten aktiviert haben, stoppt der Debugger jetzt die Ausführung bei den folgenden abgefangenen Ausnahmen (synchron und asynchron):

  • Ausnahmen, die in nicht ignorierten Frames im Aufrufstack erkannt werden.
  • Ausnahmen abgefangen, die nicht ignorierte Frames im Aufrufstack passieren. Sehen Sie sich zum Beispiel den Screenshot an.

Anhalten bei einer erkannten Ausnahme, die nicht ignorierten Code übergeben hat.

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

  1. Öffnen Sie die Entwicklertools > Quellen, fügen Sie den Ordner hidden zur Ignorieren-Liste hinzu und klicken Sie das Kästchen Kästchen. Bei erkannten Ausnahmen anhalten an.
  2. Klicken Sie auf der Seite in der Liste der Szenarien auf die verschiedenen Schaltflächen und sehen Sie sich an, wie die Ausführung in den genannten Fällen pausiert wurde.

Um die Ausführung bei erkannten und/oder nicht abgefangenen Ausnahmen (wenn aktiviert) in asynchronen Aufrufen zu pausieren, sucht der Debugger über Promise-Objekte 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 Ausnahme erkennt.

Chromium-Probleme: 1489312, 1291064.

x_google_ignoreList in Quellzuordnungen in ignoreList umbenannt

In der Spezifikation für Quellzuordnungen 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.

Mithilfe von Quellzuordnungen können Sie Fehler im von Ihnen geschriebenen Code beheben, anstatt im minimierten Code Ihrer Website zu arbeiten.

Weitere Informationen zu Quellzuordnungen finden Sie unter:

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

Beim Remote-Debugging eines Chrome-Tabs können Sie jetzt zwischen Berührungs- und Mauseingabe wechseln. Das ist beispielsweise der Fall, wenn Sie eine Chrome-Instanz mit dem --remote-debugging-port=<port> ausführen und über chrome://inspect/#devices eine Verbindung zu diesem Netzwerkziel herstellen.

Im Video sehen Sie, wie der Eingabemodus umgeschaltet wird.

Chromium-Problem: 1410433.

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

Damit Sie das Debuggen von iFrames vereinfachen können, wird im Bereich Elemente neben #document-Knoten jetzt documentURL angezeigt.

Vorher und Nachher zeigen „documentURL“ neben dem Knoten „#document“ an.

Chromium-Problem: 1376976.

Effektive Content Security Policy im Anwendungsbereich

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

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

Chromium-Problem: 1424714.

Verbessertes Debugging bei Animationen

Auf dem Tab Animationen sind jetzt folgende Aktionen verfügbar:

  • Klicken Sie auf eine beliebige Stelle im Zeitachsen-Header, um den Abspielkopf festzulegen. Die Animation wird weiter abgespielt, sofern sie bereits abgespielt wurde, andernfalls wird sie angehalten. Bisher mussten Sie ihn 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 „Self-XSS“-Warnung in der Console

Der Test Kästchen. 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. Ein Angreifer erhält dadurch die Kontrolle über Ihre Webkonten und personenbezogenen Daten.

Wenn Sie ein neuer Nutzer der Entwicklertools 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. Wenn das Einfügen einmal erlaubt wurde, wird die Warnung nie mehr angezeigt.

Das Dialogfeld „Ist diesem Code vertrauen?“ beim Einfügen von Code in die Quellen.

Chromium-Problem: 345205.

Haltepunkte des Event-Listeners in Web Workern und Worklets

Wenn Sie unter Quellen > Ereignis-Listener-Haltepunkte einen Haltepunkt für ein Ereignis festlegen, wird der Debugger jetzt nicht nur bei diesem Ereignis auf Ihrer Website pausiert, sondern jetzt auch pausiert, wenn das entsprechende Ereignis in einem Web Worker oder einem Worklet eines beliebigen Typs eintritt, einschließlich dem Worklet mit freigegebenem Speicher.

Debugger wird pausiert, wenn ein Service Worker die Funktion zum Festlegen der Zeitüberschreitung aufruft.

Chromium-Problem: 1445175.

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

Du kannst jetzt das neue Medienlogo für die Elemente <audio> und <video> im Steuerfeld Elemente aktivieren. Wenn Sie auf das Logo klicken, werden Sie zum Bereich Medien weitergeleitet, wo Sie Fehler in diesen Elementen beheben können.

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

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

Chromium-Problem: 1448214.

Vorabladen umbenannt in spekulatives Laden

Damit der vorherige Begriff nicht zu sehr verwendet und das Verhalten besser wiedergegeben werden kann, wurde Anwendung > Vorabladen in spekulative Ladevorgänge umbenannt. Spekulatives Laden ermöglicht den Seitenaufbau nahezu sofort. Dies basiert auf Spekulationsregeln, die Sie definieren können, um die meisten aufgerufenen Seiten vorab zu rendern und vorab abzurufen.

Das Datum vor und nach der Umbenennung des Vorabladens 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 Leistungskategorie. Leistungsstatistiken werden jetzt anhand der geschätzten Auswirkungen auf die Leistungsmesswerte bewertet und priorisiert. Darüber hinaus enthält die Anzeige des Leistungswerts detailliertere Informationen darüber, wie sich die einzelnen Messwerte auf den Wert auswirken.

Die Vorher-Nachher-Performance-Überarbeitung.

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

Chromium-Probleme: 772558.

Verbesserte Bedienungshilfen

In dieser Version wurden die folgenden Verbesserungen der Bedienungshilfen vorgenommen:

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

Chromium-Probleme: 1488645, 1484918.

Sonstige Highlights

Dies sind einige bemerkenswerte Korrekturen und Verbesserungen in dieser Version:

  • Leistung: Die gelegentlich fehlende LCP-Anzeige in der Aufzeichnung wurde korrigiert (1487136).
  • Spekulatives Laden: Die vollständigen URLs für Ziele im Drop-down-Menü im Bereich Netzwerk (1471020) wurden korrigiert.
  • Abdeckung:
    • Feste Abdeckung der Zeile für Zeile für schön gedruckten Code (1464974).
    • Die Informationen zur Abdeckung werden jetzt beim Aktualisieren der Seite aktualisiert (1494457).
  • Console:
    • Die Teiltextauswahl in Nachrichten wurde korrigiert (1487449).
    • Das Flackern im Drop-down-Menü für die automatische Vervollständigung (1487453) wurde behoben.
    • Unterstützte Klammern in Stapelpfaden und URLs in Stacktraces (1473926).
  • Quellen: Die Syntaxhervorhebung des TypeScript-Keywords using (1490515) wurde unterstützt.
  • Im Menü Schnell öffnen werden jetzt private Methoden (1492957) angezeigt.
  • Anwendung > Hintergrunddienste: In der oberen Aktionsleiste (1487276) wird jetzt der Text umgebrochen, wenn die Größe angepasst wird.
  • Elemente > Stile:
    • Die Auflösung der übernommenen CSS-Variablen für Elemente mit Anzeigenflächen (1492162) wurde korrigiert.
    • Beim Deaktivieren einer CSS-Eigenschaft werden jetzt die zugehörigen Kommentare entfernt, um Syntaxumbrüche zu beheben (1101224).
  • Netzwerk: In der Spalte Priorität wird jetzt eine Kurzinfo mit Informationen zur anfänglichen Priorität angezeigt (dies wird auch angezeigt, wenn Zeilen für große Anfragen aktiviert ist) (1495735).
  • Einstellungen:
    • Die Einstellung Farbformat wurde in früheren Versionen deaktiviert und ist jetzt entfernt.
    • Die Option „Alle Überschreibungen löschen“ in Quellen wurde aufgrund der geringen Nutzung nach der Optimierung von Überschreibungen (1473681) entfernt.

Vorschaukanäle herunterladen

Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

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 Erste Schritte

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

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