Neuerungen in den Entwicklertools (Chrome 83)

Sehschwächen emulieren

Öffnen Sie den Tab Rendering und verwenden Sie die neue Funktion Sehschwächen emulieren, um sich ein besseres Bild davon zu machen, wie Menschen mit unterschiedlichen Sehschwächen Ihre Website erleben.

Verschwommenes Sehen emulieren.

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, jedes grüne Licht wahrzunehmen.
  • Tritanopie: die Unfähigkeit, blaues Licht wahrzunehmen.
  • Achromatopsie: die Unfähigkeit, jede Farbe mit Ausnahme von Grautönen wahrzunehmen (sehr selten).

Es gibt weniger extreme Versionen dieser Farbsinnstörungen, die sogar noch häufiger auftreten. Protanomalie ist beispielsweise eine reduzierte Empfindlichkeit gegenüber rotem Licht (im Gegensatz zu Protanopie, bei der es sich um die vollständige Unfähigkeit, rotes Licht wahrzunehmen, ist). Diese „-Omaly“-Sehschwächen sind jedoch nicht so klar definiert: Jede Person mit einer solchen Sehschwäche ist anders und sieht möglicherweise anders (wenn sie die relevanten Farben mehr/weniger wahrnehmen kann).

Durch die Anwendung für extreme Simulationen in den Entwicklertools sind Ihre Webanwendungen garantiert auch für Personen mit Protanomalie, Deuteranomalie, Tritanomalie und Achonomalie zugänglich.

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

Sprachen emulieren

Du kannst jetzt Sprachen emulieren, indem du unter Sensoren > Standort einen Standort festlegst. Öffnen Sie das Befehlsmenü und geben Sie Sensors ein, um auf den Tab Sensoren zuzugreifen. Nachdem diese Aktionen ausgeführt wurden, ändern die Entwicklertools die aktuelle Standardsprache. Dies wirkt sich auf Folgendes aus:

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

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

Senden Sie Feedback an Chromium-Problem 1051822.

COEP-Fehlerbehebung (Cross-Origin Embedder Policy)

Im Steuerfeld „Netzwerk“ finden Sie jetzt Informationen zur Fehlerbehebung für die 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 ansehen können:

Blockierte Anfragen in der Spalte „Status“

Im Abschnitt Response Headers auf dem Tab Headers finden Sie weitere Informationen zur Behebung der Probleme:

Weitere Anleitungen im Abschnitt „Antwortheader“

Senden Sie Feedback an Chromium-Problem 1051466.

Neue Symbole für Haltepunkte, bedingte Haltepunkte und Logpoints

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

Der Grund für die neuen Symbole bestand darin, die Benutzeroberfläche einheitlicher mit anderen GUI-Debugging-Tools (in der Regel als Haltepunkte rot) zu gestalten und die Unterscheidung der drei Funktionen auf einen Blick zu erleichtern.

Senden Sie Feedback an 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.

Sehen Sie sich an, wie Sie Anfragen nach Unterkünften filtern, um weitere spezielle Keywords wie cookie-path zu finden.

Über das Befehlsmenü nach links andocken

Öffnen Sie das Befehlsmenü und führen Sie den Befehl Dock to left aus, um die Entwicklertools links neben dem Darstellungsbereich zu verschieben.

Entwicklertools links neben dem Darstellungsbereich verankert

Senden Sie Feedback an Chromium-Problem 1011679.

Die Option Settings im Hauptmenü wurde verschoben

Die Option zum Öffnen der Einstellungen im Hauptmenü findest du jetzt unter Weitere Tools.

Beim Öffnen des Hauptmenüs ist „Weitere Tools“ auf „Einstellungen“ zu sehen

Senden Sie uns Feedback zu Chromium-Problem 1050855.

Der Bereich Audits ist jetzt der Bereich Lighthouse.

Die Teams für Entwicklertools und Lighthouse erhielten häufig Feedback von Webentwicklern, dass sie hören würden, dass es möglich wäre, Lighthouse über die Entwicklertools auszuführen. Beim Testen konnten sie aber den Bereich „Lighthouse“ nicht finden, sodass der Bereich Audits jetzt der Bereich Lighthouse ist.

Lighthouse-Bereich

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 an Chromium-Problem 1016501.

Aktualisierte Benutzeroberfläche für lange Aufgaben

Eine lange Aufgabe besteht aus JavaScript-Code, der den Hauptthread über einen längeren Zeitraum ausschließlich auf das Monopol setzt. Dadurch friert eine Webseite ein.

Sie können seit einiger Zeit lange Aufgaben im Bereich „Leistung“ visualisieren, aber in Chrome 83 wurde die Benutzeroberfläche zur Visualisierung langer Aufgaben im Bereich „Leistung“ aktualisiert. Der Bereich „Lange Aufgabe“ einer Aufgabe wird jetzt mit einem rot gestreiften Hintergrund dargestellt.

Die neue UI für lange Aufgaben

Senden Sie Feedback an Chromium-Problem 1054447.

Unterstützung maskierbarer Symbole im Manifestbereich

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

Aktivieren Sie im Bereich Manifest das neue Kästchen Nur den minimalen sicheren Bereich für maskierbare Symbole 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 Kontrollkästchen „Nur den minimalen sicheren Bereich für maskierbare Symbole anzeigen“

Vorschaukanäle herunterladen

Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome Erste Schritte

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde abgebrochen.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59