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 in Quellen Haltepunkte für Verstöße gegen vertrauenswürdige Typen festlegen und Ausnahmen abfangen. .

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

Öffnen Sie im Bereich Quellen die Seitenleiste Debugger. Maximieren Sie den Bereich CSP-Verstoß Haltepunkte und aktivieren Sie das Kästchen Verstöße gegen vertrauenswürdige Typen, um das Pausieren auf der Ausnahmen. 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. Mauszeiger auf um eine Vorschau der Ausnahme anzuzeigen. Klicke darauf, um den Tab Probleme zu maximieren. Dort findest du weitere Informationen zu die Ausnahmen und Hinweise zur 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 Contents „below the fold“ (mit Scrollen sichtbar). Bisher Der Screenshot wurde aufgrund von Inhalten abgeschnitten, die im Darstellungsbereich nicht sichtbar waren. Die ganzseitigen Screenshots 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. Verfolgung. 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. In den Versionshinweisen finden Sie die vollständige Liste der Änderungen.

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 um die LCP-Zeit zu verbessern.
  • Im Issues-Bereich protokollierte Probleme: Weist auf eine Liste nicht behobener Probleme im Issues hin. .
  • Progressive Web-Apps (PWA): Die PWA-Kategorie hat sich erheblich geändert.

  • Die Gruppe Installable (Installierbar) wird jetzt vollständig durch Funktionsprüfungen betrieben, die die Kriterien zu installieren. Dieselben Signale, die Sie im Manifestbereich sehen

    • Das Dialogfeld „Registrierung eines Service Workers ...“ wird die Prüfung in die Gruppe PWA-optimiert verschoben. HTTPS" Prüfung ist jetzt Teil der wichtigsten Anforderungen an die Installierbarkeit Prüfung.
    • Die Gruppe Schnell und zuverlässig wird entfernt. Da die überarbeiteten „Anforderungen an die Installierbarkeit“ Prüfung die Prüfung auf Offline-Funktionalität umfasst, antworten die Antwort "current page" und "start_url" mit 200, wenn offline" Prüfung wurde entfernt. Die Meldung „Die Seite wird über das Mobilfunknetz schnell genug geladen“ Prüfung 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. :target aktivieren um die Stile zu erzwingen und zu überprüfen.

Verwenden Sie die Pseudoklasse :target zum Gestalten eines Elements, wenn der Hash in der URL und die ID eines Elements vorhanden ist. sind identisch. Sehen Sie sich diese Demo an, um es selbst auszuprobieren. Mit dieser neuen Entwicklertools-Funktion ohne ständig die URL 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. Ein neues Element wird darunter erstellt werden kann.

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 kannst du die Taste Shift gedrückt halten und auf die Farbauswahl klicken, um RGBA, HSLA, und Hex-Darstellungen des Farbwerts.

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 in den Bereich Styles, 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: Hiermit werden alle Deklarationen der aktuellen Regel kopiert, einschließlich ungültiger und 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 Gefilterte Cookies löschen ersetzt. Schaltfläche.

Im Bereich Anwendung > Cookies – geben Sie Text in das Textfeld ein, um die Cookies zu filtern. In In unserem Beispiel filtern wir die Liste nach „PREF“. Klicken Sie auf die Schaltfläche Gefilterte Cookies löschen, die sichtbaren Cookies löschen. Wenn Sie den Filtertext löschen, werden die anderen Cookies weiterhin im 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 in den Entwicklertools jetzt nur eigene Cookies gelöscht. Standardeinstellung. 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 , 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 Informationen über den Browser eines Nutzers auf datenschutzfreundliche und ergonomische Weise. Weitere Informationen zu User-Agent-Client-Hints in web.dev/user-agent-client-hints/

Chromium-Problem: 1073909

Updates des Netzwerkbereichs

„Netzwerkprotokoll aufzeichnen“ beibehalten Einstellung

Die Entwicklertools enthalten jetzt das Protokoll „Netzwerkprotokoll aufzeichnen“ Einstellung. Bisher wurde die Auswahl des Nutzers in den Entwicklertools zurückgesetzt wenn eine Seite neu geladen wird.

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. Weitere Informationen und wie Sie Feedback zur Zukunft der Implementierung in web.dev/webtransport/.

Chromium-Problem: 1152290

„Online“ umbenannt in „Keine Drosselung“

Die Netzwerkemulationsoption „Online“ in „No Throttling“ (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. Dies ist 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ü 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 einen Service Worker aus in der Baumstruktur Service Workers, um die Details aufzurufen.

Service Worker-Informationen in der Frame-Detailansicht

Chromium-Problem: 1122507

Arbeitsspeicherinformationen in der Frame-Detailansicht messen

Der API-Status von performance.measureMemory() wird jetzt unter API-Verfügbarkeit angezeigt. .

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

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 Issues (Probleme) auf oder Weitere Einstellungen > Weitere Tools > Probleme > um den Tab Probleme zu öffnen. Problem maximieren Klicken Sie dann auf Ist die Fehlermeldung für Sie hilfreich?. das Pop-up-Fenster öffnen.

Link „Feedback geben“

Verworfene Frames im Bereich „Leistung“

Wenn Sie die Ladeleistung im Steuerfeld „Leistung“ analysieren, werden im Bereich Frames Frames 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 Symbol für die neue Spanne, um zwischen Einzelbildschirm oder geklappt und Dual Screen bzw. aufgeklappt zu wechseln. Körperhaltungen.

Sie können auch die Funktionen der experimentellen Webplattform aktivieren, um auf die neuen CSS-Medien zuzugreifen. screen-spanning-Funktion und JavaScript getWindowSegments API. Das Symbol „Experimentell“ zeigt die Experimental Web Platform features (Experimentelle Webplattform-Funktionen) ein. Das Symbol wird hervorgehoben, wenn die Flagge 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-Skripte auf der Grundlage Ihrer Interaktion mit dem Browser generieren, können Sie Browsertests leichter automatisieren. Puppeteer ist eine Node.js-Bibliothek, die eine High-Level-API zur Steuerung von Chrome oder Chromium über das DevTools-Protokoll.

Rufen Sie diese Demoseite auf. Öffnen Sie in den Entwicklertools den Bereich Quellen. Wählen Sie den Tab Aufzeichnung auf im linken Bereich. 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, Bildschirmformulars zu öffnen. Beachten Sie, dass die Puppeteer-Befehle entsprechend an die Datei angehängt werden. Klicken Sie auf das 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.

Bitte beachte, dass es sich um ein Experiment in der Anfangsphase handelt. Wir arbeiten daran, den Rekorder weiter zu verbessern im Laufe der Zeit.

Puppeteer-Rekorder

Chromium-Problem: 1144127

Schriftarteditor im Bereich „Stile“

Der neue Schriftarteditor ist ein Pop-over-Editor, der im Bereich „Stile“ mit den schriftbezogenen Eigenschaften verfügbar ist. um die perfekte Typografie für Ihre Webseite zu finden.

Das Popover 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. Die CSS-Property gap wird ebenfalls unterstützt. In unserem Beispiel verwenden wir den CSS-Code gap: 12px;. Beachten Sie die Schlüpfmuster 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 vielen von Verstößen gegen die CSP und vertrauenswürdigen Typen.

Tab „CSP-Verstöße“

Chromium-Problem: 1137837

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

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

APCA ist eine neue Methode zur Berechnung von Kontrasten, basierend auf der modernen Forschung zur Farbwahrnehmung. Verglichen mit AA/AAA-Richtlinien ist der APCA eher kontextabhängig. Der Kontrast wird basierend auf der räumliche Eigenschaften (Schriftstärke und -größe), Farbe (wahrgenommene Helligkeitsunterschiede zwischen Text und Hintergrund) und Kontext (Umgebungslicht, Umgebung, beabsichtigter Zweck des Textes) enthalten.

APCA in der Farbauswahl

Im Beispiel liegt der APCA-Grenzwert bei 38%. Das Kontrastverhältnis muss mindestens dem angegebenen Wert entsprechen. Dieser Wert wird anhand der Schriftstärke und -größe unter Zuhilfenahme 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.
  • Problem mit den Entwicklertools über Weitere Optionen melden Mehr > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
  • 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