Neuerungen in den Entwicklertools (Chrome 79)

Kayce Basques

Neue Funktionen für Cookies

Fehlerbehebung, wenn ein Cookie blockiert wurde

Wählen Sie nach dem Aufzeichnen der Netzwerkaktivität eine Netzwerkressource aus und gehen Sie zur aktualisierten Cookies, um zu erfahren, warum die Anfrage- oder Antwort-Cookies dieser Ressource blockiert wurden. Weitere Informationen finden Sie unter Änderungen am Standardverhalten ohne SameSite, um zu verstehen, warum möglicherweise mehr Probleme auftreten Cookies in Chrome 76 und höher blockiert.

Tab Cookies

• Anfrage-Cookies wurden nicht in Gelb gesendet. Diese sind standardmäßig ausgeblendet. Klicken Sie auf Anzeigen herausgefilterten Anfrage-Cookies, um sie anzuzeigen.
• Gelb Antwort-Cookies wurden über die Leitung gesendet, aber nicht gespeichert.
• Bewegen Sie den Mauszeiger auf Weitere Informationen. , um zu erfahren, warum ein Cookie wurde blockiert.
• Die meisten Daten in den Tabellen Anfrage-Cookies und Antwort-Cookies stammen aus dem HTTP-Header der Ressource. Die Daten zu Domain, Pfad und Ablauf/Max-Alter stammen aus der Protokoll für 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

Chromium-Problem #462370

Verschiedene bevorzugte Farbschemata und bevorzugte Bewegungsmuster simulieren

Mit der Medienabfrage prefers-color-scheme können Sie den Stil Ihrer Website an den Stil des Nutzers anpassen. Einstellungen. Wenn beispielsweise die Medienabfrage prefers-color-scheme: dark „true“ ist, bedeutet das, dass Ihr Betriebssystem hat den dunklen Modus aktiviert und bevorzugt den dunklen Modus.

Öffnen Sie das Befehlsmenü, führen Sie den Befehl Show Rendering (Rendering anzeigen) aus und legen Sie dann unter „Emulate CSS media“ (CSS-Medien emulieren) fest. Funktion „prefers-color-scheme“ zur Fehlerbehebung in prefers-color-scheme: dark und prefers-color-scheme: light-Stile.

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

Sie können prefers-reduced-motion: reduce auch mit der CSS-Medienfunktion „Emulate“ (CSS-Medien emulieren) simulieren. Drop-down-Menü „prefers-reduced-motion“ neben „CSS-Medienfunktion „prefers-color-scheme“ emulieren“ aus.

Chromium-Problem #1004246

Zeitzonenemulation

Auf dem Tab „Sensoren“ können Sie jetzt nicht nur die Standortbestimmung überschreiben, sondern auch beliebige Adressen emulieren Zeitzonen zu ermitteln und die Auswirkungen auf Ihre Web-Apps zu testen. Es ist vielleicht überraschend, dass diese neue Funktion Zuverlässigkeit der Emulation zur Standortbestimmung: Früher konnten Web-Apps Standort-Spoofing durch Der Standort wird mit der lokalen Zeitzone des Nutzers abgeglichen. Da die Emulation von Standortbestimmung und Zeitzone 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 nachweislich besser für Menschen mit Farbblindheit barrierefrei zugänglich sind. Die rote Leiste links steht für ungenutzten Code und der bläuliche Balken auf der rechten Seite steht für verwendeten Code.

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

Tab „Abdeckung“

Im Bereich „Quellen“ werden Daten zur Codeabdeckung angezeigt, sofern verfügbar. Klicken auf die roten oder bläulichen Flecken neben der Zeilennummer öffnet sich der Tab "Abdeckung" und hebt die Datei hervor.

Abdeckungsdaten im Bereich „Quellen“. Zeile 8 ist ein Beispiel für nicht verwendeten Code. Zeile 11 ist ein Beispiel für verwendeter 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 gehen Sie zum Initiator. um zu verstehen, warum die Ressource angefordert wurde. Im Abschnitt Anfragestack wird beschrieben, JavaScript-Aufrufstack, der zur Netzwerkanfrage führt

Tab Initiator

Chromium-Probleme: 963183, 842488

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

Lange Zeit war in den Entwicklertools eine Einstellung verfügbar, mit der die Einrückungseinstellungen auf 2 Leerzeichen, 4 Leerzeichen, acht Leerzeichen oder Tabulatoren. In letzter Zeit war die Einstellung praktisch nutzlos, da die Konsole und In den Quellenbereichen wurde die Einstellung ignoriert. Dieser Fehler ist jetzt behoben.

Gehen Sie zu Einstellungen > Einstellungen > Quellen > Standardeinzug zum Festlegen des Einstellung.

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 verschieben.

Chromium-Problem #983874

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