Neuerungen in den Entwicklertools (Chrome 89)

Unterstützung bei der Fehlerbehebung von Verstößen gegen vertrauenswürdige Typen

Haltepunkt bei Verstößen gegen vertrauenswürdige Typen

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

Mit der Trusted Types API können Sie DOM-basierte Cross-Site-Scripting-Sicherheitslücken verhindern. Weitere Informationen zum Schreiben, Überprüfen und Warten von Anwendungen ohne DOM-XSS-Sicherheitslücken mit vertrauenswürdigen Typen

Öffnen Sie im Bereich Quellen den Seitenleistenbereich Debugger. Maximieren Sie den Bereich Haltepunkte für CSP-Verstöße und aktivieren Sie das Kästchen Verstöße gegen vertrauenswürdige Typen, um bei den Ausnahmen zu pausieren. Hier können Sie es selbst ausprobieren.

Chromium-Problem: 1142804

Problem im Quellenbereich mit dem Tab „Probleme“ verknüpfen

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. Dort finden Sie weitere Details zu den Ausnahmen und eine Anleitung zur Fehlerbehebung.

Chromium-Problem: 1150883

Knoten-Screenshot außerhalb des Darstellungsbereichs aufnehmen

Sie können jetzt Screenshots von vollständigen Knoten erstellen, einschließlich des Inhalts unterhalb des Falzes. Bisher wurde der Screenshot für Inhalte, die nicht im Darstellungsbereich sichtbar waren, abgeschnitten. Auch die ganzseitigen Screenshots sind jetzt präziser.

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

Chromium-Problem: 1003629

Neuer Tab „Trust Tokens“ für Netzwerkanfragen

Untersuchen Sie die Trust Token-Netzwerkanfragen auf dem neuen Tab Trust Tokens.

Trust Token ist eine neue API, mit der Betrug bekämpft und Bots von echten Menschen unterschieden werden können, ohne dass passives Tracking erfolgt. Weitere Informationen zu Trust Tokens

In den nächsten Releases wird es weitere Debugging-Unterstützung geben.

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.

Neue Prüfungen in Lighthouse 7:

• Largest Contentful Paint-Bild (LCP) 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 ungelöster Probleme im Issues-Bereich an.
• Progressive Web-Apps (PWAs). Die PWA-Kategorie hat sich erheblich geändert.

• Die Gruppe Installierbar basiert jetzt vollständig auf den Funktionsprüfungen, die die installierbaren Kriterien von Chrome ermöglichen. Das sind dieselben Signale, die im Manifestbereich angezeigt werden.

  • Die Prüfung „Registriert einen Service Worker…“ wird in die Gruppe PWA-optimiert verschoben und die Prüfung „Verwendet HTTPS“ ist jetzt Teil der wichtigen Prüfung „Installierbarkeitsanforderungen“.
  • Die Gruppe Schnell und zuverlässig wird entfernt. Da die überarbeitete Prüfung „Installierbarkeitsanforderungen“ auch die Offlinefähigkeit umfasst, wurde die Prüfung „Aktuelle Seite und start_url reagieren im Offlinemodus mit dem HTTP-Statuscode 200“ entfernt. Die Prüfung „In Mobilfunknetzen werden Seiten schnell genug geladen“ wurde ebenfalls entfernt.

Chromium-Problem: 772558

Aktualisierungen des Bereichs „Elemente“

Erzwingen des CSS-Status :target unterstützen

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

Wählen Sie im Bereich Elemente ein Element aus und ändern Sie den Elementstatus. Aktivieren Sie das Kästchen :target, um die Formatierungen zu erzwingen und zu prüfen.

Verwenden Sie die Pseudoklasse :target, um ein Element zu formatieren, wenn der Hash in der URL und die ID eines Elements identisch sind. Hier finden Sie eine Demo, die Sie selbst ausprobieren können. Mit dieser neuen Funktion in den Entwicklertools können Sie solche Stile testen, ohne die URL ständig manuell ändern zu müssen.

Chromium-Problem: 1156628

Neue Tastenkombination zum Duplizieren von Elementen

Mit der neuen Tastenkombination Element duplizieren können Sie ein Element 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 Elemente auch mit Tastenkombinationen duplizieren:

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

Chromium-Probleme: 1150797, 1150797

Farbauswahl für benutzerdefinierte CSS-Properties

Im Bereich Stile werden jetzt Farbauswahlen für benutzerdefinierte CSS-Eigenschaften angezeigt.

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

Chromium-Problem: 1147016

Neue Tastenkombinationen zum Kopieren von CSS-Properties

Mit einigen neuen Tastenkombinationen können Sie jetzt CSS-Eigenschaften schneller kopieren.

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

Kopieroptionen für die CSS-Klasse:

• Selektor kopieren: Kopieren Sie den Namen des aktuellen Selektors.
• Regel kopieren Kopiert die Regel des aktuellen Selektors.
• Alle Deklarationen kopieren: Alle Deklarationen unter der aktuellen Regel kopieren, einschließlich ungültiger und mit Präfix versehener Eigenschaften.

Kopieroptionen für die CSS-Property:

• Deklaration kopieren: Kopiert die Deklaration der aktuellen Zeile.
• Property kopieren Kopieren Sie die Eigenschaft der aktuellen Zeile.
• Wert kopieren: Kopiert den Wert der aktuellen Zeile.

Chromium-Problem: 1152391

Cookie-Updates

Neue Option zum Anzeigen von URL-decodierten Cookies

Sie können jetzt auswählen, ob der URL-decodierte Wert von Cookies im Bereich Cookies angezeigt werden soll.

Rufen Sie den Bereich Anwendung auf und wählen Sie den Bereich Cookies aus. Wählen Sie ein beliebiges Cookie in der Liste aus. Aktivieren Sie das neue Kästchen URL-dekodiert anzeigen, um das dekodierte Cookie zu sehen.

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 Bereich 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. Wenn Sie den Filtertext löschen, werden die anderen Cookies in der Liste angezeigt. Bisher hatten Sie nur die Möglichkeit, alle Cookies zu löschen.

Chromium-Problem: 978059

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

Wenn Sie die Websitedaten im Bereich Speicher löschen, werden in den Entwicklertools jetzt standardmäßig nur selbst erhobene Cookies gelöscht. Aktivieren Sie Einschließlich Drittanbieter-Cookies, um auch Drittanbieter-Cookies zu löschen.

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.

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

User-Agent-Client-Hinweise 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

Aktualisierungen im Netzwerkbereich

Einstellung „Netzwerkprotokoll aufzeichnen“ beibehalten

Die Einstellung „Netzwerkprotokoll aufzeichnen“ wird jetzt in den Entwicklertools beibehalten. Bisher haben die Entwicklertools die Auswahl des Nutzers bei jedem Neuladen einer Seite zurückgesetzt.

Chromium-Problem: 1122580

WebTransport-Verbindungen im Netzwerkbereich ansehen

Im Netzwerkbereich werden jetzt WebTransport-Verbindungen angezeigt.

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

Chromium-Problem: 1152290

„Online“ wurde in „Keine Drosselung“ umbenannt

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

Chromium-Problem: 1028078

Neue Kopieroptionen in der Console, im Quellenbereich und im Bereich „Stile“

Neue Tastenkombinationen zum Kopieren von Objekten in der Console und im Quellenbereich

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

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
• den Dateinamen im Bereich „Stile“ im Bereich „Elemente“

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

Chromium-Problem: 1155120

Aktualisierungen der Ansicht „Frame-Details“

Neue Service Worker-Informationen in der Ansicht „Frame-Details“

In den DevTools 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 einen Service Worker in der Baumstruktur Service Workers aus, um die Details aufzurufen.

Chromium-Problem: 1122507

Speicherinformationen in der Ansicht „Frame-Details“ messen

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

Die neue performance.measureMemory() API schätzt die Speichernutzung der gesamten Webseite. In diesem Artikel erfahren Sie, wie Sie mit dieser neuen API die gesamte Speichernutzung Ihrer Webseite im Blick behalten.

Chromium-Problem: 1139899

Feedback über den Tab „Probleme“ geben

Wenn Sie eine Fehlermeldung verbessern möchten, rufen Sie den Tab Probleme über die Konsole oder Weitere Einstellungen > Weitere Tools > Probleme auf. Maximieren Sie eine Fehlermeldung und klicken Sie auf War diese Nachricht hilfreich?. Anschließend können Sie im Pop-up-Fenster Feedback geben.

Verworfene Frames im Bereich „Leistung“

Wenn Sie die Ladeleistung im Bereich „Leistung“ analysieren, werden im Abschnitt Frames jetzt ausgelassene Frames rot markiert. Bewegen Sie den Mauszeiger darauf, um die Bildrate zu sehen.

Chromium-Problem: 1075865

Faltbare Geräte und Dual-Screen-Geräte im Gerätemodus emulieren

Sie können jetzt Dual-Screen- und faltbare Geräte in DevTools emulieren.

Nachdem Sie die Geräte-Symbolleiste aktiviert haben, wählen Sie eines der folgenden Geräte aus: Surface Duo oder Samsung Galaxy Fold.

Klicken Sie auf das neue Symbol für den Bereich, um zwischen dem Einzelbildschirm- oder gefalteten Modus und dem Dual-Screen- oder aufgeklappten Modus zu wechseln.

Sie können auch die experimentellen Webplattformfunktionen aktivieren, um auf die neue CSS-Media-Funktion screen-spanning und die JavaScript-API getWindowSegments zuzugreifen. Das Symbol für experimentelle Funktionen zeigt den Status des Flags Experimentelle Webplattformfunktionen an. Das Symbol ist hervorgehoben, wenn das Flag aktiviert ist. Rufen Sie chrome://flags auf und aktivieren oder deaktivieren Sie das Flag.

Chromium-Problem: 1054281

Experimentelle Funktionen

Browser-Tests mit Puppeteer Recorder automatisieren

Die Entwicklertools können jetzt Puppeteer-Scripts basierend auf Ihrer Interaktion mit dem Browser generieren. So können Sie Browsertests einfacher automatisieren. Puppeteer ist eine Node.js-Bibliothek, die eine API auf übergeordneter Ebene zur Steuerung von Chrome oder Chromium über das DevTools-Protokoll bietet.

Rufen Sie diese Demoseite auf. Öffnen Sie in den Entwicklertools das Steuerfeld Quellen. 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 Aufzeichnung der Interaktion zu starten. Füllen Sie das Bildschirmformular aus. Die Puppeteer-Befehle werden entsprechend an die Datei angehängt. Klicken Sie noch einmal auf die Schaltfläche Aufzeichnen, um die Aufnahme zu beenden.

Folgen Sie der Anleitung für die ersten Schritte auf der offiziellen Puppeteer-Website, um das Skript auszuführen.

Bitte beachten Sie, dass es sich hierbei um ein Experiment in der Anfangsphase handelt. Wir planen, die Recorder-Funktionen im Laufe der Zeit zu verbessern und zu erweitern.

Chromium-Problem: 1144127

Schriftart-Editor im Bereich „Stile“

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

Das Pop-over bietet eine übersichtliche Benutzeroberfläche, mit der sich die Typografie dynamisch über eine Reihe intuitiver Eingabetypen bearbeiten lässt.

Chromium-Problem: 1093229

Tools zur Fehlerbehebung für CSS-Flexboxen

Seit dem letzten Release bietet DevTools experimentelle Unterstützung für Flexbox-Debugging.

In den DevTools wird jetzt eine Hilfslinie gezeichnet, um die CSS-Eigenschaft align-items besser zu visualisieren. Das CSS-Attribut gap wird ebenfalls unterstützt. In unserem Beispiel haben wir CSS gap: 12px;. Achten Sie auf das Schraffurmuster für jede Lücke.

Chromium-Problem: 1139949

Neuer Tab „CSP-Verstöße“

an.

Auf dem neuen Tab CSP-Verstöße können Sie alle Verstöße gegen die Content Security Policy (CSP) auf einen Blick sehen. Dieser neue Tab ist ein Test, der die Arbeit mit Webseiten mit einer großen Anzahl von CSP- und Trusted Types-Verstößen erleichtern soll.

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 des Kontrasts, die auf moderner Forschung zur Farbwahrnehmung basiert. Im Vergleich zu den AA/AAA-Richtlinien ist APCA kontextabhängiger. Der Kontrast wird anhand der räumlichen Eigenschaften des Texts (Schriftstärke und ‑größe), der Farbe (wahrgenommener Helligkeitsunterschied zwischen Text und Hintergrund) und des Kontexts (Umgebungslicht, Umgebung, beabsichtigter Zweck des Texts) berechnet.

Im Beispiel ist der APCA-Schwellenwert 38%. Das Kontrastverhältnis muss mindestens dem angegebenen Wert entsprechen. Dieser Wert wird anhand von Schriftstärke und ‑größe berechnet. Hier finden Sie die entsprechende APCA-Nachschlagetabelle.

Chromium-Problem: 1121900

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

• Sie können uns Feedback und Funktionsanfragen unter crbug.com senden.
• Melden Sie ein DevTools-Problem in den Entwicklertools über das more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Senden Sie einen Tweet an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu Neuerungen in den DevTools oder den YouTube-Videos mit DevTools-Tipps.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.