Neuerungen in den Entwicklertools (Chrome 89)

Jecelyn Yeen

Unterstützung bei Verstößen gegen die vertrauenswürdigen Typen beheben

Breakpoint bei Verstößen gegen den vertrauenswürdigen Typ

Sie können jetzt im Bereich Quellen Haltepunkte festlegen und Ausnahmen bei Verstößen gegen vertrauenswürdige Typen abfangen.

Mit der Trusted Typen API können Sie DOM-basierte Cross-Site-Scripting-Sicherheitslücken verhindern. Hier erfahren Sie, wie Sie Anwendungen mit vertrauenswürdigen Typen schreiben, prüfen und warten, die keine DOM XSS-Sicherheitslücken enthalten.

Öffnen Sie im Bereich Quellen die Seitenleiste Debugger. Maximieren Sie den Abschnitt Haltepunkte für CSP-Verstöße und klicken Sie das Kästchen Verstöße gegen vertrauenswürdige Typen an, um die Ausnahmen zu pausieren. Probieren Sie es mit dieser Demoseite selbst aus.

Breakpoint bei Verstößen gegen den vertrauenswürdigen Typ

Chromium-Problem: 1142804

Im Bereich Quellen wird jetzt neben der Zeile, die gegen den vertrauenswürdigen Typ verstößt, ein Warnsymbol angezeigt. Bewegen Sie den Mauszeiger darauf, um eine Vorschau der Ausnahme zu sehen. Klicken Sie darauf, um den Tab Issues (Probleme) zu maximieren. Dort finden Sie weitere Informationen zu den Ausnahmen und eine Anleitung zu deren Behebung.

Problem im Bereich „Quellen“ mit dem Tab „Probleme“ verknüpfen

Chromium-Problem: 1150883

Knoten-Screenshot jenseits des Darstellungsbereichs aufnehmen

Sie können jetzt Knoten-Screenshots für einen vollständigen Knoten aufnehmen, einschließlich des Inhalts "below the fold". Bisher wurde der Screenshot bei Inhalten abgeschnitten, die im Darstellungsbereich nicht sichtbar waren. Die ganzseitigen Screenshots sind jetzt auch präzise.

Klicken Sie im Bereich Elemente mit der rechten Maustaste auf ein Element und wählen Sie Screenshot des Knotens aufnehmen aus.

Knoten-Screenshot jenseits des Darstellungsbereichs aufnehmen

Chromium-Problem: 1003629

Neuer Tab „Trust Tokens“ für Netzwerkanfragen

Prüfen Sie die Trust Token-Netzwerkanfragen mit dem neuen Tab Trust Tokens (Trust Tokens).

Trust Token ist eine neue API zur Bekämpfung von Betrug und zur Unterscheidung zwischen Bots und echten Menschen, ohne dass passives Tracking erforderlich ist. Weitere Informationen zu den ersten Schritten mit Trust Tokens

Weitere Unterstützung bei der Fehlerbehebung wird in den nächsten Versionen bereitgestellt.

Neuer Tab „Trust Token“ für Netzwerkanfragen

Chromium-Problem: 1126824

Lighthouse 7 im Lighthouse-Steuerfeld

Im Steuerfeld Lighthouse wird jetzt Lighthouse 7 ausgeführt. Eine vollständige Liste der Änderungen finden Sie in den Versionshinweisen.

Lighthouse 7 im Lighthouse-Steuerfeld

Neue Prüfungen in Lighthouse 7:

  • LCP-Bild (Largest Contentful Paint) vorab laden. Prüft, ob das vom LCP-Element verwendete Bild vorab geladen wird, um die LCP-Zeit zu verbessern.
  • Im Issues-Bereich protokollierte Probleme: Gibt eine Liste der nicht behobenen Probleme im Bereich Issues an.
  • Progressive Web-Apps (PWA): Die PWA-Kategorie hat sich erheblich geändert.

  • Die Gruppe Installable (Installierbar) wird jetzt vollständig durch Funktionsprüfungen unterstützt, die die installierbaren Kriterien von Chrome aktivieren. Dieselben Signale, die Sie im Manifestbereich sehen

    • Die Prüfung „Registriert einen Service Worker...“ wird in die Gruppe PWA-optimiert verschoben und die Prüfung „Verwendet HTTPS“ ist jetzt Teil der wichtigsten Prüfung „Anforderungen an die Installierbarkeit“.
    • Die Gruppe Schnell und zuverlässig wird entfernt. Da die überarbeitete Prüfung der Anforderungen an die Installierbarkeit die Prüfung der Offlinefunktion umfasst, wurde die Prüfung „Aktuelle Seite“ und „start_url“ mit dem Statuscode „200“ entfernt, wenn sie offline ist. Auch die Prüfung „Seitenaufbau im Mobilfunknetz ist schnell genug“ wurde entfernt.

Chromium-Problem: 772558

Aktualisierungen des Steuerfelds „Elemente“

Unterstützung beim Erzwingen des CSS-Status :target

Du kannst jetzt die Entwicklertools verwenden, um den CSS-Status :target zu erzwingen und zu prüfen.

Wählen Sie im Steuerfeld Elemente ein Element aus und wechseln Sie den Elementstatus. Klicken Sie das Kästchen :target an, um die Stile zu erzwingen und zu prüfen.

Verwenden Sie die Pseudoklasse :target, um einen Stil für Elemente festzulegen, wenn der Hash in der URL und die ID eines Elements identisch sind. Sehen Sie sich diese Demo an, um es selbst auszuprobieren. Mit dieser neuen Entwicklertools-Funktion kannst du solche Stile testen, ohne die URL dauerhaft manuell ändern zu müssen.

CSS-Zustand ":target" erzwingen

Chromium-Problem: 1156628

Neue Verknüpfung zum Duplizieren eines Elements

Mit der neuen Tastenkombination Element duplizieren können Sie Elemente sofort klonen.

Klicken Sie im Steuerfeld Elemente mit der rechten Maustaste auf ein Element und wählen Sie Element duplizieren aus. Darunter wird ein neues Element erstellt.

Alternativ können Sie ein Element auch mit Tastenkombinationen duplizieren:

  • Mac: Shift + Option + ⬇️
  • Fenster/ Linux: Shift + Alt + ⬇️

Element mehrfach vorhanden

Chromium-Probleme: 1150797, 1150797

Farbauswahl für benutzerdefinierte CSS-Eigenschaften

Im Bereich Styles wird jetzt eine Farbauswahl für benutzerdefinierte CSS-Eigenschaften angezeigt.

Außerdem können Sie die Taste Shift gedrückt halten und auf die Farbauswahl klicken, um die RGBA-, HSLA- und Hex-Darstellungen des Farbwerts zu durchlaufen.

Farbauswahl für benutzerdefinierte CSS-Eigenschaften

Chromium-Problem: 1147016

Neue Tastenkombinationen zum Kopieren von CSS-Eigenschaften

Mit einigen neuen Tastenkombinationen lassen sich CSS-Eigenschaften jetzt schneller kopieren.

Wählen Sie im Steuerfeld Elemente ein Element aus. Klicken Sie dann mit der rechten Maustaste auf eine CSS-Klasse oder eine CSS-Eigenschaft im Bereich Styles (Stile), um den Wert zu kopieren.

Neue Tastenkombinationen zum Kopieren von CSS-Eigenschaften

Kopieroptionen für CSS-Klasse:

  • Selektor kopieren: Kopieren Sie den aktuellen Selektornamen.
  • Regel kopieren: Kopiert die Regel der aktuellen Auswahl.
  • Alle Deklarationen kopieren: Kopiert alle Deklarationen unter der aktuellen Regel, einschließlich ungültiger Properties und Properties mit Präfix.

Kopieroptionen für CSS-Property:

  • Deklaration kopieren: Kopieren Sie die Deklaration der aktuellen Zeile.
  • Property kopieren: Kopieren Sie die Eigenschaft der aktuellen Zeile.
  • Wert kopieren: Der Wert der aktuellen Zeile wird kopiert.

Chromium-Problem: 1152391

Cookie-Updates

Neue Option zum Anzeigen von URL-decodierten Cookies

Sie können jetzt den Wert für Cookies mit URL-Decodierung im Bereich Cookies anzeigen lassen.

Gehen Sie zum Bereich Anwendung und wählen Sie den Bereich Cookies aus. Wählen Sie ein beliebiges Cookie in der Liste aus. Klicken Sie das neue Kästchen Decodierte URL anzeigen an, um das decodierte Cookie zu sehen.

Option zum Anzeigen von URL-decodierten Cookies

Chromium-Problem: 997625

Nur sichtbare Cookies löschen

Die Schaltfläche Alle Cookies löschen im Bereich „Cookies“ wurde durch die Schaltfläche Gefilterte Cookies löschen ersetzt.

Geben Sie im Steuerfeld Anwendung > im Bereich Cookies Text in das Textfeld ein, um die Cookies zu filtern. In unserem Beispiel filtern wir die Liste nach „PREF“. Klicken Sie auf die Schaltfläche Gefilterte Cookies löschen, um die sichtbaren Cookies zu löschen. Wenn Sie den Filtertext löschen, bleiben die anderen Cookies in der Liste. Bisher konnten Sie alle Cookies löschen.

Nur sichtbare Cookies löschen

Chromium-Problem: 978059

Neue Option zum Löschen von Drittanbieter-Cookies im Bereich „Speicher“

Beim Löschen der Websitedaten im Bereich Speicher werden von den Entwicklertools jetzt standardmäßig nur eigene Cookies gelöscht. Aktivieren Sie die Option Drittanbieter-Cookies einschließen, um auch die Cookies von Drittanbietern zu löschen.

Option zum Löschen von Drittanbieter-Cookies

Chromium-Problem: 1012337

User-Agent-Client-Hints für benutzerdefinierte Geräte bearbeiten

Sie können jetzt User-Agent-Client-Hints für benutzerdefinierte Geräte bearbeiten.

Gehen Sie zu Einstellungen > Geräte und klicken Sie auf Benutzerdefiniertes Gerät hinzufügen.... Maximieren Sie den Bereich User-Agent-Clienthinweise, um die Clienthinweise zu bearbeiten.

User-Agent-Client-Hints bearbeiten

User-Agent-Client-Hints sind eine Alternative zum User-Agent-String, mit der Entwickler auf datenschutzfreundliche und ergonomische Weise auf Informationen zum Browser eines Nutzers zugreifen können. Weitere Informationen zu User-Agent-Client-Hints finden Sie unter web.dev/user-agent-client-hints/.

Chromium-Problem: 1073909

Updates des Netzwerkbereichs

Einstellung "Netzwerkprotokoll aufzeichnen" beibehalten

Die Einstellung „Netzwerkprotokoll aufzeichnen“ wird in den Entwicklertools dauerhaft festgelegt. Bisher wurde die Auswahl des Nutzers beim Aktualisieren einer Seite zurückgesetzt.

Netzwerkprotokoll aufzeichnen

Chromium-Problem: 1122580

WebTransport-Verbindungen im Netzwerkbereich ansehen

Im Netzwerkbereich werden jetzt WebTransport-Verbindungen angezeigt.

WebTransport-Verbindungen

WebTransport ist eine neue API, die bidirektionale Client-Server-Messaging mit niedriger Latenz bietet. Unter web.dev/webtransport/ finden Sie weitere Informationen zu den Anwendungsfällen sowie dazu, wie Sie Feedback zur Zukunft der Implementierung geben können.

Chromium-Problem: 1152290

„Online“ umbenannt in „Keine Drosselung“

Die Option „Online“ der Netzwerkemulation wurde in „Keine Drosselung“ umbenannt.

Netzwerkprotokoll aufzeichnen

Chromium-Problem: 1028078

Neue Kopieroptionen in der Konsole, im Bereich „Quellen“ und im Bereich „Stile“

Neue Verknüpfungen zum Kopieren von Objekten in der Konsole und im Bereich „Quellen“

Mit den neuen Verknüpfungen in der Konsole und im Bereich „Quellen“ können Sie jetzt Objektwerte kopieren. Das ist besonders dann praktisch, wenn Sie ein großes Objekt (z.B. ein langes Array) kopieren möchten.

Objekt in der Konsole kopieren

Objekt im Bereich „Quellen“ kopieren

Chromium-Probleme: 1149859, 1148353

Neue Tastenkombinationen zum Kopieren von Dateinamen im Bereich „Quellen“ und im Bereich „Stile“

Sie können jetzt den Dateinamen kopieren, indem Sie mit der rechten Maustaste auf Folgendes klicken:

  • eine Datei im Bereich Quellen oder
  • den Dateinamen im Bereich Stile des Steuerfelds Elemente

Wählen Sie im Kontextmenü die Option Dateiname kopieren aus, um den Dateinamen zu kopieren.

Dateinamen im Bereich „Quellen“ kopieren

Dateinamen im Bereich „Stile“ kopieren

Chromium-Problem: 1155120

Aktualisierungen der Frame-Detailansicht

Informationen zu neuen Service Workern in der Frame-Detailansicht

In den Entwicklertools werden dedizierte Service Worker unter dem Frame angezeigt, durch den sie erstellt werden.

Maximieren Sie im Bereich Anwendung einen Frame mit Service Workern und wählen Sie dann in der Baumstruktur Service Worker einen Service Worker aus, um die Details aufzurufen.

Service Worker-Informationen in der Frame-Detailansicht

Chromium-Problem: 1122507

Arbeitsspeicherinformationen in der Frame-Detailansicht messen

Der API-Status performance.measureMemory() wird jetzt im Abschnitt API-Verfügbarkeit angezeigt.

Die neue performance.measureMemory() API schätzt die Arbeitsspeichernutzung der gesamten Webseite. In diesem Artikel erfahren Sie, wie Sie die gesamte Arbeitsspeichernutzung Ihrer Webseite mit dieser neuen API überwachen.

Arbeitsspeicher messen

Chromium-Problem: 1139899

Feedback über den Tab „Probleme“ geben

Wenn Sie eine Problemmeldung verbessern möchten, rufen Sie in der Konsole den Tab Probleme oder Weitere Einstellungen > Weitere Tools > Probleme auf, um den Tab Probleme zu öffnen. Maximieren Sie eine Fehlermeldung und klicken Sie auf Ist die Fehlermeldung hilfreich für Sie?. Anschließend können Sie im Pop-up Feedback geben.

Link „Feedback geben“

Verworfene Frames im Bereich „Leistung“

Wenn Sie die Ladeleistung im Steuerfeld „Leistung“ analysieren, werden im Bereich Frames entfernte Frames jetzt rot markiert. Bewege den Mauszeiger darauf, um die Framerate zu sehen.

Verworfene Frames

Chromium-Problem: 1075865

Im Gerätemodus faltbare Geräte und Dual-Screen emulieren

In den Entwicklertools kannst du jetzt Dual Screen- und faltbare Geräte emulieren.

Wählen Sie nach dem Aktivieren der Gerätesymbolleiste eines der folgenden Geräte aus: Surface Duo oder Samsung Galaxy Fold.

Klicken Sie auf das neue Span-Symbol, um zwischen Einzelbild-, gefalteten und gefalteten oder aufgeklappten Bildschirmen zu wechseln.

Sie können auch die experimentellen Webplattform-Funktionen aktivieren, um auf die neue screen-spanning-Medienfunktion von CSS und die JavaScript getWindowSegments API zuzugreifen. Das Symbol „Experimentell“ zeigt den Status des Flags Funktionen der experimentellen Webplattform an. Das Symbol wird hervorgehoben, wenn die Kennzeichnung aktiviert ist. Rufen Sie chrome://flags auf und wechseln Sie das Flag.

Dual Screen emulieren

Chromium-Problem: 1054281

Experimentelle Funktionen

Browsertests mit Puppeteer Recorder automatisieren

Die Entwicklertools können jetzt Puppeteer-Scripts basierend auf Ihrer Interaktion mit dem Browser generieren, was Ihnen die Automatisierung von Browsertests erleichtert. Puppeteer ist eine Node.js-Bibliothek, die eine High-Level-API zur Steuerung von Chrome oder Chromium über das DevTools-Protokoll bietet.

Rufen Sie diese Demoseite auf. Öffnen Sie in den Entwicklertools den Bereich Quellen. Wählen Sie im linken Bereich den Tab Aufzeichnung aus. Fügen Sie eine neue Aufzeichnung hinzu und geben Sie der Datei einen Namen, z.B. test01.js.

Klicken Sie unten auf die Schaltfläche Aufzeichnen, um die Interaktion zu starten. Versuchen Sie, das Formular auf dem Bildschirm auszufüllen. Beachten Sie, dass die Puppeteer-Befehle entsprechend an die Datei angehängt werden. Klicken Sie noch einmal auf die Schaltfläche Record (Aufzeichnen), um die Aufzeichnung zu beenden.

Folgen Sie dem Startleitfaden auf der offiziellen Website von Puppeteer, um das Skript auszuführen.

Bitte beachte, dass es sich um ein Experiment in der Anfangsphase handelt. Wir möchten die Rekorder-Funktion weiterhin verbessern und erweitern.

Puppeteer-Rekorder

Chromium-Problem: 1144127

Schriftarteditor im Bereich „Stile“

Der neue Schriftarteditor ist ein Pop-over-Editor, der sich im Bereich Stile befindet. Hier finden Sie schriftbezogene Eigenschaften, mit denen Sie die perfekte Typografie für Ihre Webseite finden können.

Das Pop-over bietet eine übersichtliche Benutzeroberfläche zur dynamischen Änderung der Typografie mit einer Reihe intuitiver Eingabetypen.

Schriftarteditor im Bereich „Stile“

Chromium-Problem: 1093229

CSS-Flexbox-Debugging-Tools

Die Entwicklertools haben experimentelle Unterstützung für das Flexbox-Debugging seit dem letzten Release hinzugefügt.

In den Entwicklertools wird jetzt eine Führungslinie gezeichnet, damit du die CSS-Eigenschaft align-items besser visualisieren kannst. Das CSS-Attribut gap wird ebenfalls unterstützt. In unserem Beispiel verwenden wir den CSS-Code gap: 12px;. Beachten Sie das Schraffierungsmuster für jede Lücke.

Flexbox

Chromium-Problem: 1139949

Neuer Tab „CSP-Verstöße“

Auf dem neuen Tab CSP-Verstöße finden Sie alle Verstöße gegen die Content Security Policy (CSP) auf einen Blick. Dieser neue Tab ist ein Test, der die Arbeit mit Webseiten mit einer großen Anzahl von Verstößen gegen die CSP und vertrauenswürdigen Typen vereinfachen soll.

Tab „CSP-Verstöße“

Chromium-Problem: 1137837

Neue Berechnung des Farbkontrasts – Advanced Perceptual Contrast Algorithm (APCA)

Der Advanced Perceptual Contrast Algorithm (APCA) ersetzt das Kontrastverhältnis der AA/AAA-Richtlinien in der Farbauswahl.

APCA ist eine neue Methode zur Berechnung von Kontrasten, basierend auf der modernen Forschung zur Farbwahrnehmung. Im Vergleich zu den AA/AAA-Richtlinien ist APCA kontextabhängiger. Der Kontrast wird anhand der räumlichen Eigenschaften des Textes (Schriftstärke und -größe), der Farbe (wahrgenommener Helligkeitsunterschied zwischen Text und Hintergrund) und des Kontexts (Umgebungslicht, Umgebung, beabsichtigter Zweck des Textes) berechnet.

APCA in der Farbauswahl

Im Beispiel beträgt der APCA-Grenzwert 38%. Das Kontrastverhältnis muss mindestens dem angegebenen Wert entsprechen. Dieser Wert wird anhand der Schriftstärke und -größe gemäß dieser APCA-Suchtabelle berechnet.

Chromium-Problem: 1121900

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