Neuerungen in den Entwicklertools (Chrome 90)

Jecelyn Yeen

Neue CSS-Flexbox-Debugging-Tools

In den Entwicklertools gibt es jetzt 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 Logo flex angezeigt. Klicken Sie auf das Badge, um die Anzeige eines Flex-Overlays auf der Seite umzuschalten.

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

Darüber hinaus enthält der Bereich Layout einen Flexbox-Abschnitt, in dem alle Flexbox-Elemente auf der Seite angezeigt werden können. Du kannst das Overlay jedes Elements ein-/ausblenden.

Flexbox-Abschnitt im Layout-Bereich

Chromium-Probleme: 1166710, 1175699

Neues Core Web Vitals-Overlay

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

Core Web Vitals ist eine Initiative von Google mit einheitlichen Leitlinien für die Qualität von Signalen, die für eine positive Nutzererfahrung im Web entscheidend sind.

Öffnen Sie das Befehlsmenü, führen Sie den Befehl Rendering einblenden aus und klicken Sie das Kästchen Core Web Vitals an.

Das Overlay wird derzeit angezeigt:

  • Largest Contentful Paint (LCP): Damit wird die Ladeleistung gemessen. Im Sinne einer guten Nutzerfreundlichkeit sollte der LCP innerhalb von 2, 5 Sekunden nach dem ersten Laden der Seite ausgeführt werden.
  • First Input Delay (FID): Damit wird die Interaktivität gemessen. Für eine gute Nutzerfreundlichkeit sollten Seiten eine FID von weniger als 100 Millisekunden haben.
  • Cumulative Layout Shift (CLS): misst die visuelle Stabilität. Im Sinne einer guten Nutzerfreundlichkeit sollten Seiten einen CLS-Wert von unter 0, 1 haben.

Core Web Vitals-Overlay

Chromium-Problem: 1152089

Aktualisierung des Tabs „Probleme“

Die Anzahl der Probleme wurde in die Statusleiste der Console verschoben

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

Anzahl der Probleme 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. Entwickler sollen so die Probleme mit vertrauenswürdigen Webaktivitäten auf ihren Websites besser verstehen und beheben und so die Qualität ihrer Anwendungen verbessern.

Öffnen Sie eine vertrauenswürdige Webaktivität. Öffnen Sie dann die Tabs Issues (Probleme), indem Sie in der Statusleiste der Console auf die Schaltfläche Issues count (Anzahl der Probleme) klicken. In diesem Vortrag von Andre erfahren Sie mehr über das Erstellen und Bereitstellen von Trusted Web-Aktivitäten.

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

Chromium-Problem: 1147479

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

Die Console formatiert Strings jetzt als gültige JavaScript-Stringliterale in der Console. Bisher wurden doppelte Anführungszeichen von der Console beim Drucken von Strings nicht maskiert.

Strings als (gültige) JavaScript-Stringliterale formatieren

Chromium-Problem: 1178530

Neuer Bereich „Trust Tokens“ im Anwendungsbereich

Die Entwicklertools zeigen jetzt alle verfügbaren Trust Tokens im aktuellen Browserkontext im Bereich Trust Tokens (Trust Tokens) unter dem Bereich Application (Anwendung) an.

Trust Token ist eine neue API zur Bekämpfung von Betrug und zur Unterscheidung zwischen Bots und echten Menschen, ohne dass passives Tracking erforderlich ist. Weitere Informationen zu den ersten Schritten mit Trust Tokens

Neuer Bereich „Trust Tokens“

Chromium-Problem: 1126824

CSS-Funktion „Color-Gamut-Medien“ emulieren

CSS-Funktion „Color-Gamut-Medien“ emulieren

Mit der Medienabfrage color-gamut kannst du 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 Farbraum Display-P3 unterstützt.

Öffnen Sie das Befehlsmenü, führen Sie den Befehl Rendering einblenden aus und legen Sie das Drop-down-Menü CSS media feature color-gamut emulieren fest.

Chromium-Problem: 1073887

Verbesserte Tools für progressive Web-Apps

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

Warnung zur Installierbarkeit von PWAs

Im Bereich Manifest wird jetzt eine Warnmeldung angezeigt, wenn die Manifest-description länger als 324 Zeichen ist.

Warnung zur Kürzung der PWA-Beschreibung

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

Warnung zu PWA-Screenshot

Chromium-Probleme: 1146450, 1169689, 965802

Neue Spalte Remote Address Space im Bereich „Netzwerk“

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

Neue Spalte „Remote-Adressraum“

Chromium-Problem: 1128885

Leistungsverbesserungen

Die Leistung beim Laden von Seiten mit geöffneten Entwicklertools wurde verbessert. In einigen extremen Fällen konnten wir eine zehnfache Leistungssteigerung verzeichnen.

Die Entwicklertools erfassen Stacktraces und hängen sie an Konsolennachrichten oder asynchrone Aufgaben an, damit sie im Falle eines Problems später vom Entwickler verwendet werden können. Da diese Erfassung synchron in der Browser-Engine erfolgen muss, kann eine langsame Stacktrace-Erfassung die Seite bei geöffneten Entwicklertools erheblich verlangsamen. Wir konnten den Aufwand für die Erfassung von Stacktraces erheblich reduzieren.

Weitere Informationen zur Implementierung findet ihr in einem ausführlicheren Blog-Post.

Chromium-Probleme: 1069425, 1077657

Zulässige/nicht zulässige Funktionen in der Frame-Detailansicht anzeigen

In der Detailansicht des Frames wird jetzt eine Liste der zulässigen und unzulässigen Browserfunktionen angezeigt, die über die Berechtigungsrichtlinie kontrolliert werden.

Die Berechtigungsrichtlinie ist eine Webplattform-API, mit der eine Website die Verwendung von Browserfunktionen in ihrem eigenen Frame oder in eingebetteten iFrames zulassen oder blockieren kann.

Zulässige/nicht zulässige Funktionen gemäß 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, das angibt, ob ein Cookie in Anfragen an Ursprünge derselben First-Party-Sets aufgenommen werden soll.

SameParty-Spalte

Chromium-Problem: 1161427

Eingestellter nicht standardmäßiger fn.displayName-Support

Die nicht standardmäßige fn.displayName wird nicht mehr unterstützt. Verwenden Sie stattdessen fn.name.

Beispiel für die Verwendung von displayName

Chrome hat bisher die nicht standardmäßige fn.displayName-Property unterstützt, damit Entwickler die Fehlerbehebungsnamen für Funktionen steuern können, die in error.stack und in den Stacktraces der Entwicklertools angezeigt werden. Im obigen Beispiel wurde im Aufrufstack zuvor noLongerSupport angezeigt.

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

Die Unterstützung für fn.displayName ist in den verschiedenen Browser-Engines unzuverlässig und nicht konsistent. Dies verlangsamt die Erfassung von Stacktraces. Diese Kosten, die Entwickler immer zahlen, unabhängig davon, ob sie fn.displayName tatsächlich verwenden oder nicht.

Beispiel für die Verwendung des Namens

Chromium-Problem: 1177685

Einstellung von Don't show Chrome Data Saver warning im Menü „Einstellungen“

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

Einstellung „Keine Warnung im Chrome-Datensparmodus anzeigen“ eingestellt

Chromium-Problem: 1056922

Experimentelle Funktionen

Automatische Meldung von Problemen mit niedrigem Kontrast auf dem Tab „Probleme“

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

Text mit geringem Kontrast ist das häufigste Problem bei der Barrierefreiheit im Internet, das automatisch erkannt werden kann. Wenn diese Probleme auf dem Tab „Probleme“ angezeigt werden, können Entwickler sie leichter erkennen.

Öffnen Sie eine Seite mit Problemen mit geringem Kontrast (z.B. diese Demo). Öffnen Sie dann die Tabs Issues (Probleme), indem Sie in der Statusleiste der Console auf die Schaltfläche Issues count (Anzahl der Probleme) klicken.

Automatische Meldung von Problemen mit niedrigem Kontrast

Chromium-Problem: 1155460

Baumansicht im Bereich „Elemente“ mit vollständiger Barrierefreiheit

Sie können jetzt umschalten, um die neue und verbesserte Baumansicht einer Seite mit vollständiger Barrierefreiheit aufzurufen.

Im aktuellen Bereich „Bedienungshilfen“ werden die Knoten in begrenztem Umfang angezeigt und es wird nur die direkte Ancestor-Kette vom Stammknoten zum geprüften Knoten angezeigt. Mit der neuen Baumansicht für Barrierefreiheit lässt sich dies optimieren. Außerdem wird der Baum für Barrierefreiheit erkundbarer, nützlicher und einfacher zu verwenden.

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

Bitte beachte, dass es sich um ein Experiment in der Anfangsphase handelt. Wir planen, die Funktionalität im Laufe der Zeit zu verbessern und zu erweitern.

Baumansicht mit uneingeschränktem Zugriff

Chromium-Problem: 887173

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools, kannst hochmoderne Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine 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.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • 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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 101

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 gekündigt.

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