Neuerungen in den Entwicklertools (Chrome 79)

Kayce Basques

Neue Funktionen für Cookies

Fehlerbehebung bei blockierten Cookies

Nachdem Sie die Netzwerkaktivität aufgezeichnet haben, wählen Sie eine Netzwerkressource aus und rufen Sie den aktualisierten Tab Cookies auf, um zu sehen, warum die Anfrage- oder Antwort-Cookies dieser Ressource blockiert wurden. Unter Änderungen am Standardverhalten ohne SameSite erfahren Sie, warum in Chrome 76 und höher möglicherweise mehr Cookies blockiert werden.

Der Tab Cookies.

• Gelbe Anfrage-Cookies wurden nicht über das Netzwerk gesendet. Sie sind standardmäßig ausgeblendet. Klicken Sie auf Herausgefilterte Anfrage-Cookies anzeigen, um sie anzuzeigen.
• Gelbe Antwort-Cookies wurden über das Netzwerk gesendet, aber nicht gespeichert.
• Bewegen Sie den Mauszeiger auf Weitere Informationen , um zu sehen, warum ein Cookie blockiert wurde.
• Die meisten Daten in den Tabellen Request Cookies (Anfrage-Cookies) und Response Cookies (Antwort-Cookies) stammen aus den HTTP-Headern der Ressource. Die Daten für Domain, Path und Expires/Max-Age stammen aus dem Chrome-Entwicklertools-Protokoll.

Chromium-Probleme #856777, #993843

Cookie-Werte ansehen

Klicken Sie im Bereich „Cookies“ auf eine Zeile, um den Wert des entsprechenden Cookies aufzurufen.

Den Wert eines Cookies ansehen.

Chromium-Problem #462370

Verschiedene Einstellungen für „prefers-color-scheme“ und „prefers-reduced-motion“ simulieren

Mit der Media-Query prefers-color-scheme können Sie den Stil Ihrer Website an die Einstellungen Ihrer Nutzer anpassen. Wenn die Media-Anfrage prefers-color-scheme: dark beispielsweise „true“ zurückgibt, bedeutet das, dass der Nutzer sein Betriebssystem auf den dunklen Modus eingestellt hat und Benutzeroberflächen im dunklen Modus bevorzugt.

Öffnen Sie das Befehlsmenü, führen Sie den Befehl Rendering anzeigen aus und legen Sie dann im Drop-down-Menü CSS-Medienfunktion „prefers-color-scheme“ emulieren fest, wie die prefers-color-scheme: dark- und prefers-color-scheme: light-Stile debuggt werden sollen.

Wenn prefers-color-scheme: dark festgelegt ist (mittleres Feld), wird im Bereich „Stile“ (rechtes Feld) das CSS angezeigt, das angewendet wird, wenn die Media-Anfrage zutrifft, und im Viewport werden die Darkmode-Stile angezeigt (linkes Feld).

Sie können prefers-reduced-motion: reduce auch über das Drop-down-Menü CSS-Medienfunktion „prefers-reduced-motion“ emulieren neben dem Drop-down-Menü CSS-Medienfunktion „prefers-color-scheme“ emulieren simulieren.

Chromium-Problem #1004246

Zeitzonen-Emulation

Auf dem Tab „Sensors“ können Sie jetzt nicht nur die Geolocation überschreiben, sondern auch beliebige Zeitzonen emulieren und die Auswirkungen auf Ihre Web-Apps testen. Überraschenderweise verbessert diese neue Funktion auch die Zuverlässigkeit der Geolocation-Emulation: Bisher konnten Web-Apps Standort-Spoofing erkennen, indem sie den Standort mit der lokalen Zeitzone des Nutzers abglichen. Da die Emulation von geografischem Standort und Zeitzone jetzt gekoppelt ist, gibt es diese Art von Abweichungen nicht mehr.

Aktualisierungen der Codeabdeckung

Auf dem Tab „Abdeckung“ können Sie nicht verwendeten JavaScript- und CSS-Code finden.

Auf dem Tab „Abdeckung“ werden jetzt neue Farben verwendet, um verwendeten und nicht verwendeten Code darzustellen. Diese Farbkombination ist nachweislich besser für Menschen mit Farbblindheit geeignet. Der rote Balken auf der linken Seite steht für ungenutzten Code und der bläuliche Balken auf der rechten Seite für genutzten Code.

Mit dem neuen Textfeld für den Filtertyp für die Abdeckung können Sie nach Abdeckungsinformationen filtern: Sie können nur die JavaScript-Abdeckung, nur die CSS-Abdeckung oder alle Arten von Abdeckung anzeigen lassen.

Tab „Abdeckung“

Im Bereich „Quellen“ werden Daten zur Codeabdeckung angezeigt, sofern sie verfügbar sind. Wenn Sie auf die roten oder bläulichen Markierungen neben der Zeilennummer klicken, wird der Tab „Abdeckung“ geöffnet und die Datei wird hervorgehoben.

Abdeckungsdaten im Quellenbereich Zeile 8 ist ein Beispiel für nicht verwendeten Code. Zeile 11 ist ein Beispiel für verwendeten Code.

Chromium-Probleme #1003671, #1004185

Debuggen, warum eine Netzwerkressource angefordert wurde

Nachdem Sie die Netzwerkaktivität aufgezeichnet haben, wählen Sie eine Netzwerkressource aus und rufen Sie dann den Tab Initiator auf, um zu sehen, warum die Ressource angefordert wurde. Im Abschnitt Aufrufstack anfordern wird der JavaScript-Aufrufstack beschrieben, der zur Netzwerkanfrage führt.

Der Tab Initiator.

Chromium-Probleme 963183, 842488

Einrückungseinstellungen werden in den Bereichen „Console“ und „Sources“ wieder berücksichtigt

In DevTools gibt es schon lange eine Einstellung, mit der Sie die Einrückung auf 2 Leerzeichen, 4 Leerzeichen, 8 Leerzeichen oder Tabulatoren festlegen können. Bisher war die Einstellung im Grunde nutzlos, da sie in den Bereichen „Konsole“ und „Quellen“ ignoriert wurde. Dieser Fehler wurde jetzt behoben.

Gehen Sie zu Einstellungen > Einstellungen > Quellen > Standardeinzug, um Ihre bevorzugte Einstellung festzulegen.

Chromium-Problem #977394

Neue Tastenkombinationen für die Cursor-Navigation

Drücken Sie im Console- oder Sources-Bereich Strg+P, um den Cursor in die Zeile darüber zu verschieben. Drücken Sie Strg + N, um den Cursor in die Zeile darunter zu verschieben.

Chromium-Problem #983874

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 in den YouTube-Videos zu den 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.