Neuerungen in den Entwicklertools (Chrome 79)

Kayce Basques

Neue Funktionen für Cookies

Fehler beheben, warum ein Cookie blockiert wurde

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

Der Tab „Cookies“

Über den Tab Cookies

  • Es wurden keine gelben Anfrage-Cookies gesendet. Diese sind standardmäßig ausgeblendet. Klicken Sie auf Gefilterte Anfrage-Cookies anzeigen, um sie einzublenden.
  • Gelbe Antwort-Cookies wurden gesendet, aber nicht gespeichert.
  • Bewegen Sie den Mauszeiger auf Weitere Informationen Info, um zu erfahren, warum ein Cookie blockiert wurde.
  • Die meisten Daten in den Tabellen Anfrage-Cookies und Antwort-Cookies stammen aus den HTTP-Headern der Ressource. Die Daten für Domain, Pfad und expire/Max-Age stammen aus dem Chrome DevTools Protocol.

Chromium-Probleme #856777 und #993843

Cookiewerte ansehen

Klicken Sie auf eine Zeile im Bereich Cookies, um den Wert dieses Cookies zu sehen.

Wert eines Cookies ansehen

Wert eines Cookies ansehen

Chromium-Problem #462370

Simulieren verschiedene Präferenzen für das Farbschema von „Bevorzugt“ und „Verringerte Bewegungsfreiheit“

Mit der Medienabfrage prefers-color-scheme können Sie den Stil Ihrer Website an die Präferenzen Ihrer Nutzer anpassen. Wenn die Medienabfrage prefers-color-scheme: dark beispielsweise „wahr“ ist, bedeutet dies, dass Ihr Nutzer für sein Betriebssystem den dunklen Modus festgelegt hat und UIs im dunklen Modus bevorzugt.

Öffnen Sie das Befehlsmenü, führen Sie den Befehl Rendering anzeigen aus und klicken Sie dann auf das Drop-down-Menü CSS-Medienfeature „prefers-color-scheme emulieren“, um Fehler in den Stilen prefers-color-scheme: dark und prefers-color-scheme: light zu beheben.

bevorzugt-Farbschema: dunkel

Wenn prefers-color-scheme: dark festgelegt ist (mittleres Feld), wird im Bereich „Stile“ (rechtes Feld) der CSS-Code angezeigt, der angewendet wird, wenn die Medienabfrage wahr ist. Im Darstellungsbereich werden die Stile des dunklen Modus angezeigt (linkes Feld).

Sie können prefers-reduced-motion: reduce auch mit dem Drop-down-Menü CSS-Medienfunktion „Emulate CSS“ (CSS-Medienfeature bevorzugt-Reduzierer-Motion emulieren) neben dem Drop-down-Menü CSS-Medienfunktion „Bevorzugt-Farbschema emulieren“ verwenden.

Chromium-Problem #1004246

Zeitzonenemulation

Auf dem Tab „Sensoren“ können Sie jetzt nicht nur die override geolocation, sondern auch beliebige Zeitzonen emulieren und die Auswirkungen auf Ihre Web-Apps testen. Überraschenderweise verbessert diese neue Funktion auch die Zuverlässigkeit der Standortemulation: Bisher konnten Web-Apps Standort-Spoofing erkennen, indem der Standort mit der lokalen Zeitzone des Nutzers abgeglichen wurde. Da nun die Standortbestimmung und die Zeitzonenemulation gekoppelt sind, wird diese Kategorie von Abweichungen beseitigt.

Updates zur Codeabdeckung

Auf dem Tab Abdeckung können Sie nicht verwendetes JavaScript und CSS finden.

Auf dem Tab „Abdeckung“ werden jetzt gebrauchte und nicht verwendete Codes in neuen Farben dargestellt. Diese Farbkombination ist nachweislich für Menschen mit Farbblindheit barrierefrei zugänglich. Die rote Leiste auf der linken Seite steht für ungenutzten Code und die bläuliche Leiste auf der rechten Seite für gebrauchten Code.

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

Tab „Abdeckung“

Tab „Abdeckung“

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

Daten zur Abdeckung im Bereich „Quellen“.

Daten zur Abdeckung im Bereich „Quellen“. Zeile 8 ist ein Beispiel für nicht verwendeten Code. Zeile 11 ist ein Beispiel für verwendeten Code.

Chromium-Probleme #1003671, #1004185

Fehler beheben, 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 erfahren, warum die Ressource angefordert wurde. Im Abschnitt Anfrageaufrufstack wird der JavaScript-Aufrufstack beschrieben, der zur Netzwerkanfrage führt.

Tab „Initiator“ (Initiator)

Tab Initiator (Initiator)

Chromium-Probleme 963183 und 842488

Die Bereiche „Konsole“ und „Quellen“ berücksichtigen die Einrückeinstellungen wieder

Seit Langem gibt es in den Entwicklertools eine Einstellung, mit der Sie Ihre Einrückeinstellungen auf 2 Leerzeichen, 4 Leerzeichen, 8 Leerzeichen oder Tabulatoren anpassen können. In letzter Zeit war die Einstellung praktisch nutzlos, da sie in den Bereichen Console und Quellen ignoriert wurde. Dieser Fehler wurde inzwischen behoben.

Legen Sie unter Einstellungen > Einstellungen > Quellen > Standardeinzug die gewünschten Einstellungen fest.

Chromium-Problem #977394

Neue Tastenkombinationen für die Cursornavigation

Drücken Sie Strg+P in der Konsole oder im Quellenbereich, 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

Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome Erste Schritte

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde abgebrochen.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59