Neuerungen in den Entwicklertools (Chrome 117)

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.

Wenn Sie lokale Überschreibungen eingerichtet, aber deaktiviert haben, werden sie in DevTools 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.

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 gekennzeichnet. Bewegen Sie den Mauszeiger auf das Symbol, um zu sehen, was überschrieben wird.

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

Chrome-Erweiterungsanfragen 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 Erweiterungs-URLs ausblenden.

Chromium-Probleme: 1257885, 1458803.

Lesbare HTTP-Statuscodes

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

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.

Chromium-Problem: 406900

Leistung: Änderungen 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 optimieren. Weitere Informationen finden Sie unter Ressourcenladevorgang mit der Fetch Priority API optimieren.

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

Chromium-Probleme: 1463901, 1380964.

Standardmäßig aktivierte Einstellungen für Quellen: Code-Folding und automatische Dateienthüllung

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

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

Außerdem ist die Option Einstellungen > Einstellungen > Dateien automatisch in der Seitenleiste anzeigen jetzt 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

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 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 Probleme mit Drittanbieter-Cookies berücksichtigen für alle neuen Chrome-Nutzer standardmäßig aktiviert. Daher werden folgende Probleme gemeldet:

• Warnung zu funktionsgefährdenden Änderungen zur 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.

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

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

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 DevTools der Bereich Vorabladen zum Bereich Anwendung 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 können Sie im Bereich Anwendung > Vorabladen Folgendes prüfen:

• Spekulationsregeln, die alle auf der aktuellen Seite gefundenen Regelsätze auflisten.
• Preloads, in denen alle vorab abgerufenen und vorab gerenderten URLs aus den Regelsätzen aufgeführt sind.
• Diese Seite, auf der der vorab gerenderte Status der aktuellen Seite aufgeführt ist.

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

Chromium-Problem: 1410709.

Neue Farben

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

Diese Version (117) enthält mehr 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. In dieser Version werden vor allem neue Prüfungen zur Barrierefreiheit für Folgendes hinzugefügt:

• aria-dialog-name
• aria-text
• link-in-text-block
• select-name

Beispiel:

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 DevTools 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 aktiviert Debugging-Funktionen in den Entwicklertools für C++-Programme, die in WebAssembly kompiliert wurden. Weitere Informationen finden Sie unter C/C++ WebAssembly debuggen.

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

Chromium-Problem: 1410709

Sonstige Highlights

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

• CSS-Verschachtelung: Im Bereich Elemente wird jetzt die gesamte Selektorkette für verschachtelte untergeordnete Elemente angezeigt (1172985).
• Unter Anwendung > Manifest gibt es jetzt den Bereich Fenstersteuerungs-Overlay. Dort wird geprüft, ob im Manifest ein display_override-Wert vorhanden ist. Außerdem finden Sie dort Links zu relevanter Dokumentation.
• Der Baum unter Quellen > Seite sieht jetzt unter anderem Folgendes aus (1442863):
  • Ordner werden ausgegraut, wenn alle Inhalte auf der Ignorieren-Liste stehen.
  • Ordner werden orange eingefärbt, wenn ihr gesamter Inhalt aus einer Quellkarte stammt.
• Leistung: Die Aufnahmeeinstellungen werden jetzt automatisch ausgeblendet, wenn Sie die Aufnahme starten (1455498).
• Unter Quellen > Editor wurde das Verhalten von Strg + Pfeil (Windows) und Opt + Pfeil (macOS) wiederhergestellt (1468208).
• Die Option Animationen > Alle pausieren behält jetzt ihren Status bei Seitenladevorgängen (1446046).
• Anwendung > Speicher > Cache-Speicher wurde in den Bereich Anwendung > Speicher > Cache (1462622) verschoben.
• Einige UI-Texte und Kurzinfos wurden verbessert: Hardware-Parallelität – Kurzinfo, Netzwerkfiltertexte und eine Hauptmenüoption, Großschreibung in der Anwendungsstrukturansicht, Texte unter „Netzwerk“ > „Header“, Texte unter „Quellen“ > „Überschreibungen“ und „Dateisystem“.

Neue experimentelle Funktionen

Neue Rendering-Emulation: prefers-reduced-transparency

Ihre Websitenutzer 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. 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

Die Chrome-Entwicklertools verwenden das Chrome DevTools Protocol (CDP), um Chrome-Browser zu instrumentieren, zu untersuchen, zu debuggen und Profile zu erstellen. 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 Protokollmonitor erhält eine neue Schnittstelle, über die 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 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 Befehl senden (Strg/Befehlstaste + Eingabetaste).

Chromium-Problem: 1469345.

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Ü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 dies tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen, Updates oder andere Aspekte der Entwicklertools zu besprechen.

• Senden Sie uns Feedback und Funktionsanfragen unter crbug.com.
• Melden Sie ein DevTools-Problem über das Dreipunkt-Menü more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Tweeten Sie an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu den Neuigkeiten in den DevTools oder den YouTube-Videos mit Tipps zu den DevTools.

Neu in DevTools

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