Neuerungen in den Entwicklertools (Chrome 83)

Kayce Basques

Sehschwäche emulieren

Öffne den Tab Rendering und verwende die neue Funktion Sehschwäche emulieren, um eine bessere eine Vorstellung davon, wie Menschen mit unterschiedlichen Sehbeeinträchtigungen Ihre Website erleben.

Verschwommenes Sehen emulieren.

Die Entwicklertools können verschwommenes Sehen und die folgenden Arten von Farbblindheit emulieren:

• Protanopie: die Unfähigkeit, rotes Licht wahrzunehmen.
• Deuteranopie: die Unfähigkeit, grünes Licht wahrzunehmen.
• Tritanopie: die Unfähigkeit, ein blaues Licht wahrzunehmen.
• Achromatopsie: die Unfähigkeit, eine Farbe mit Ausnahme von Grautönen (sehr selten) wahrzunehmen.

Es gibt auch weniger extreme Versionen dieser Farbblindheit, die in Wirklichkeit häufiger auftreten. Zum Beispiel ist die Protanomalie eine verringerte Empfindlichkeit gegenüber rotem Licht, im Gegensatz zur Protanopie, bei der ist die völlige Unfähigkeit, rotes Licht wahrzunehmen). Diese „-omaly“ Sehschwächen nicht so klar definiert: Jede Person mit einer solchen Sehschwäche ist anders und kann Dinge sehen, unterschiedlich (damit sie mehr/weniger der relevanten Farben wahrnehmen können).

Wenn Sie Ihre Web-Apps für extremere Simulationen in den Entwicklertools entwickeln, auch für Menschen mit Protanomalie, Deuteranomalie, Tritanomalie und Achromatomie geeignet.

Senden Sie Feedback an das Chromium-Problem 1003700 oder lesen Sie weitere Informationen zur Implementierung.

Sprachen emulieren

Du kannst jetzt Gebietsschemata emulieren, indem du unter Sensoren > Standort: Öffnen Sie den Befehl Menü und geben Sie Sensors ein, um auf den Tab Sensoren zuzugreifen. Nach Ausführung dieser Aktionen in den Entwicklertools ändert die aktuelle Standardsprache. Dies wirkt sich auf Folgendes aus:

• Intl.* APIs, z.B. new Intl.NumberFormat().resolvedOptions().locale
• anderen sprachbezogenen JavaScript APIs wie String.prototype.localeCompare und *.prototype.toLocaleString z.B. 123_456..toLocaleString()
• DOM-APIs wie navigator.language und navigator.languages
• Accept-Language-HTTP-Anfrageheader

Sehen Sie sich das länderspezifische Codebeispiel an, um es selbst auszuprobieren.

Senden Sie Feedback zum Chromium-Problem 1051822.

Fehlerbehebung für COEP-Richtlinien (Cross-Origin Embedder Policy)

Im Steuerfeld „Netzwerk“ finden Sie jetzt Informationen zur Fehlerbehebung für die Richtlinien für Cross-Origin-Embedder.

Die Spalte Status enthält jetzt eine kurze Erklärung, warum eine Anfrage blockiert wurde, sowie eine Link zum Anzeigen der Anfrage-Header zur weiteren Fehlerbehebung:

Im Abschnitt Response Headers des Tabs Headers finden Sie weitere Informationen zur Behebung des Fehlers Probleme:

Senden Sie Feedback zum Chromium-Problem 1051466.

Neue Symbole für Haltepunkte, bedingte Haltepunkte und Logpoints

Der Bereich Quellen enthält neue Symbole für Haltepunkte, bedingte Haltepunkte und Logpoints:

• Haltepunkte werden durch rote Kreise dargestellt.
• Bedingte Haltepunkte werden durch halbrote, halbweiße Kreise dargestellt.
• Logpoints werden durch rote Kreise mit Konsolensymbolen dargestellt.

Die Motivation für die neuen Symbole bestand darin, die Benutzeroberfläche besser mit anderen GUI-Debugging-Tools zu vereinheitlichen. die die Haltepunkte in der Regel rot einfärben, und um die Unterscheidung zwischen den drei Elementen zu erleichtern. auf einen Blick.

Senden Sie Feedback zum Chromium-Problem 1041830.

Netzwerkanfragen ansehen, die einen bestimmten Cookie-Pfad festlegen

Verwenden Sie das neue Filter-Keyword cookie-path im Bereich Netzwerk, um sich auf die Netzwerkanfragen zu konzentrieren. die einen bestimmten Cookie-Pfad festlegen.

Unter Anfragen nach Unterkünften filtern finden Sie weitere spezielle Keywords wie cookie-path.

Docken Sie sich nach links über das Befehlsmenü.

Öffne das Befehlsmenü und führe den Befehl Dock to left aus, um die Entwicklertools nach links Darstellungsbereich.

Senden Sie Feedback zum Chromium-Problem 1011679.

Die Option Settings im Hauptmenü wurde verschoben

Die Option zum Öffnen der Einstellungen im Hauptmenü befindet sich jetzt unter Weitere Tools.

Senden Sie Feedback zum Chromium-Problem 1050855.

Der Bereich Audits heißt jetzt Lighthouse.

Die Teams für Entwicklertools und Lighthouse erhielten häufig das Feedback von Webentwicklern, Lighthouse lässt sich über die Entwicklertools ausführen. konnte den "Leuchtturm" nicht finden Der Bereich Audits heißt jetzt Lighthouse.

Alle lokalen Überschreibungen in einem Ordner löschen

Nach der Einrichtung der lokalen Überschreibungen können Sie jetzt mit der rechten Maustaste auf einen Ordner klicken und die neue Option Löschen alle Überschreibungen, um alle lokalen Überschreibungen in diesem Ordner zu löschen.

Senden Sie Feedback zum Chromium-Problem 1016501.

Aktualisierte Benutzeroberfläche für lange Aufgaben

Eine lange Aufgabe ist JavaScript-Code, der den Hauptthread für lange Zeit monopolisiert. Dadurch wird eine zu fixieren.

Sie können seit einiger Zeit lange Aufgaben im Bereich „Leistung“ visualisieren, aber in In Chrome 83 wurde die Benutzeroberfläche zur Visualisierung langer Aufgaben im Bereich „Leistung“ aktualisiert. Die lange Aufgabe Teil einer Aufgabe ist jetzt mit einem rot gestreiften Hintergrund gefärbt.

Senden Sie Feedback zum Chromium-Problem 1054447.

Unterstützung maskierbarer Symbole im Manifestbereich

Android Oreo führte adaptive Symbole ein, die App-Symbole in einer Vielzahl von Formen verschiedenen Gerätemodellen. Maskierbare Symbole sind ein neues Symbolformat, das adaptive Symbole unterstützt. Damit können Sie dafür sorgen, dass Ihr PWA-Symbol auf Geräten, die das maskierbare Element unterstützen, gut aussieht. Standardsymbole.

Aktivieren Sie im Manifest das neue Kästchen Nur den minimalen sicheren Bereich für maskierbare Symbole anzeigen. können Sie überprüfen, ob Ihr maskierbares Symbol auf Android Oreo-Geräten gut aussieht. Unter Are my Sind aktuelle Symbole bereit?, um mehr zu erfahren.

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