Neuerungen in den Entwicklertools (Chrome 83)

Sehschwächen emulieren

Öffnen Sie den Tab „Rendering“ und verwenden Sie die neue Funktion Sehbeeinträchtigungen emulieren, um sich ein besseres Bild davon zu machen, wie Nutzer mit verschiedenen Arten von Sehbeeinträchtigungen Ihre Website wahrnehmen.

Verschwommenes Sehen emulieren

Mit DevTools können Sie verschwommenes Sehen und die folgenden Arten von Farbblindheit simulieren:

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

Es gibt auch weniger extreme Versionen dieser Farbsehschwächen, die sogar häufiger vorkommen. Bei der Protanomalie ist die Empfindlichkeit für rotes Licht beispielsweise verringert (im Gegensatz zur Protanopie, bei der rotes Licht überhaupt nicht wahrgenommen werden kann). Diese „-omalie“-Sehschwächen sind jedoch nicht so klar definiert: Jede Person mit einer solchen Sehschwäche ist anders und sieht die Dinge möglicherweise anders (sie kann mehr oder weniger der relevanten Farben wahrnehmen).

Wenn Sie Ihre Web-Apps für die extremsten Simulationen in den DevTools optimieren, sind sie garantiert auch für Menschen mit Protanomalie, Deuteranomalie, Tritanomalie und Achromatomalie zugänglich.

Feedback zu Chromium-Problem 1003700 geben oder weitere Informationen zur Implementierung

Sprachen emulieren

Sie können jetzt Standorte emulieren, indem Sie unter Sensors > Location einen Standort festlegen. Öffne das Befehlsmenü und gib Sensors ein, um auf den Tab Sensoren zuzugreifen. Nachdem Sie diese Aktionen ausgeführt haben, ändert DevTools das aktuelle Standardschema. Das hat folgende Auswirkungen:

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

Im lokalabhängigen Codebeispiel können Sie es selbst ausprobieren.

Feedback zu Chromium-Problem 1051822 geben

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

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

In der Spalte Status finden Sie jetzt eine kurze Erklärung, warum eine Anfrage blockiert wurde, sowie einen Link, über den Sie die Header der Anfrage zur weiteren Fehlerbehebung aufrufen können:

Im Bereich Antwortheader auf dem Tab Header finden Sie weitere Informationen zur Behebung der Probleme:

Feedback zu Chromium-Problem 1051466 geben

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 halb rote, halb weiße Kreise dargestellt.
• Logpoints werden durch rote Kreise mit Konsolensymbolen dargestellt.

Die neuen Symbole sollen die Benutzeroberfläche an andere GUI-Debugging-Tools anpassen, in denen Breakpoints in der Regel rot dargestellt werden. Außerdem sollen sie es erleichtern, die drei Funktionen auf einen Blick zu unterscheiden.

Senden Sie Feedback zu Chromium-Problem 1041830.

Netzwerkanfragen ansehen, in denen ein bestimmter Cookie-Pfad festgelegt wird

Mit dem neuen Filterschlüsselwort cookie-path im Bereich Netzwerk können Sie sich auf die Netzwerkanfragen konzentrieren, mit denen ein bestimmter Cookie-Pfad festgelegt wird.

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

Links andocken über das Befehlsmenü

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

Feedback zu Chromium-Problem 1011679 geben

Die Option Settings im Hauptmenü wurde verschoben

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

Senden Sie Feedback zu Chromium-Problem 1050855.

Das Prüfungen-Steuerfeld ist jetzt das Lighthouse-Steuerfeld.

Die Teams von DevTools und Lighthouse haben häufig Feedback von Webentwicklern erhalten, dass sie gehört haben, dass Lighthouse über DevTools ausgeführt werden kann. Als sie es dann ausprobierten, konnten sie das Lighthouse-Panel jedoch nicht finden. Daher ist das Audits-Panel jetzt das Lighthouse-Panel.

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.

Feedback zu Chromium-Problem 1016501 geben

Aktualisierte Benutzeroberfläche für lange Aufgaben

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

Sie können Long Tasks schon seit einiger Zeit im Bereich „Leistung“ visualisieren. In Chrome 83 wurde die Benutzeroberfläche für die Visualisierung von Long Tasks im Bereich „Leistung“ aktualisiert. Der Teil einer Aufgabe, der als „Long Task“ (Lang andauernde Aufgabe) eingestuft wird, ist jetzt rot gestreift.

Feedback zu Chromium-Problem 1054447 geben

Unterstützung von maskierbaren Symbolen im Manifestbereich

Mit Android Oreo wurden adaptive Symbole eingeführt, mit denen App-Symbole auf verschiedenen Gerätemodellen in unterschiedlichen Formen dargestellt werden können. Maskierbare Symbole sind ein neues Symbolformat, das adaptive Symbole unterstützt. Damit 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?.

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

• Sie können uns Feedback und Funktionsanfragen unter crbug.com senden.
• Melden Sie ein DevTools-Problem in den Entwicklertools über das more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Senden Sie einen Tweet an @ChromeDevTools.
• Hinterlassen Sie Kommentare in den YouTube-Videos zu den Neuerungen in den DevTools oder den YouTube-Videos mit DevTools-Tipps.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.