Neuerungen in den Entwicklertools (Chrome 117)

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.

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.

Sobald die Überschreibungen eingerichtet sind, öffnet sich in den Entwicklertools Quellen > Überschreibungen > Editor zum Überschreiben von Webinhalten

Die überschriebenen Ressourcen werden 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 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 Erweiterungs-URLs ausblenden.

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.

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.

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.

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

Chromium-Probleme: 1463901, 1380964.

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

Unter Einstellungen > Einstellungen > Die Option 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 . Klicken Sie auf {...}, um den Block wieder zu maximieren.

Außerdem kannst du unter Einstellungen > Einstellungen > Die Option Dateien automatisch in der Seitenleiste anzeigen ist jetzt ebenfalls standardmäßig aktiviert.

Diese Einstellung bewirkt, dass die Dateistruktur unter Quellen > Seite: Wählen Sie die aktuell im Editor geöffnete Datei aus, 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 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 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.

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

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.

Gehen Sie auf dieser Demoseite im Menü Application (Anwendung) > Bereich Vorabladen sehen Sie 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.

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:

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

Beispiel:

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).
• Anwendung > Das Manifest enthält jetzt den Abschnitt Overlay der Fenstersteuerelemente, in dem geprüft wird, ob ein display_override-Wert im Manifest vorhanden ist, und Links zu relevanter Dokumentation enthalten.
• Die Quellen > In der Seitenstruktur geschieht jetzt unter anderem Folgendes (1442863): <ph type="x-smartling-placeholder">
  </ph>
  • Ordner werden ausgegraut, wenn ihr gesamter Inhalt auf der Ignorieren-Liste steht.
  • Färbt Ordner in Orange ein, wenn ihr gesamter Inhalt aus einer Quellzuordnung stammt.
• Leistung: Die Aufnahmeeinstellungen werden jetzt automatisch ausgeblendet, wenn Sie die Aufzeichnung starten (1455498).
• Quellen > Der Editor hat die Funktionen Strg + Pfeil (Windows) und Wahltaste + Pfeil (MacOs) (1468208) wiederhergestellt.
• Animationen > Die Ein/Aus-Schaltfläche Alle pausieren behält jetzt seinen Status beim Seitenaufbau bei (1446046).
• Anwendung > Speicher > Cache-Speicher wurde in Anwendung > verschoben. Speicher > Cache-Abschnitt (1462622):
• Einige UI-Texte und Kurzinfos wurden verbessert: Kurzinfo zur Nebenläufigkeit von Hardware, Netzwerkfiltertexte und eine Hauptmenüoption, Großschreibung in der Anwendungsbaumansicht, Netzwerk > Überschriftentexte, 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 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 Befehl senden (Strg/Cmd + Eingabetaste).

Chromium-Problem: 1469345.

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhalten Sie Zugriff auf die neuesten Entwicklertools, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, bevor Ihre 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.
• Problem mit den Entwicklertools über Weitere Optionen melden > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
• 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