Neuerungen in den Entwicklertools (Chrome 117)

Sofia Emelianova
Sofia Emelianova
GitHub

Verbesserungen beim Netzwerkbereich

Webinhalte noch schneller lokal überschreiben

Die Funktion für lokale Überschreibungen wurde optimiert. So können Sie im Steuerfeld Netzwerk ganz einfach Antwortheader und Webinhalte von Remote-Ressourcen simulieren, ohne darauf zugreifen zu müssen.

Wenn Sie Webinhalte überschreiben möchten, öffnen Sie das Steuerfeld Netzwerk, klicken Sie mit der rechten Maustaste auf eine Anfrage und wählen Sie Inhalt überschreiben aus.

Die Überschreibungsoptionen im Drop-down-Menü einer Anfrage.

Wenn Sie lokale Überschreibungen eingerichtet, aber deaktiviert haben, werden sie in den Entwicklertools aktiviert. Falls Sie sie noch nicht eingerichtet haben, werden Sie von den Entwicklertools oben in der Aktionsleiste aufgefordert. Wählen Sie einen Ordner aus, in dem die Überschreibungen gespeichert werden sollen, und gewähren Sie den Entwicklertools Zugriff darauf.

Wählen Sie einen Ordner aus und gewähren Sie über die Aktionsleiste oben Zugriff darauf.

Sobald die Überschreibungen eingerichtet sind, werden Sie in den Entwicklertools zu Quellen > Überschreibungen > Editor weitergeleitet. Dort können Sie Webinhalte überschreiben.

Die überschriebenen Ressourcen werden im Bereich Netzwerk mit Gespeichert. gekennzeichnet. Bewegen Sie den Mauszeiger auf das Symbol, um zu sehen, was überschrieben wird.

Ein Überschreibungssymbol neben einer Anfrage im Steuerfeld „Netzwerk“.

Chromium-Probleme: 1465785, 1470532, 1469359.

Inhalt von XHR und Abrufanforderungen überschreiben

Sie können jetzt zusätzlich zu den Antwortheadern den Inhalt von XHR und Abrufanfragen überschreiben. Mit solchen Überschreibungen können Sie die API-Antworten simulieren, um Fehler auf Ihrer Webseite zu beheben, auch wenn Ihr Back-End und Ihre API noch nicht bereit sind.

Die Entwicklertools unterstützen derzeit Inhaltsüberschreibungen für die folgenden Anfragetypen: Bilder (z. B. avif, png), Schriftarten, Fetch und XHR, Skripts (css und js) und Dokumente (HTML). In den Entwicklertools ist die Option Inhalt überschreiben jetzt für nicht unterstützte Typen ausgegraut.

Chromium-Probleme: 792101, 1469776.

Chrome-Erweiterungsanfragen ausblenden

Damit Sie sich auf den von Ihnen erstellten Code konzentrieren und irrelevante Anfragen von Erweiterungen herausfiltern können, die Sie möglicherweise in Chrome installiert haben, wird der Bereich Netzwerk mit einem neuen Filter versehen.

Um alle Anfragen herauszufiltern, die an chrome-extension:// URLs gesendet wurden, setzen Sie ein Häkchen bei Kästchen. Erweiterungs-URLs ausblenden.

Erweiterungs-URLs, die in der Tabelle „Anfragen“ ausgeblendet sind.

Chromium-Probleme: 1257885, 1458803.

Für Menschen lesbare HTTP-Statuscodes

Im Statuscode im Anfrage-Header wird jetzt neben den HTTP-Statuscodes nun ein menschenlesbarer Text angezeigt, damit Sie schneller herausfinden können, was mit der Anfrage geschehen ist.

Der vorhergehende und nachher angezeigte HTTP-Statuscode.

Sie können auch den Mauszeiger auf den Statuscode in der Anfragetabelle bewegen, um denselben Text zu sehen.

Chromium-Problem: 1153956.

Ansprechende Antworten für JSON-Untertypen

Auf dem Tab Response (Antwort) von für eine Anfrage mit einem application/[subtype]+json-MIME-Untertyp wie ld+json, hal+json und anderen wird die Antwort jetzt korrekt geparst und Sie können sie präzisieren.

Der Vorher und nach dem Parsen eines Anwendungs-/JSON-Untertyps in einer Netzwerkantwortvorschau.

Chromium-Problem: 406900.

Leistung: Änderungen der Abrufpriorität für Netzwerkereignisse ansehen

Im Bereich Leistung werden jetzt in der Zusammenfassung eines Ereignisses aus dem Track Netzwerk zwei Prioritätsfelder angezeigt: Anfängliche Priorität und (endgültige) Priorität und nicht nur die Priorität. Mit diesem zusätzlichen Feld können Sie jetzt sehen, ob sich die Abrufpriorität des Ereignisses ändert, und die Reihenfolge der Downloads optimieren. Weitere Informationen finden Sie unter Optimieren des Ladens von Ressourcen mit der Fetch Priority API.

Vor und nach dem Anzeigen von Änderungen der Abrufpriorität.

Außerdem finden Sie dieselben Informationen im Bereich Netzwerk in der Spalte Priorität, wobei die Einstellung Kästchen. Große Anfragezeilen aktiviert ist.

Die Spalte „Priorität“ im Bereich „Netzwerk“

Chromium-Probleme: 1463901, 1380964.

Standardmäßig aktivierte Quelleneinstellungen: Code Folding und automatische Dateianzeige

Die Option Einstellungen. Settings > Preferences > Kästchen. Code Folding ist jetzt standardmäßig aktiviert. Mit dieser Option können Sie Codeblöcke falten.

Bewegen Sie zum Falten eines Codeblocks den Mauszeiger auf die Zeilennummer neben dem Anfang des Blocks und klicken Sie auf das Symbol zum Minimieren Minimieren. Klicken Sie auf {...}, um den Block wieder zu maximieren.

Außerdem ist die Option Einstellungen. Einstellungen > Einstellungen > Kästchen. Dateien automatisch in der Seitenleiste anzeigen jetzt ebenfalls standardmäßig aktiviert.

Diese Einstellung bewirkt, dass die Dateistruktur unter Quellen > Seite die aktuell geöffnete Datei im Editor auswählt, wenn Sie den Tab wechseln.

Chromium-Probleme: 1459193, 1336599.

Verbesserte Fehlerbehebung bei Problemen mit Drittanbieter-Cookies

Parallel zu Updates durch andere Browser hat Chrome die Privacy Sandbox-Initiative eingeführt, um den Datenschutz im Web zu verbessern. Diese Initiative verbessert den Datenschutz im Web grundlegend und kann zu einem funktionierenden, werbeunterstützten Web führen, bei dem Drittanbieter-Cookies überflüssig werden. Für die Privacy Sandbox gilt ein schrittweiser Zeitplan, mit dem Sie sich bequem an Änderungen anpassen können.

Sie können das Verhalten von Chrome bereits nach der Einstellung von Drittanbieter-Cookies testen. Führen Sie dazu Chrome über die Befehlszeile mit dem Flag --test-third-party-cookies-phaseout aus. Informationen zur Funktion dieses Flags finden Sie unter Debugging-Cookies.

Unabhängig davon, wie Sie Chrome ausführen (mit oder ohne Flag), ist auf dem Tab Probleme jetzt das Kästchen Kästchen. Probleme mit Drittanbieter-Cookies einschließen standardmäßig für alle neuen Chrome-Nutzer und folglich für alle Berichte aktiviert:

  • Warnung zu funktionsgefährdenden Änderungen zur bevorstehenden Einstellung.
  • Probleme im Zusammenhang mit Drittanbieter-Cookies

Wenn Sie als bestehender Chrome-Nutzer Cookie-Warnungen zur bevorstehenden Einstellung sehen möchten, klicken Sie dieses Kästchen an.

Um dies zu testen, können Sie sich auf dieser Demoseite die Cookies ansehen.

Auf dem Tab „Probleme“ gemeldete Probleme mit Drittanbieter-Cookies.

Außerdem wurde der Filter Kästchen. Blockierte Antwortcookies im Bereich Netzwerk umformuliert, um zu verdeutlichen, dass hier nur die blockierten Antwortcookies angezeigt werden.

Das Kästchen ist aktiviert und es werden nur die Anfragen mit blockierten Antwort-Cookies angezeigt.

Chromium-Probleme: 1458839, 1462693, 1466310.

Fehler beim Vorabladen im Anwendungsbereich beheben

Das Chrome-Team stellt das vollständige Pre-Rendering für Seiten ein, die Nutzer in Zukunft wahrscheinlich aufrufen. Damit du diesen Fehler beheben kannst, wird in den Entwicklertools im Bereich Anwendung der Abschnitt Vorabladen hinzugefügt. Beim neuen Vorabruf und Pre-Rendering (zusammenfassend als „Navigations-Vorabladen“ bezeichnet) wird die Speculation Rules API anstelle der linkbasierten Ressourcenhinweise verwendet.

Auf dieser Demoseite sehen Sie im Bereich Anwendung > Vorabladen Folgendes:

  • Spekulationsregeln, die alle auf der aktuellen Seite gefundenen Regelsätze auflisten.
  • Es wird ein Vorabladen ausgeführt, bei dem alle vorabgerufenen und vorab gerenderten URLs aus den Regelsätzen aufgelistet werden.
  • Diese Seite, auf der der vorab gerenderte Status der aktuellen Seite aufgeführt ist.

Weitere Informationen finden Sie im entsprechenden Beitrag zur Fehlerbehebung bei Spekulationsregeln.

Chromium-Problem: 1410709.

Neue Farben

Vielleicht haben Sie schon bemerkt, dass die Entwicklertools jetzt ein neues Design haben, das besser zu Chrome passt. Einer der Faktoren ist das neue Farbschema.

Vorher und nach dem Anwenden neuer Farben.

Diese Version (117) enthält weitere UX-Verbesserungen für die Entwicklertools, die bereits erwähnt und weiter aufgeführt wurden, einschließlich einer Reihe von verbesserten UI-Texten.

Chromium-Problem: 1456677.

Lighthouse 10.4.0

Im Bereich Lighthouse wird jetzt Lighthouse 10.4.0 ausgeführt. Insbesondere werden mit dieser Version neue Prüfungen der Barrierefreiheit hinzugefügt:

Beispiel:

Überprüfung der Farbe von Links, die sie nicht unterscheiden, fehlgeschlagen.

Eine vollständige Liste der Änderungen finden Sie hier. Grundlegende Informationen zur Verwendung des Bereichs Lighthouse in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558.

Die C/C++ WebAssembly-Debugging-Erweiterung für Entwicklertools ist jetzt Open Source

Die C/C++ WebAssembly-Debugging-Erweiterung für DevTools ist jetzt Open Source und befindet sich im DevTools-Frontend-Repository. Diese Erweiterung ermöglicht Debugging-Funktionen in den Entwicklertools für C++-Programme, die in WebAssembly kompiliert wurden. Weitere Informationen finden Sie unter Fehler in C/C++ WebAssembly beheben.

Hier erfahren Sie, wie Sie die Erweiterung erstellen, ausführen und testen. Sie können auch einen Beitrag leisten.

Chromium-Problem: 1410709.

Verschiedene Highlights

Im Folgenden sind einige bemerkenswerte Fehlerbehebungen und Verbesserungen in dieser Version aufgeführt:

  • CSS-Verschachtelung: Im Steuerfeld Elemente wird jetzt die gesamte Selektorkette für verschachtelte untergeordnete Elemente angezeigt (1172985).
  • Unter Anwendung > Manifest gibt es jetzt einen Abschnitt Overlay der Fenstersteuerelemente, in dem geprüft wird, ob ein display_override-Wert im Manifest vorhanden ist. Außerdem werden dort Links zur entsprechenden Dokumentation bereitgestellt.
  • Der Baum unter Quellen > Seite sieht jetzt unter anderem Folgendes aus (1442863):
    • Ordner werden ausgegraut, wenn ihr gesamter Inhalt auf der Ignorieren-Liste steht.
    • Ordner werden orange markiert, wenn ihr gesamter Inhalt aus einer Quellzuordnung stammt.
  • Leistung: Die Aufnahmeeinstellungen werden jetzt automatisch ausgeblendet, wenn Sie die Aufzeichnung starten (1455498).
  • Unter Quellen > Editor wurde das Verhalten von Strg + Pfeil (Windows) und Wahltaste + Pfeil (MacOs) (1468208) wiederhergestellt.
  • Der Schalter Animationen > Alle pausieren behält jetzt seinen Status beim Laden der Seite (1446046) bei.
  • Anwendung > Speicher > Cache-Speicher wurde in den Abschnitt Anwendung > Speicher > Cache (1462622) verschoben.
  • Einige UI-Texte und Kurzinfos wurden verbessert: Kurzinfo zur Nebenläufigkeit von Hardware, Netzwerkfiltertexte und eine Hauptmenüoption, Großschreibung in der Struktur der Anwendung, Netzwerk > Header-Texte, Quellen > Überschreibungen und Dateisystemtexte.

Neue experimentelle Funktionen

Neue Rendering-Emulation: prefers-reduced-transparency

Die Nutzer Ihrer Website können damit beginnen, die neue experimentelle CSS-Medienfunktion prefers-reduced-transparency auf ihren Geräten zu aktivieren, um anzugeben, dass sie transparente Effekte reduzieren möchten. Das sollten Sie berücksichtigen, um die Barrierefreiheit Ihrer Website zu verbessern. Um Sie dabei zu unterstützen, kann auf dem Tab Rendering jetzt die Einstellung prefers-reduced-transparency: reduce emuliert werden. So können Sie einen Prototyp für eine Lösung erstellen und testen, wie sich Ihre Website in diesem Fall verhält.

Wenn Sie diese Funktion in Chrome testen möchten, aktivieren Sie in chrome://flags die Option Funktionen der experimentellen Webplattform.

Chromium-Problem: 1424879.

Erweiterte Protokollüberwachung

In den Chrome-Entwicklertools wird das Chrome DevTools Protocol (CDP) verwendet, um Chrome-Browser zu instrumentieren, zu untersuchen, zu debuggen und Profile zu erstellen. Wenn du Chromium oder DevTools-Entwickler bist, kannst du mit dem Protokollmonitor alle CDP-Anfragen und -Antworten der Entwicklertools ansehen und CDP-Befehle senden.

Der Protokollmonitor erhält eine neue Schnittstelle, über die Sie CDP-Befehle einfacher erstellen und senden können. Jetzt musst du die Befehle und die zugehörigen Parameter nicht mehr in der Dokumentation nachschlagen. Die Entwicklertools werden sie dir vorschlagen.

Klicken Sie rechts unten auf dem Tab Protokollüberwachung auf Linkes Steuerfeld geöffnet. CDP-Befehlseditor anzeigen, wählen Sie ein Ziel aus, beginnen Sie mit der Eingabe eines Befehls, wählen Sie bei Bedarf einen der vorgeschlagenen Werte aus, geben Sie Parameterwerte an und klicken Sie auf Senden Sie die Nachricht. Befehl senden (Strg/Cmd + Eingabetaste).

CDP-Befehl angeben und senden

Chromium-Problem: 1469345.

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