Neuerungen in den Entwicklertools (Chrome 89)

Jecelyn Yeen

Fehlerbehebung beim Support für vertrauenswürdige Typenverstöße

Haltepunkt bei Verstößen gegen vertrauenswürdige Typen

Sie können jetzt im Bereich Quellen Haltepunkte und Ausnahmen für vertrauenswürdige Typverstöße festlegen und abfangen.

Mit der TrustedTypes API können Sie Sicherheitslücken beim DOM-basierten Cross-Site-Scripting vermeiden. Wie Sie Anwendungen mit vertrauenswürdigen Typen von DOM-XSS-Sicherheitslücken kostenlos schreiben, prüfen und warten, erfahren Sie hier.

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

Haltepunkt bei Verstößen gegen vertrauenswürdige Typen

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 Probleme zu maximieren. Er enthält weitere Details zu den Ausnahmen und eine Anleitung zu deren Behebung.

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

Chromium-Problem: 1150883

Screenshot von Knoten außerhalb des Darstellungsbereichs erstellen

Sie können jetzt Knoten-Screenshots für einen vollen Knoten erstellen, einschließlich des Inhalts „below the fold“ (mit Scrollen sichtbar). Bisher wurde der Screenshot für Inhalte, die im Darstellungsbereich nicht sichtbar waren, abgeschnitten. Auch die ganzseitigen Screenshots sind präzise.

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

Screenshot von Knoten außerhalb des Darstellungsbereichs erstellen

Chromium-Problem: 1003629

Neuer Tab „Trust Tokens“ für Netzwerkanfragen

Prüfen Sie die Netzwerkanfragen für Trust Tokens auf dem neuen Tab Trust Tokens.

Trust Token ist eine neue API zur Bekämpfung von Betrug und zur Unterscheidung von Bots von echten Menschen ohne passives Tracking. Erste Schritte mit Trust Tokens

In den nächsten Versionen wird die Fehlerbehebung weiter unterstützt.

Neuer Tab „Trust Token“ für Netzwerkanfragen

Chromium-Problem: 1126824

Lighthouse 7 im Lighthouse-Bereich

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

Lighthouse 7 im Lighthouse-Bereich

Neue Prüfungen in Lighthouse 7:

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

  • Die Gruppe Installierbar wird jetzt vollständig von den Funktionsprüfungen bereitgestellt, die die installierbaren Kriterien von Chrome aktivieren. Dabei handelt es sich um dieselben Signale, die auch im Manifestbereich zu sehen sind.

    • Die Prüfung „Service Worker registrieren...“ wird in die Gruppe PWA-optimiert verschoben. Die Prüfung „Verwendet HTTPS“ ist jetzt Teil der Prüfung „Installierbarkeitsanforderungen“.
    • Die Gruppe Schnell und zuverlässig wird entfernt. Da die überarbeitete Prüfung der „Installierbarkeitsanforderungen“ die Offlinefunktionsprüfung umfasst, wird für die Prüfung „aktuelle Seite“ und „start_url“ der Wert 200 zurückgegeben, wenn die Prüfung „Offline“ entfernt wurde. Auch die Prüfung „Seitenaufbau ist im Mobilfunknetz ist schnell genug“ wurde entfernt.

Chromium-Problem: 772558

Aktualisierungen des Steuerfelds „Elemente“

Unterstützung für das Erzwingen des CSS-Status :target

Sie können jetzt mit den Entwicklertools den :target-Status des CSS-Codes erzwingen und prüfen.

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

Verwenden Sie die Pseudoklasse :target, um ein Element zu gestalten, wenn der Hash in der URL und die ID eines Elements identisch sind. Sehen Sie sich diese Demo an und probieren Sie es selbst aus. Mit dieser neuen Entwicklertools-Funktion kannst du solche Stile testen, ohne die URL ständig manuell ändern zu müssen.

CSS-Zustand „:target“ erzwingen

Chromium-Problem: 1156628

Neue Verknüpfung zum Duplizieren des Elements

Mit dem neuen Kürzel Element duplizieren können Sie ein Element im Handumdrehen 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 Elemente mithilfe von 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.

Sie können auch die Shift-Taste 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 können Sie CSS-Eigenschaften jetzt schneller kopieren.

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

Neue Tastenkombinationen zum Kopieren von CSS-Eigenschaften

Kopieroptionen für CSS-Klasse:

  • Selektor kopieren: Kopiert den aktuellen Selektornamen.
  • Regel kopieren: Kopiert die Regel der aktuellen Auswahl.
  • Alle Deklarationen kopieren: Kopiert alle Deklarationen der aktuellen Regel, einschließlich ungültiger Attribute und Präfixe.

Kopieroptionen für CSS-Property:

  • Deklaration kopieren Kopieren Sie die Deklaration der aktuellen Zeile.
  • Property kopieren. Kopiert die Eigenschaft der aktuellen Zeile.
  • Copy value (Wert kopieren): Der Wert der aktuellen Zeile wird kopiert.

Chromium-Problem: 1152391

Cookies-Updates

Neue Option zum Anzeigen von URL-decodierten Cookies

Sie können jetzt auswählen, dass der Wert der per URL-decodierten Cookies im Bereich Cookies angezeigt werden soll.

Gehen Sie zum Steuerfeld 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“ wird jetzt durch die Schaltfläche Gefilterte Cookies löschen ersetzt.

Geben Sie im Steuerfeld Anwendung > 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. Löschen Sie den Filtertext. Die anderen Cookies verbleiben in der Liste. Bisher konnten Sie nur alle Cookies löschen.

Nur sichtbare Cookies löschen

Chromium-Problem: 978059

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

Wenn die Websitedaten im Bereich Speicher gelöscht werden, löschen die Entwicklertools jetzt standardmäßig nur eigene Cookies. Aktiviere einschließlich Drittanbieter-Cookies, um auch die Drittanbieter-Cookies 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-Client-Hinweise, um die Client-Hinweise zu bearbeiten.

User-Agent-Client-Hints bearbeiten

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

Chromium-Problem: 1073909

Aktualisierungen des Netzwerkbereichs

Einstellung „Netzwerkprotokoll aufzeichnen“ beibehalten

In den Entwicklertools wird jetzt die Einstellung „Netzwerkprotokoll aufzeichnen“ beibehalten. Bisher haben die Entwicklertools die Auswahl des Nutzers zurückgesetzt, wenn eine Seite neu geladen wird.

Netzwerkprotokoll aufzeichnen

Chromium-Problem: 1122580

WebTransport-Verbindungen im Steuerfeld „Network“ ansehen

Im Netzwerkbereich werden jetzt WebTransport-Verbindungen angezeigt.

WebTransport-Verbindungen

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

Chromium-Problem: 1152290

„Online“ umbenannt in „Keine Drosselung“

Die Option „Online“ für die Netzwerkemulation wurde in „Keine Drosselung“ umbenannt.

Netzwerkprotokoll aufzeichnen

Chromium-Problem: 1028078

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

Neue Tastenkombinationen zum Kopieren von Objekten in der Konsole und im Bereich „Quellen“

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

Objekt in der Console kopieren

Objekt in das Feld „Quellen“ kopieren

Chromium-Probleme: 1149859, 1148353

Neue Tastenkombinationen zum Kopieren des Dateinamens im Bereich „Quellen“ und im Bereich „Stile“

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

  • eine Datei im Bereich Quellen oder
  • Dateiname im Bereich Stile im Bereich Elemente

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

Dateinamen in das Feld „Quellen“ kopieren

Dateiname in den Bereich „Stile“ kopieren

Chromium-Problem: 1155120

Aktualisierungen der Frame-Detailansicht

Informationen zu neuen Service Workern in der Frame-Detailansicht

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

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

Service Worker-Informationen in der Frame-Detailansicht

Chromium-Problem: 1122507

Informationen zum Arbeitsspeicher in der Frame-Detailansicht messen

Der API-Status performance.measureMemory() wird jetzt im Bereich 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 Console den Tab Probleme auf oder klicken Sie auf Weitere Einstellungen > Weitere Tools > Probleme und öffnen Sie dort den Tab Probleme. Maximieren Sie eine Problemmeldung und klicken Sie auf Ist die Problemmeldung hilfreich für Sie?. Anschließend können Sie im Pop-up-Fenster Feedback geben.

Link für Feedback zum Problem

Verworfene Frames im Bereich „Leistung“

Bei der Analyse der Lastleistung im Steuerfeld „Leistung“ werden entfernte Frames im Bereich Frames jetzt rot markiert. Wenn du den Mauszeiger darauf bewegst, wird dir die Framerate angezeigt.

Verworfene Frames

Chromium-Problem: 1075865

Faltbares Smartphone und Dual Screen im Gerätemodus emulieren

Du kannst jetzt in den Entwicklertools faltbare und Dual-Screen-Geräte emulieren.

Aktivieren Sie die Gerätesymbolleiste und wählen Sie eines der folgenden Geräte aus: Surface Duo oder Samsung Galaxy Fold.

Klicken Sie auf das neue Span-Symbol, um zwischen der Einzelansicht, der zugeklappten und der zugeklappten Haltung zu wechseln.

Sie können auch die Funktionen der experimentellen Webplattform aktivieren, um auf die neue CSS-Medienfunktion screen-spanning und die JavaScript getWindowSegments API zuzugreifen. Das experimentelle Symbol zeigt den Status des Flags Experimental Web Platform features (Experimentelle Webplattformfunktionen) an. Das Symbol wird hervorgehoben, wenn die Flagge aktiviert ist. Gehen Sie zu chrome://flags und ändern Sie das Flag.

Dual Screen emulieren

Chromium-Problem: 1054281

Experimentelle Funktionen

Browsertests mit Puppeteer Recorder automatisieren

Die Entwicklertools können jetzt Puppeteer-Skripts basierend auf Ihrer Interaktion mit dem Browser generieren, was die Automatisierung von Browsertests vereinfacht. Puppeteer ist eine Node.js-Bibliothek, die eine API auf übergeordneter Ebene zur Steuerung von Chrome oder Chromium über das DevTools-Protokoll bereitstellt.

Rufen Sie diese Demoseite auf. Öffnen Sie den Bereich Quellen in den Entwicklertools. Wählen Sie im linken Bereich den Tab Aufzeichnung aus. Fügen Sie eine neue Aufzeichnung hinzu und benennen Sie die Datei (z.B. test01.js).

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

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

Dieser Test befindet sich noch in der Anfangsphase. Wir planen, die Rekorder-Funktionalität im Laufe der Zeit zu verbessern und zu erweitern.

Puppeteer-Rekorder

Chromium-Problem: 1144127

Schrifteditor im Bereich „Stile“

Der neue Schriftarteneditor ist ein Pop-over-Editor im Bereich Stile für schriftbezogene Eigenschaften, mit dem Sie die perfekte Typografie für Ihre Webseite finden können.

Das Pop-over bietet eine übersichtliche Benutzeroberfläche für die dynamische Bearbeitung der Typografie mit einer Reihe intuitiver Eingabetypen.

Schrifteditor im Bereich „Stile“

Chromium-Problem: 1093229

CSS-Flexbox-Debugging-Tools

Die Entwicklertools haben eine 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. Die CSS-Eigenschaft gap wird ebenfalls unterstützt. In unserem Beispiel verwenden wir CSS gap: 12px;. Beachten Sie das Schraffenmuster für jede Lücke.

Flexbox

Chromium-Problem: 1139949

Neuer Tab „CSP-Verstöße“

Auf dem neuen Tab CSP-Verstöße siehst du alle Verstöße gegen die Content Security Policy (CSP) auf einen Blick. Dieser neue Tab ist ein Test, der die Arbeit mit Webseiten erleichtern soll, bei denen zahlreiche Verstöße gegen CSP und vertrauenswürdige Typen vorliegen.

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 Richtlinien AA/AAA im Color Picker.

APCA ist eine neue Methode zur Berechnung von Kontrasten, die auf modernen Studien zur Farbwahrnehmung basiert. Im Vergleich zu den AA/AAA-Richtlinien ist APCA stärker kontextabhängig. Der Kontrast wird basierend auf den räumlichen Eigenschaften des Textes (Schriftstärke und -größe), der Farbe (wahrgenommene Helligkeitsunterschied zwischen Text und Hintergrund) und dem Kontext (Umgebungslicht, Umgebung, beabsichtigter Zweck des Texts) berechnet.

APCA in der Farbauswahl

In diesem Beispiel beträgt der APCA-Grenzwert 38%. Das Kontrastverhältnis muss dem aufgeführten Wert entsprechen oder darüber liegen. Dieser Wert wird anhand der Schriftstärke und ‐größe gemäß dieser APCA-Suchtabelle berechnet.

Chromium-Problem: 1121900

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