Neuerungen in den Entwicklertools (Chrome 79)

Kayce Basques

Neue Funktionen für Cookies

Gründe für die Blockierung eines Cookies ermitteln

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 blockierte Cookies angezeigt werden.

Auf dem Tab „Cookies“

Den Tab Cookies

  • Gelbe Anfrage-Cookies wurden nicht über die Verbindung gesendet. Sie sind standardmäßig ausgeblendet. Klicken Sie auf Herausgefilterte Anfrage-Cookies anzeigen, um sie zu sehen.
  • Gelbe Antwort-Cookies wurden über die Verbindung 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, Path und Expires/Max-Age stammen aus dem Chrome DevTools-Protokoll.

Chromium-Probleme #856777, #993843

Cookie-Werte ansehen

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

Wert eines Cookies ansehen

Wert eines Cookies ansehen

Chromium-Problem #462370

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

Mit der Mediaabfrage prefers-color-scheme können Sie den Stil Ihrer Website an die Einstellungen der Nutzer anpassen. Wenn die prefers-color-scheme: dark-Medienabfrage beispielsweise „wahr“ ist, 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, um Ihre prefers-color-scheme: dark- und prefers-color-scheme: light-Stile zu debuggen.

bevorzugt-Farbschema: dunkel

Wenn prefers-color-scheme: dark festgelegt ist (mittlerer Bereich), wird im Bereich „Styles“ (rechter Bereich) das CSS angezeigt, das angewendet wird, wenn diese Medienabfrage wahr ist. Im Viewport werden die Stile für den dunklen Modus angezeigt (linker Bereich).

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

Zeitzonenemulation

Auf dem Tab „Sensoren“ können Sie jetzt nicht nur die Standortbestimmung überschreiben, sondern auch beliebige Zeitzonen emulieren und die Auswirkungen auf Ihre Webanwendungen testen. Diese neue Funktion verbessert auch die Zuverlässigkeit der Geolokalisierungs-Emulation. Bisher konnten Web-Apps Standort-Spoofing erkennen, indem der Standort mit der lokalen Zeitzone des Nutzers abgeglichen wurde. Da Geolokalisierung und Zeitzonenemulation jetzt gekoppelt sind, wird diese Kategorie von Abweichungen eliminiert.

Aktualisierungen der Codeabdeckung

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

Auf dem Tab „Abdeckung“ werden jetzt neue Farben für verwendeten und nicht verwendeten Code verwendet. Diese Farbkombination ist nachweislich für Menschen mit Farbsinnstörungen besser zugänglich. Der rote Balken auf der linken Seite steht für ungenutzten Code und der bläuliche Balken auf der rechten Seite für verwendeten Code.

Im neuen Textfeld Filter nach Abdeckungstyp können Sie nach Abdeckungsinformationen nach Typ filtern: nur JavaScript-Abdeckung, nur CSS oder alle Abdeckungstypen.

Tab „Abdeckung“

Tab „Abdeckung“

Im Bereich „Quellen“ werden Codeabdeckungsdaten angezeigt, sofern verfügbar. 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 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

Debuggen, warum eine Netzwerkressource angefordert wurde

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

Tab „Initiator“.

Den Tab Initiator

Chromium-Probleme 963183, 842488

In den Bereichen „Konsole“ und „Quellen“ werden die Einstellungen für Einzüge wieder berücksichtigt

In den DevTools gab es schon lange eine Einstellung, mit der Sie die Einzugoption auf 2 Zeichen, 4 Zeichen, 8 Zeichen oder Tabulatorzeichen festlegen konnten. In letzter Zeit war die Einstellung praktisch nutzlos, da sie in den Bereichen „Konsole“ und „Quellen“ ignoriert wurde. Dieser Fehler wurde behoben.

Rufen Sie Einstellungen > Einstellungen > Quellen > Standardeinzug auf, um Ihre Einstellung festzulegen.

Chromium-Problem #977394

Neue Tastenkürzel für die Cursornavigation

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

Chromium-Problem #983874

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

Neu in den DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.