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, sodass Sie ganz einfach Antwortheader und Webinhalte von Remote-Ressourcen aus dem Steuerfeld Netzwerk simulieren können, ohne darauf zuzugreifen.

Wenn Sie Webinhalte überschreiben möchten, öffnen Sie den Bereich 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 von den Entwicklertools aktiviert. Wenn du sie noch nicht eingerichtet hast, wirst du von den Entwicklertools oben in der Aktionsleiste dazu aufgefordert. Wähle einen Ordner aus, in dem die Überschreibungen gespeichert werden sollen, und erlaube den Entwicklertools Zugriff darauf.

Wählen Sie oben in der Aktionsleiste einen Ordner aus und gewähren Sie den Zugriff darauf.

Nachdem die Überschreibungen eingerichtet wurden, rufen die Entwicklertools Quellen > Überschreibungen > Editor auf, damit Sie Webinhalte überschreiben können.

Die überschriebenen Ressourcen sind 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 Bereich „Network“ (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 Abrufanforderungen ü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.

Entwicklertools unterstützen derzeit das Überschreiben von Inhalten für die folgenden Anfragetypen: Bilder (z. B. AVIF, PNG), Schriftarten, Abruf und XHR, Skripts (CSS und JS) und Dokumente (HTML). In den Entwicklertools wird die Option Inhalte überschreiben für nicht unterstützte Typen jetzt ausgegraut.

Chromium-Probleme: 792101, 1469776.

Anfragen für Chrome-Erweiterungen 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 im Steuerfeld Netzwerk ein neuer Filter angezeigt.

Wenn Sie alle Anfragen herausfiltern möchten, die an chrome-extension:// URLs gesendet wurden, klicken Sie das Kästchen Kästchen. Erweiterungs-URLs ausblenden an.

Erweiterungs-URLs, die in der Anfragetabelle ausgeblendet sind.

Chromium-Probleme: 1257885, 1458803.

Für Menschen lesbare HTTP-Statuscodes

Der Statuscode im Header der Anfrage zeigt jetzt neben den HTTP-Statuscodes menschenlesbaren Text an, damit Sie schneller herausfinden können, was mit der Anfrage passiert ist.

Der Vorher-Nachher-Zeitraum, in dem die HTTP-Statuscodes für Menschen lesbar angezeigt werden.

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

Chromium-Problem: 1153956.

Quelltextformatierungsantworten für JSON-Untertypen

Auf dem Tab Response (Antwort) für eine Anfrage mit dem MIME-Untertyp application/[subtype]+json (z. B. ld+json, hal+json usw.) wird die Antwort jetzt korrekt geparst, sodass Sie eine Vorhersage machen können.

Der vor 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 in der Zusammenfassung eines Ereignisses im Track Network jetzt zwei Prioritätsfelder angezeigt: Anfängliche Priorität und (letzte) Priorität statt nur die einzelne 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 anpassen. Weitere Informationen finden Sie unter Das Laden von Ressourcen mit der Fetch Priority API optimieren.

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

Außerdem finden Sie dieselben Informationen im Steuerfeld Netzwerk in der Spalte Priorität, wobei die Einstellung Kästchen. Zeilen für große Anfragen aktiviert ist.

Die Spalte „Priority“ (Priorität) im Steuerfeld „Network“ (Netzwerk).

Chromium-Probleme: 1463901, 1380964.

Quelleneinstellungen standardmäßig aktiviert: Codefaltung und automatische Dateisichtbarkeit

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

Bewegen Sie zum Falten eines Codeblocks die Maus über 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 jetzt die Option Einstellungen. Einstellungen > Einstellungen > Kästchen. Dateien in der Seitenleiste automatisch anzeigen jetzt standardmäßig aktiviert.

Mit dieser Einstellung wird in der Dateistruktur unter Quellen > Seite die aktuelle Datei im Editor ausgewählt, wenn Sie den Tab wechseln.

Chromium-Probleme: 1459193, 1336599.

Verbesserte Fehlerbehebung bei Problemen mit Drittanbieter-Cookies

Um den Datenschutz im Web zu verbessern, und parallel zu Updates durch andere Browser hat Chrome die Initiative Privacy Sandbox ins Leben gerufen. Diese Initiative verbessert den Datenschutz im Web grundlegend und trägt zu einem gut funktionierenden, werbeunterstützten Web bei, sodass Drittanbieter-Cookies überflüssig werden. Für die Privacy Sandbox gibt es einen Schritt-für-Schritt-Zeitplan für die Einstellung, damit Sie sich problemlos an Änderungen anpassen können.

Sie können bereits nach der Einstellung von Drittanbieter-Cookies testen, wie sich Chrome verhält. Führen Sie dazu Chrome über die Befehlszeile mit dem Flag --test-third-party-cookies-phaseout aus. Informationen zur Funktionsweise dieses Flags finden Sie unter Fehlerbehebung bei Cookies.

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

  • Eine funktionsgefährdende Änderungswarnung zur bevorstehenden Einstellung.
  • Probleme 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, prüfen Sie die Cookies auf dieser Demoseite.

Probleme mit Drittanbieter-Cookies, die auf dem Tab „Probleme“ gemeldet werden.

Außerdem wurde der Filter Kästchen. Blockierte Antwort-Cookies im Steuerfeld Netzwerk umformuliert, um deutlich zu machen, dass nur die blockierten Antwort-Cookies angezeigt werden.

Das Kästchen ist aktiviert und zeigt nur Anfragen mit blockierten Antwort-Cookies an.

Chromium-Probleme: 1458839, 1462693, 1466310.

Fehler beim Vorabladen im Bereich „Anwendung“ beheben

Das Chrome-Team führt ein vollständiges Pre-Rendering für Seiten zurück, die ein Nutzer wahrscheinlich aufrufen wird. Damit Sie diesen Fehler beheben können, haben die Entwicklertools den Abschnitt Vorabladen im Steuerfeld Anwendung hinzugefügt. Beim neuen Prefetching und Pre-Rendering (zusammenfassend als „Navigations Preloading“ bezeichnet) wird die Speculation Rules API anstelle der linkbasierten Ressourcenhinweise verwendet.

Auf dieser Demoseite können Sie im Bereich Anwendung > Vorabladen Folgendes prüfen:

  • Spekulationsregeln, in denen alle Regelsätze aufgelistet sind, die auf der aktuellen Seite gefunden wurden.
  • Vorab geladen, in der alle vorab abgerufenen und vorab gerenderten URLs aus den Regelsätzen aufgelistet sind.
  • Diese Seite, auf der der vorab gerenderte Status der aktuellen Seite aufgeführt ist.

Weitere Informationen finden Sie in diesem Beitrag zum Debuggen von Spekulationsregeln.

Chromium-Problem: 1410709.

Neue Farben

Vielleicht hast du schon bemerkt, dass die Entwicklertools jetzt einen neuen Look haben, der besser zu Chrome passt. Ein Faktor, der dazu beiträgt, ist das neue Farbschema.

Der Vorher-Nachher-Vergleich neuer Farben.

Diese Version (117) enthält weitere UX-Verbesserungen in den Entwicklertools, die sowohl bereits erwähnt als auch weiter aufgeführt sind, einschließlich einer Reihe verbesserter UI-Texte.

Chromium-Problem: 1456677.

Lighthouse 10.4.0

Im Bereich Lighthouse wird jetzt Lighthouse 10.4.0 ausgeführt. Insbesondere werden in dieser Version neue Prüfungen zur Barrierefreiheit für Folgendes hinzugefügt:

Beispiel:

Die Farbe von Links, die sie nicht unterscheidbar machen, wurde nicht überprüft.

Eine vollständige Liste der Änderungen finden Sie hier. Informationen zu den Grundlagen der Verwendung des Steuerfelds 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 Entwicklertools ist jetzt Open Source und befindet sich im Frontend-Repository der Entwicklertools. Diese Erweiterung aktiviert 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.

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

Chromium-Problem: 1410709.

Sonstige Highlights

Dies sind einige bemerkenswerte Korrekturen und Verbesserungen in dieser Version:

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. Diese Präferenz kann berücksichtigt werden, um die Zugänglichkeit Ihrer Website zu verbessern. Der Tab Rendering in der Leiste kann jetzt die Einstellung prefers-reduced-transparency: reduce emulieren. So können Sie einen Prototyp für eine Lösung erstellen und das Verhalten Ihrer Website in diesem Fall testen.

Wenn Sie diese Funktion in Chrome testen möchten, aktivieren Sie in chrome://flags die Experimental Web Platform-Funktionen.

Chromium-Problem: 1424879.

Erweiterter Protokollmonitor

Für die Chrome-Entwicklertools wird das Chrome DevTools Protocol (CDP) verwendet, um Chrome-Browser zu instrumentieren, zu untersuchen, zu debuggen und Profile zu erstellen. Als Chromium- oder Entwicklertools-Entwickler bietet der Protokollmonitor die Möglichkeit, alle CDP-Anfragen und -Antworten der Entwicklertools anzusehen und CDP-Befehle zu senden.

Der Protokollmonitor erhält eine neue Schnittstelle, mit der Sie CDP-Befehle einfacher erstellen und senden können. Jetzt musst du nicht mehr in der Dokumentation nach Befehlen und ihren Parametern suchen – die Entwicklertools schlagen sie dir vor.

Klicken Sie unten rechts auf dem Tab der Leiste Protokollmonitor auf Linker Bereich 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 Vorschläge 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 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