Neuerungen in den Entwicklertools (Chrome 90)

Neue CSS-Flexbox-Debugging-Tools

Die Entwicklertools verfügen jetzt über spezielle CSS-Flexbox-Debugging-Tools.

CSS-Flexbox-Debugging-Tools

Wenn auf ein HTML-Element auf Ihrer Seite display: flex oder display: inline-flex angewendet wurde, wird im Steuerfeld „Elemente“ daneben das flex-Logo angezeigt. Klicken Sie auf das Logo, um die Darstellung eines flexiblen Overlays auf der Seite ein- und auszuschalten.

Im Bereich Styles können Sie auf das neue Symbol neben display: flex oder display: inline-flex klicken, um den Flexbox-Editor zu öffnen. Der Flexbox-Editor bietet eine schnelle Möglichkeit, die Flexbox-Eigenschaften zu bearbeiten. Probieren Sie es selbst aus!

Der Bereich Layout enthält außerdem den Abschnitt Flexbox, in dem alle Flexbox-Elemente auf der Seite angezeigt werden. Sie können das Overlay der einzelnen Elemente ein- und ausblenden.

Flexbox-Abschnitt im Bereich „Layout“

Chromium-Probleme: 1166710, 1175699

Neues Core Web Vitals-Overlay

Mit dem neuen Core Web Vitals-Overlay können Sie die Seitenleistung besser visualisieren und messen.

Core Web Vitals ist eine Initiative von Google mit dem Ziel, einheitliche Leitlinien für Qualitätssignale bereitzustellen, die für eine optimale Nutzererfahrung im Web unerlässlich sind.

Öffnen Sie das Befehlsmenü, führen Sie den Befehl Rendering anzeigen aus und aktivieren Sie dann das Kästchen Core Web Vitals.

Das Overlay zeigt derzeit Folgendes an:

  • Largest Contentful Paint (LCP): Misst die Ladeleistung. Für eine gute Nutzererfahrung sollte der LCP innerhalb von 2, 5 Sekunden nach dem ersten Laden der Seite auftreten.
  • First Input Delay (FID): Misst die Interaktivität. Für eine gute Nutzerfreundlichkeit sollten Seiten eine FID von weniger als 100 Millisekunden haben.
  • Cumulative Layout Shift (CLS): Misst die visuelle Stabilität. Für eine gute Nutzererfahrung sollten Seiten einen CLS von weniger als 0, 1 haben.

Core Web Vitals-Overlay

Chromium-Problem: 1152089

Aktualisierungen des Tabs „Probleme“

Die Problemanzahl wurde in die Statusleiste der Console verschoben

In der Statusleiste der Console wurde jetzt eine neue Schaltfläche für die Problemanzahl hinzugefügt, um die Sichtbarkeit von Problemwarnungen zu verbessern. Dadurch wird die Problemmeldung in der Console ersetzt.

Problemanzahl in der Statusleiste der Console

Chromium-Problem: 1140516

Probleme mit vertrauenswürdigen Webaktivitäten melden

Auf dem Tab „Probleme“ werden jetzt Probleme mit vertrauenswürdigen Webaktivitäten angezeigt. Damit möchten wir Entwicklern helfen, Probleme mit vertrauenswürdigen Webaktivitäten auf ihren Websites zu verstehen und zu beheben, und so die Qualität ihrer Anwendungen zu verbessern.

Öffnen Sie eine vertrauenswürdige Webaktivität. Öffnen Sie dann den Tab Probleme. Klicken Sie dazu in der Statusleiste der Console auf die Schaltfläche Problemanzahl. In diesem Vortrag von Andre erfährst du mehr über das Erstellen und Bereitstellen von Trusted Web Activity.

Probleme mit vertrauenswürdigen Webaktivitäten auf dem Tab „Probleme“

Chromium-Problem: 1147479

Strings in der Console als (gültige) JavaScript-Stringliterale formatieren

Jetzt formatiert die Console Strings in der Console als gültige JavaScript-Stringliterale. Bisher wurden doppelte Anführungszeichen in der Console beim Drucken von Strings nicht mit Escapezeichen versehen.

Strings als (gültige) JavaScript-Stringliterale formatieren

Chromium-Problem: 1178530

Neuer Bereich „Trust Tokens“ im Bereich „Anwendung“

DevTools zeigt jetzt alle verfügbaren Trust Tokens im aktuellen Browserkontext im neuen Bereich Trust Tokens im Bereich Application (Anwendung) an.

Trust Token ist eine neue API zur Bekämpfung von Betrug und zur Unterscheidung von Bots von echten Menschen ohne passives Tracking. Erste Schritte mit Trust Tokens

Neuer Bereich „Trust Tokens“

Chromium-Problem: 1126824

CSS-Medienfunktion „Color-Gamut“ emulieren

CSS-Medienfunktion „Color-Gamut“ emulieren

Mit der Medienabfrage color-gamut können Sie den ungefähren Farbbereich testen, der vom Browser und vom Ausgabegerät unterstützt wird. Wenn beispielsweise die Medienabfrage color-gamut: p3 übereinstimmt, bedeutet dies, dass das Gerät des Nutzers den Display-P3-Farbraum unterstützt.

Öffnen Sie das Befehlsmenü, führen Sie den Befehl Rendering anzeigen aus und wählen Sie das Drop-down-Menü CSS-Medienfunktion „color-gamut“ emulieren aus.

Chromium-Problem: 1073887

Verbesserte Tools für progressive Web-Apps

In den Entwicklertools wird jetzt in der Console eine detailliertere Warnmeldung zur Installierbarkeit von Progressive Web Apps (PWA) mit einem Link zur Dokumentation angezeigt.

Warnung zur Installierbarkeit von PWA

Im Bereich Manifest wird jetzt eine Warnmeldung angezeigt, wenn das Manifest description 324 Zeichen überschreitet.

Warnung zum Kürzen der PWA‐Beschreibung

Außerdem wird im Bereich Manifest jetzt eine Warnmeldung angezeigt, wenn der Screenshot der PWA die Anforderungen nicht erfüllt. Weitere Informationen zur Eigenschaft Screenshots der PWA und ihren Anforderungen finden Sie hier.

Warnung zum PWA-Screenshot

Chromium-Problem: 1146450, 1169689, 965802

Neue Spalte „Remote Address Space“ im Steuerfeld „Netzwerk“

Verwenden Sie die neue Spalte Remote Address Space im Bereich „Netzwerk“, um den Netzwerk-IP-Adressbereich jeder Netzwerkressource zu sehen.

Neue Spalte „Remote-Adressbereich“

Chromium-Problem: 1128885

Leistungsverbesserungen

Die Leistung beim Laden von Seiten bei geöffneten Entwicklertools wurde verbessert. In einigen extremen Fällen konnten wir die Leistung verzehnfachen.

Die Entwicklertools erfassen Stacktraces und hängen sie an Konsolennachrichten oder asynchrone Aufgaben an, damit sie bei Problemen später vom Entwickler genutzt werden können. Da diese Sammlung synchron in der Browser-Engine erfolgen muss, kann eine langsame Stacktrace-Sammlung die Seite erheblich verlangsamen, wenn die Entwicklertools geöffnet sind. Wir konnten den Aufwand für das Erfassen von Stacktraces deutlich reduzieren.

Wir werden die Implementierung in einem ausführlicheren Blogpost zum Engineering-Team auf dem Laufenden halten.

Chromium-Probleme: 1069425, 1077657

Zulässige und unzulässige Funktionen in der Frame-Detailansicht anzeigen

Die Frame-Detailansicht zeigt jetzt eine Liste der zulässigen und unzulässigen Browserfunktionen, die von der Berechtigungsrichtlinie gesteuert werden.

Die Berechtigungsrichtlinie ist eine Webplattform-API, die es einer Website ermöglicht, die Verwendung von Browserfunktionen in einem eigenen Frame oder in eingebetteten iFrames zuzulassen oder zu blockieren.

Zugelassene/nicht zulässige Funktionen gemäß der Berechtigungsrichtlinie

Chromium-Problem: 1158827

Neue Spalte „SameParty“ im Bereich „Cookies“

Im Bereich „Cookies“ im Anwendungsbereich wird jetzt das Attribut SameParty der Cookies angezeigt. Das Attribut SameParty ist ein neues boolesches Attribut, mit dem angegeben wird, ob ein Cookie in Anfragen für Ursprünge derselben First-Party-Sets enthalten sein soll.

SameParty-Spalte

Chromium-Problem: 1161427

Nicht standardmäßige Unterstützung für fn.displayName eingestellt

Die Unterstützung für den nicht standardmäßigen fn.displayName wurde eingestellt. Verwenden Sie stattdessen fn.name.

Beispiel für die Verwendung von displayName

Traditionell unterstützt Chrome die nicht standardmäßige Eigenschaft fn.displayName, damit Entwickler Debug-Namen für Funktionen festlegen können, die in error.stack und in Stacktraces der Entwicklertools angezeigt werden. Im obigen Beispiel hätte der Aufrufstack zuvor noLongerSupport angezeigt.

Ersetzen Sie fn.displayName durch die Standard-fn.name, die in ECMAScript 2015 konfigurierbar wurde (über Object.defineProperty), um die nicht standardmäßige fn.displayName-Eigenschaft zu ersetzen.

Die Unterstützung für fn.displayName war unzuverlässig und in allen Browser-Engines nicht einheitlich. Sie verlangsamt die Erfassung von Stacktraces. Dies sind Kosten, die Entwickler immer zahlen, unabhängig davon, ob sie fn.displayName verwenden oder nicht.

Verwendungsbeispiel für den Namen

Chromium-Problem: 1177685

Don't show Chrome Data Saver warning wird im Menü „Einstellungen“ eingestellt

Die Einstellung Don't show Chrome Data Saver warning wurde entfernt, da der Chrome-Datensparmodus eingestellt wurde.

Verworfene Einstellungen für „Chrome-Datensparmodus-Warnung nicht anzeigen“

Chromium-Problem: 1056922

Experimentelle Funktionen

Automatische Berichte zu Problemen mit geringem Kontrast auf dem Tab „Probleme“

Durch die Entwicklertools wurde eine experimentelle Unterstützung für die automatische Meldung von Kontrastproblemen auf dem Tab „Probleme“ hinzugefügt.

Text mit geringem Kontrast ist das häufigste automatisch erkannte Problem bei Bedienungshilfen im Web. Durch die Anzeige dieser Probleme auf dem Tab „Probleme“ können Entwickler diese Probleme leichter erkennen.

Öffne eine Seite mit Problemen mit wenig Kontrast, z.B. diese Demo. Öffnen Sie dann den Tab Probleme, indem Sie in der Statusleiste der Console auf die Schaltfläche Problemanzahl klicken, um die Probleme anzusehen.

Automatische Berichte zu Problemen mit geringem Kontrast

Chromium-Problem: 1155460

Vollständige Bedienungshilfen-Baumansicht im Elementbereich

Sie können jetzt zur neuen und verbesserten Baumansicht einer Seite mit umfassenden Bedienungshilfen wechseln.

Im aktuellen Bereich "Bedienungshilfen" werden die Knoten eingeschränkt angezeigt. Es wird nur die direkte Ancestor-Kette vom Stammknoten zum untersuchten Knoten angezeigt. Mit der neuen Struktur für Bedienungshilfen soll dies verbessert werden. Außerdem soll der Baum für Barrierefreiheit besser untersuchbar, nützlicher und nutzerfreundlicher werden.

Nachdem Sie den Test aktiviert haben, wird im Bereich Elemente eine neue Schaltfläche angezeigt. Klicken Sie, um zwischen dem vorhandenen DOM-Baum und der vollständigen Struktur für Bedienungshilfen zu wechseln.

Dieser Test befindet sich noch in der Anfangsphase. Wir planen, die Funktionalität im Laufe der Zeit zu verbessern und zu erweitern.

Vollständige Bedienungshilfen-Baumansicht

Chromium-Problem: 887173

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