Neuerungen in den Entwicklertools (Chrome 117)

Verbesserungen am Netzwerkbereich

Webinhalte noch schneller lokal überschreiben

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

Wenn Sie Webinhalte überschreiben möchten, öffnen Sie den Bereich Network (Netzwerk), klicken Sie mit der rechten Maustaste auf eine Anfrage und wählen Sie Override content (Inhalt überschreiben) aus.

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

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

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.

Inhalte von XHR- und Fetch-Anfragen überschreiben

Sie können jetzt nicht nur die Antwortheader von XHR- und Fetch-Anfragen, sondern auch deren Inhalt überschreiben. 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.

DevTools unterstützt 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 DevTools wird die Option Inhalte überschreiben jetzt für nicht unterstützte Typen ausgegraut.

Chromium-Probleme: 792101, 1469776.

Anfragen für Chrome-Erweiterungen ausblenden

Damit Sie sich auf den von Ihnen geschriebenen Code konzentrieren können und irrelevante Anfragen herausgefiltert werden, die von Erweiterungen gesendet werden, die Sie möglicherweise in Chrome installiert haben, erhält der Bereich Netzwerk einen neuen Filter.

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

Chromium-Probleme: 1257885, 1458803.

Menschenlesbare HTTP-Statuscodes

Der Statuscode im Header der Anfrage enthält jetzt neben den HTTP-Statuscodes auch lesbaren Text, 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.

Antworten für JSON-Subtypen optimiert darstellen

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

Chromium-Problem: 406900.

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

Im Bereich Leistung werden jetzt zwei Prioritätsfelder in der Zusammenfassung eines Ereignisses im Netzwerk-Track angezeigt: Anfangspriorität und (endgültige) Priorität. Bisher wurde nur die einzelne Priorität angezeigt. 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 Ressourcen mithilfe 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 automatisches Einblenden von Dateien

Die Option Einstellungen > Einstellungen > Code-Folding ist jetzt standardmäßig aktiviert. Mit dieser Option können Sie Codeblöcke ein- und ausblenden.

Wenn Sie einen Codeblock minimieren möchten, bewegen Sie 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 jetzt standardmäßig Einstellungen > Einstellungen > Dateien automatisch in der Seitenleiste einblenden aktiviert.

Wenn Sie Tabs wechseln, wird mit dieser Einstellung im Dateibaum unter Quellen > Seite die aktuelle Datei ausgewählt, die im Editor geöffnet ist.

Chromium-Probleme: 1459193, 1336599.

Verbessertes Debugging von Problemen mit Drittanbieter-Cookies

Um zu einem datenschutzfreundlicheren Web beizutragen und parallel zu Updates anderer Browser, hat Chrome die Privacy Sandbox-Initiative eingeführt. Diese Initiative verbessert den Datenschutz im Web grundlegend und kann ein gesundes, werbeunterstütztes Web ermöglichen, bei dem vollständig auf Cookies von Drittanbietern verzichtet werden kann. Für die Privacy Sandbox gilt ein Zeitplan für die schrittweise Einstellung, damit Sie sich in Ruhe an die Änderungen anpassen 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 zur Funktion dieses Flags finden Sie unter Cookies debuggen.

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

• Eine Warnung vor funktionsgefährdenden Änderungen im Zusammenhang mit der bevorstehenden Einstellung.
• Probleme im Zusammenhang mit Drittanbieter-Cookies.

Wenn Sie als bestehender Chrome-Nutzer Cookie-Warnungen zum bevorstehenden Auslaufen sehen möchten, aktivieren Sie dieses Kästchen.

Um dies zu testen, sehen Sie sich die Cookies auf dieser Demoseite an.

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

Chromium-Probleme: 1458839, 1462693, 1466310.

Vorabladen im Bereich „Anwendung“ debuggen

Das Chrome-Team führt das vollständige Vorrendern zukünftiger Seiten wieder ein, zu denen ein Nutzer wahrscheinlich navigieren wird. Damit Sie dies debuggen können, wird in den Entwicklertools dem Bereich Anwendung der Abschnitt Preloading hinzugefügt. Beim neuen Prefetching und Prerendering (zusammen als „Navigations-Preloading“ bezeichnet) wird die Speculation Rules API anstelle der link-basierten Ressourcenhinweise verwendet.

Auf dieser Prerender-Demoseite können Sie im Bereich Application > Preloading Folgendes prüfen:

• Speculation Rules (Spekulationsregeln): Hier werden alle Regelsätze auf der aktuellen Seite aufgeführt.
• Vorabläufe mit allen vorab abgerufenen und vorab gerenderten URLs aus den Regelsätzen.
• Diese Seite: Hier wird der Vorrenderstatus der aktuellen Seite aufgeführt.

Weitere Informationen

Chromium-Problem: 1410709.

Neue Farben

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

Version 117 bietet weitere UX-Verbesserungen für die DevTools, die bereits erwähnt wurden und unten aufgeführt sind, darunter eine Reihe verbesserter UI-Texte.

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 Barrierefreiheitsprüfungen für Folgendes hinzugefügt:

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

Beispiel:

Vollständige Liste der Änderungen Die Grundlagen zur Verwendung des Lighthouse-Bereichs in den Entwicklertools 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 ermöglicht das Debuggen von C++-Programmen, die in WebAssembly kompiliert wurden, in den Entwicklertools. Weitere Informationen finden Sie unter C/C++-WebAssembly debuggen.

Informationen zum Erstellen, Ausführen und Testen der Erweiterung. Sie können auch dazu beitragen.

Chromium-Problem: 1410709.

Sonstige Highlights

Hier sind einige wichtige Fehlerbehebungen und Verbesserungen in dieser Version:

• CSS-Verschachtelung: Im Bereich Elemente wird jetzt die gesamte Selektorkette für verschachtelte untergeordnete Elemente angezeigt (1172985).
• Unter Application > Manifest (Anwendung > Manifest) gibt es jetzt den Abschnitt Window Controls Overlay (Overlay für Fenstersteuerelemente). Dort wird geprüft, ob im Manifest ein display_override-Wert vorhanden ist, und es werden Links zur relevanten Dokumentation bereitgestellt.
• Im Baum Quellen > Seite wird jetzt Folgendes berücksichtigt (1442863):
  • Ordner werden ausgegraut, wenn ihr gesamter Inhalt auf der Ignorieren-Liste steht.
  • Ordner werden orange dargestellt, 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 + Pfeiltaste (Windows) und Wahl + Pfeiltaste (MacOS) wiederhergestellt (1468208).
• Die Ein/Aus-Schaltfläche Animationen > Alle pausieren behält jetzt ihren Status bei Seitenaufrufen bei (1446046).
• Anwendung > Speicher > Cache-Speicher wurde in den Bereich Anwendung > Speicher > Cache verschoben (1462622).
• Einige UI-Texte und Tooltips wurden verbessert: Tooltip für Hardware-Concurrency, Texte für Netzwerkfilter und eine Hauptmenüoption, Großschreibung in der Anwendungsbaumansicht, Texte unter „Netzwerk“ > „Header“, Texte unter „Quellen“ > „Überschreibungen“ und „Dateisystem“.

Neue experimentelle Funktionen

Neue Rendering-Emulation: prefers-reduced-transparency

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

Wenn Sie diese Funktion in Chrome testen möchten, aktivieren Sie Experimentelle Webplattformfunktionen in chrome://flags.

Chromium-Problem: 1424879.

Erweiterter Protokollmonitor

Die Chrome-Entwicklertools verwenden das Chrome-Entwicklertools-Protokoll (CDP), um Chrome-Browser zu instrumentieren, zu untersuchen, zu debuggen und zu profilieren. Wenn Sie Chromium- oder DevTools-Entwickler sind, können Sie mit dem Protokollmonitor alle CDP-Anfragen und -Antworten von DevTools ansehen und CDP-Befehle senden.

Der Protokollmonitor 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, da sie von den Entwicklertools vorgeschlagen werden.

Klicken Sie rechts unten auf dem Tab Protocol monitor (Protokollmonitor) auf Show CDP command editor (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 Send command (Befehl senden) (Strg/Befehlstaste + Eingabetaste).

Chromium-Problem: 1469345.

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

• Sie können uns Feedback und Funktionsanfragen unter crbug.com senden.
• Melden Sie ein DevTools-Problem in den Entwicklertools über das more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Senden Sie einen Tweet an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu Neuerungen in den DevTools oder den YouTube-Videos mit DevTools-Tipps.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.