Neuerungen in den Entwicklertools (Chrome 117)

Sofia Emelianova
Sofia Emelianova

Verbesserungen am Netzwerkbereich

Webinhalte noch schneller lokal überschreiben

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

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 in DevTools aktiviert. Wenn Sie sie noch nicht eingerichtet haben, werden Sie in den DevTools oben in der Aktionsleiste dazu aufgefordert. Wählen Sie einen Ordner aus, in dem die Überschreibungen gespeichert werden sollen, und gewähren Sie den DevTools Zugriff darauf.

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

Nachdem die Überschreibungen eingerichtet wurden, können Sie in den DevTools unter Quellen > Überschreibungen > Editor Webinhalte überschreiben.

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 „Netzwerk“.

Chromium-Probleme: 1465785, 1470532, 1469359.

Inhalt von XHR- und Abrufanfragen überschreiben

Sie können jetzt den Inhalt von XHR überschreiben und Anfragen zusätzlich zu ihren Antwortheadern abrufen. Mit solchen Überschreibungen können Sie die API-Antworten simulieren, um Ihre Webseite zu debuggen, auch wenn Ihr Backend und Ihre API noch nicht bereit sind.

In DevTools werden derzeit Inhaltsüberschreibungen für die folgenden Anfragetypen unterstützt: Bilder (z. B. avif, png), Schriftarten, Fetch und XHR, Scripts (CSS und JS) und Dokumente (HTML). In den DevTools ist die Option Inhalt ü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 in Chrome installiert haben, gibt es im Bereich Netzwerk einen neuen Filter.

Wenn Sie alle Anfragen herausfiltern möchten, die an chrome-extension://-URLs gesendet werden, setzen Sie ein Häkchen bei Kästchen. Erweiterungs-URLs ausblenden.

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

Chromium-Probleme: 1257885, 1458803

Lesbare HTTP-Statuscodes

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

Vorher und nachher werden lesbare HTTP-Statuscodes angezeigt.

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

Chromium-Problem: 1153956.

Optimierte Darstellung von Antworten für JSON-Untertypen

Auf dem Tab Antwort einer Anfrage mit einem application/[subtype]+json-MIME-Untertyp (z. B. ld+json, hal+json usw.) wird die Antwort jetzt korrekt geparst und kann formatiert werden.

Vorher und nachher Parsen eines application/json-Untertyps in einer Netzwerkantwortvorschau

Chromium-Problem: 406900

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

Im Bereich Leistung werden in der Zusammenfassung eines Ereignisses im Netzwerk-Track jetzt zwei Prioritätsfelder angezeigt: Anfangspriorität und (finale) Priorität, anstatt 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 Ressourcenladevorgang mit der Fetch Priority API optimieren.

Vorher und nachher: Änderungen bei der Abrufpriorität

Dieselben Informationen finden Sie auch im Bereich Netzwerk in der Spalte Priorität, wenn die Einstellung Kästchen. Zeilen mit großen Anfragen aktiviert ist.

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

Chromium-Probleme: 1463901, 1380964.

Standardmäßig aktivierte Quelleneinstellungen: Code-Folding und automatische Dateienthüllung

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

Wenn Sie einen Codeblock minimieren möchten, bewegen Sie den Mauszeiger auf die Zeilennummer neben dem Anfang des Blocks und klicken Sie auf das Minimieren-Symbol 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 standardmäßig aktiviert.

Wenn Sie diese Einstellung aktivieren, wird im Dateibaum unter Quellen > Seite die aktuelle Datei ausgewählt, die im Editor geöffnet ist, wenn Sie den Tab wechseln.

Chromium-Probleme: 1459193, 1336599.

Verbesserte Fehlerbehebung bei Problemen mit Drittanbieter-Cookies

Im Rahmen der Initiative Privacy Sandbox von Chrome möchten wir dazu beitragen, ein datenschutzfreundlicheres Web zu schaffen. Parallel dazu werden auch Updates von anderen Browsern eingeführt. Diese Initiative verbessert den Datenschutz im Web grundlegend und kann ein werbeunterstütztes Web ermöglichen, bei dem vollständig auf Cookies von Drittanbietern verzichtet werden kann. Die Privacy Sandbox wird stufenweise eingestellt, damit Sie sich problemlos auf die Änderungen vorbereiten können.

Sie können bereits testen, wie sich Chrome nach der Einstellung von Drittanbieter-Cookies verhält. Führen Sie dazu Chrome über die Befehlszeile mit dem Flag --test-third-party-cookies-phaseout aus. Weitere Informationen zu diesem Flag 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 berücksichtigen für alle neuen Chrome-Nutzer standardmäßig aktiviert. Daher werden folgende Probleme gemeldet:

  • Eine Warnung zu einer funktionsgefährdenden Änderung im Zusammenhang mit der bevorstehenden Einstellung.
  • Probleme im Zusammenhang mit Drittanbieter-Cookies

Wenn Sie als Chrome-Nutzer Cookie-Warnungen zur bevorstehenden Einstellung sehen möchten, setzen Sie ein Häkchen in dieses Kästchen.

Sie können dies testen, indem Sie die Cookies auf dieser Demoseite prüfen.

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

Außerdem wurde der Filter Kästchen. Blockierte Antwort-Cookies im Bereich Netzwerk umformuliert, damit klar ist, dass nur die blockierten Antwort-Cookies angezeigt werden.

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

Chromium-Probleme: 1458839, 1462693, 1466310.

Vorab-Laden im Bereich „Anwendung“ debuggen

Das Chrome-Team führt das vollständige Prerendering zukünftiger Seiten wieder ein, zu denen ein Nutzer wahrscheinlich wechseln wird. Zur Fehlerbehebung wird in den Entwicklertools der Bereich Vorabladen zum Bereich Anwendung hinzugefügt. Beim neuen Vorabladen und Vorabrendering (zusammen 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:

  • Regeln für Spekulationen: Hier werden alle Regelsätze aufgelistet, die auf der aktuellen Seite gefunden wurden.
  • Preloads, in denen alle vorab abgerufenen und vorab gerenderten URLs aus den Regelsätzen aufgeführt sind.
  • Diese Seite, auf der der Status der Vorabrenderings der aktuellen Seite aufgeführt ist.

Weitere Informationen finden Sie im entsprechenden Beitrag zum Debuggen von Spekulationsregeln.

Chromium-Problem: 1410709.

Neue Farben

Sie haben vielleicht schon bemerkt, dass die Entwicklertools jetzt ein neues Design haben, das besser zu Chrome passt. Ein Faktor dafür ist das neue Farbschema.

Vorher und nachher: Neue Farben wurden angewendet.

Diese Version (117) enthält weitere UX-Verbesserungen für die DevTools, die bereits erwähnt und weiter unten 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. In dieser Version werden vor allem neue Prüfungen zur Barrierefreiheit für Folgendes hinzugefügt:

Beispiel:

Die Farbe der Links ist nicht zu unterscheiden.

Weitere Informationen finden Sie in der vollständigen Liste der Änderungen. Informationen zu den Grundlagen der Verwendung des Lighthouse-Steuerfelds in den DevTools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558

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

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

Weitere Informationen zum Erstellen, Ausführen und Testen der Erweiterung und zum Mitwirken

Chromium-Problem: 1410709.

Sonstige Highlights

Hier sind einige wichtige Fehlerkorrekturen und Verbesserungen in dieser Version:

Neue experimentelle Funktionen

Neue Rendering-Emulation: prefers-reduced-transparency

Ihre Websitenutzer können die neue experimentelle prefers-reduced-transparencyCSS-Medienfunktion auf ihren Geräten aktivieren, um anzugeben, dass sie transparente Effekte reduzieren möchten. Sie sollten diese Einstellung berücksichtigen, um die Barrierefreiheit Ihrer Website zu verbessern. Auf dem Tab Rendering können Sie die Einstellung prefers-reduced-transparency: reduce jetzt emulieren, um einen Prototyp einer Lösung zu erstellen und zu 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 experimentellen Funktionen der Webplattform.

Chromium-Problem: 1424879

Erweiterter Protokollmonitor

In den Chrome-Entwicklertools wird das Chrome-Entwicklertools-Protokoll (CDP) verwendet, um Chrome-Browser zu instrumentieren, zu prüfen, zu debuggen und zu profilieren. Wenn Sie Chromium- oder DevTools-Entwickler sind, können Sie mit dem Protokoll-Monitor alle CDP-Anfragen und ‑Antworten von DevTools aufrufen und CDP-Befehle senden.

Der Protokoll-Monitor erhält eine neue Benutzeroberfläche, mit der Sie CDP-Befehle einfacher erstellen und senden können. Sie müssen Befehle und ihre Parameter nicht mehr in der Dokumentation nachschlagen, sondern werden in den DevTools Vorschläge dazu erhalten.

Klicken Sie rechts unten im Tab Protokollmonitor auf Der linke Bereich ist geöffnet. CDP-Befehlseditor anzeigen, wählen Sie ein Ziel aus, geben Sie einen Befehl ein, wählen Sie einen der Vorschläge aus, geben Sie bei Bedarf Parameterwerte an und klicken Sie auf Senden. Befehl senden (Strg/Befehlstaste + Eingabetaste).

CDP-Befehl angeben und senden

Chromium-Problem: 1469345

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

Neu in den DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.