Neuerungen in den Entwicklertools (Chrome 79)

Neue Funktionen für Cookies

Fehlerbehebung, wenn 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 in Chrome 76 und höher möglicherweise mehr blockierte Cookies angezeigt werden.

Die Registerkarte Cookies

Tab Cookies

  • Anfrage-Cookies wurden nicht in Gelb gesendet. Diese sind standardmäßig ausgeblendet. Klicken Sie auf Herausgefilterte Anfrage-Cookies anzeigen, um sie einzublenden.
  • Gelb Antwort-Cookies wurden über die Leitung 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 zu Domain, Pfad und Läuft/Max-Alter stammen aus dem Protokoll der Chrome-Entwicklertools.

Chromium-Probleme #856777, #993843

Cookiewerte ansehen

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

Den Wert eines Cookies aufrufen

Den Wert eines Cookies aufrufen

Chromium-Problem #462370

Verschiedene bevorzugte Farbschemata und bevorzugte Bewegungsmuster simulieren

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

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

bevorzugt-Farbschema: dunkel

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

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

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. Möglicherweise verbessert diese neue Funktion auch die Zuverlässigkeit der Emulation zur Standortbestimmung: Früher konnten Web-Apps Standort-Spoofing erkennen, indem der Standort mit der lokalen Zeitzone des Nutzers abgeglichen wurde. Nachdem die Geolocation- und Zeitzonenemulation nun miteinander verknüpft sind, wird diese Kategorie von Abweichungen beseitigt.

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 für Menschen mit Farbblindheit barrierefrei zugänglich. Die rote Leiste auf der linken Seite steht für nicht verwendeten Code, die bläuliche Leiste auf der rechten Seite für verwendeten Code.

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

Tab „Abdeckung“

Tab „Abdeckung“

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

Abdeckungsdaten im Bereich „Quellen“.

Abdeckungsdaten 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“

Tab Initiator

Chromium-Probleme: 963183, 842488

Die Einstellungen für die Einrückung werden wieder berücksichtigt.

Die Entwicklertools bieten schon lange eine Einstellung, mit der die Einrückungseinstellungen auf 2 Leerzeichen, 4 Leerzeichen, 8 Leerzeichen oder Tabulatoren angepasst werden können. In letzter Zeit war die Einstellung praktisch nutzlos, da sie in den Bedienelementen „Console“ und „Sources“ ignoriert wurde. Dieser Fehler ist jetzt behoben.

Gehen Sie zu Einstellungen > Einstellungen > Quellen > Standardeinzug, um die gewünschte Einstellung festzulegen.

Chromium-Problem #977394

Neue Tastenkombinationen für die Cursornavigation

Drücken Sie Strg+P in der Konsole oder im Bereich „Quellen“, um den Cursor in die Zeile darüber zu bewegen. Drücken Sie Strg+N, um den Cursor in die Zeile darunter zu bewegen.

Chromium-Problem #983874

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Ü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 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.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • 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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 101

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 gekündigt.

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