Neuerungen in den Entwicklertools (Chrome 83)

Kayce Basques

Sehschwächen emulieren

Öffnen Sie den Tab Rendering und verwenden Sie die neue Funktion Sehbehinderungen simulieren, um sich ein besseres Bild davon zu machen, wie Menschen mit verschiedenen Arten von Sehbehinderungen Ihre Website wahrnehmen.

Verschwommenes Sehen emulieren

Verschwommenes Sehen emulieren

In DevTools können verschwommene Sicht und die folgenden Arten von Farbfehlsichtigkeiten simuliert werden:

  • Protanopie: Unfähigkeit, rotes Licht wahrzunehmen.
  • Deuteranopie: Unfähigkeit, grünes Licht wahrzunehmen.
  • Tritanopie: Unfähigkeit, blaues Licht wahrzunehmen.
  • Achromatopsie: Unfähigkeit, Farben außer Grautönen wahrzunehmen (sehr selten).

Es gibt weniger extreme Formen dieser Farbfehlsichtigkeit, die sogar häufiger auftreten. Eine Protanomalie ist beispielsweise eine verringerte Empfindlichkeit gegenüber rotem Licht (im Gegensatz zur Rot-Sehschwäche, bei der rotes Licht nicht wahrgenommen werden kann). Diese Sehbeeinträchtigungen sind jedoch nicht so klar definiert: Jede Person mit einer solchen Sehbeeinträchtigung ist anders und kann Dinge möglicherweise anders sehen (mehr/weniger der relevanten Farben wahrnehmen).

Wenn Sie Ihre Web-Apps für die extremeren Simulationen in DevTools entwerfen, sind sie auch für Menschen mit Protanomalie, Deuteranomalie, Tritanomalie und Achromatopsie barrierefrei.

Senden Sie Feedback zu Chromium-Problem 1003700 oder erfahren Sie mehr über die Implementierung.

Sprachen emulieren

Sie können jetzt Standorte emulieren, indem Sie unter Sensoren > Standort einen Standort festlegen. Öffnen Sie das Befehlsmenü und geben Sie Sensors ein, um den Tab Sensoren aufzurufen. Nachdem Sie diese Aktionen ausgeführt haben, ändert DevTools die aktuelle Standard-Region und wirkt sich so auf Folgendes aus:

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

Im Beispiel für länderabhängigen Code können Sie es selbst ausprobieren.

Senden Sie Feedback zu Chromium-Problem 1051822.

Debugging der Cross-Origin-Embedder-Richtlinie (COEP)

Im Bereich „Netzwerk“ finden Sie jetzt Informationen zur Fehlerbehebung bei der Cross-Origin-Embedder-Richtlinie.

In der Spalte Status wird jetzt kurz erklärt, warum eine Anfrage blockiert wurde. Außerdem finden Sie dort einen Link, über den Sie die Header dieser Anfrage für weitere Fehlerbehebung aufrufen können:

Blockierte Anfragen in der Spalte „Status“

Im Abschnitt Antwortheader des Tabs Header finden Sie weitere Informationen zur Behebung der Probleme:

Weitere Informationen finden Sie im Abschnitt zu Antwortheadern.

Senden Sie Feedback zu Chromium-Problem 1051466.

Neue Symbole für Haltepunkte, bedingte Haltepunkte und Logpunkte

Im Bereich Quellen gibt es neue Symbole für Haltepunkte, bedingte Haltepunkte und Logpunkte:

Die neuen Symbole sollen die Benutzeroberfläche einheitlicher mit anderen GUI-Debugging-Tools machen (bei denen Haltestellen in der Regel rot dargestellt werden) und es einfacher machen, die drei Funktionen auf einen Blick zu unterscheiden.

Senden Sie Feedback zu Chromium-Problem 1041830.

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

Weitere spezielle Keywords wie cookie-path finden Sie unter Anfragen nach Properties filtern.

Über das Menü „Befehle“ die Option Links andocken auswählen

Öffnen Sie das Befehlsmenü und führen Sie den Befehl Dock to left aus, um die DevTools links vom Viewport zu platzieren.

Entwicklertools links neben dem Darstellungsbereich angedockt

Senden Sie Feedback zu Chromium-Problem 1011679.

Die Option Settings im Hauptmenü wurde verschoben

Die Option zum Öffnen der Einstellungen über das Hauptmenü finden Sie jetzt unter Weitere Tools.

Das Hauptmenü ist geöffnet und „Weitere Tools“ ist auf „Einstellungen“ fokussiert.

Senden Sie Feedback zu Chromium-Problem 1050855.

Das Steuerfeld Audits heißt jetzt Lighthouse.

Die DevTools- und Lighthouse-Teams erhielten häufig Feedback von Webentwicklern, dass sie gehört hatten, dass Lighthouse über DevTools ausgeführt werden kann, aber beim Ausprobieren das Steuerfeld „Lighthouse“ nicht finden konnten. Daher heißt das Steuerfeld Audits jetzt Lighthouse.

Der Bereich „Leuchtturm“

Alle lokalen Überschreibungen in einem Ordner löschen

Nachdem Sie lokale Überschreibungen eingerichtet haben, können Sie jetzt mit der rechten Maustaste auf einen Ordner klicken und die neue Option Alle Überschreibungen löschen auswählen, um alle lokalen Überschreibungen in diesem Ordner zu löschen.

Alle Überschreibungen löschen

Senden Sie Feedback zu Chromium-Problem 1016501.

Aktualisierte Benutzeroberfläche für lange Aufgaben

Eine lange Aufgabe ist JavaScript-Code, der den Haupt-Thread für lange Zeit monopolisiert und dazu führt, dass eine Webseite einfriert.

Sie können schon seit einiger Zeit Lange Aufgaben im Bereich „Leistung“ visualisieren. In Chrome 83 wurde die Benutzeroberfläche für die Visualisierung langer Aufgaben im Bereich „Leistung“ aktualisiert. Der Bereich „Lange Aufgabe“ einer Aufgabe hat jetzt einen gestreiften roten Hintergrund.

Die neue Benutzeroberfläche für lange Aufgaben

Senden Sie Feedback zu Chromium-Problem 1054447.

Unterstützung für maskierbare Symbole im Manifest-Bereich

Mit Android Oreo wurden adaptive Symbole eingeführt. Damit werden App-Symbole in verschiedenen Formen auf unterschiedlichen Gerätemodellen angezeigt. Maskierbare Symbole sind ein neues Symbolformat, das adaptive Symbole unterstützt. So können Sie dafür sorgen, dass das Symbol Ihrer PWA auf Geräten, die den Standard für maskierbare Symbole unterstützen, gut aussieht.

Aktivieren Sie im Bereich Manifest das neue Kästchen Bei maskierbaren Symbolen nur den minimalen sicheren Bereich anzeigen, um zu prüfen, ob Ihr maskierbares Symbol auf Android Oreo-Geräten gut aussieht. Weitere Informationen finden Sie unter Sind meine aktuellen Symbole bereit?

Das Kästchen „Bei maskierbaren Symbolen nur den minimalen sicheren Bereich anzeigen“

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.