Neuerungen in den Entwicklertools (Chrome 90)

Jecelyn Yeen

Neue CSS-Flexbox-Debugging-Tools

Die DevTools bieten jetzt spezielle Tools zum Entfernen von Fehlern bei CSS-Flexboxen.

Tools zur Fehlerbehebung bei CSS-Flexboxen

Wenn auf ein HTML-Element auf Ihrer Seite display: flex oder display: inline-flex angewendet wird, wird im Bereich „Elemente“ neben dem Element das Symbol flex angezeigt. Klicken Sie auf das Symbol, um das Flex-Overlay auf der Seite ein- oder auszublenden.

Klicken Sie im Bereich Stile auf das neue Symbol neben display: flex oder display: inline-flex, um den Flexbox-Editor zu öffnen. Mit dem Flexbox-Editor können Sie die Flexbox-Eigenschaften schnell bearbeiten. Probieren Sie es selbst aus.

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

Bereich „Flexbox“ 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 der einheitliche Leitlinien für die Qualitätskriterien angeboten werden, die entscheidend für eine optimale Nutzererfahrung beim Surfen im Internet sind.

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

Im Overlay werden derzeit folgende Informationen angezeigt:

  • Largest Contentful Paint (LCP): Hiermit wird die Ladeleistung gemessen. Für eine gute Nutzerfreundlichkeit sollte der LCP innerhalb von 2, 5 Sekunden nach Beginn des Seitenaufbaus erreicht werden.
  • First Input Delay (FID): Hiermit wird die Interaktivität gemessen. Für eine gute Nutzerfreundlichkeit sollten Seiten einen FID von weniger als 100 Millisekunden haben.
  • Cumulative Layout Shift (CLS): Hiermit wird die visuelle Stabilität gemessen. Für eine gute Nutzerfreundlichkeit sollte der CLS der Seiten unter 0, 1 liegen.

Core Web Vitals-Overlay

Chromium-Problem: 1152089

Aktualisierungen des Tabs „Probleme“

Die Anzahl der Probleme wurde in die Statusleiste der Console verschoben.

In der Statusleiste der Console wurde eine neue Schaltfläche für die Anzahl der Probleme hinzugefügt, um Warnungen zu Problemen besser sichtbar zu machen. Dadurch wird die Problemmeldung in der Console ersetzt.

Fehleranzahl in der Statusleiste der Console

Chromium-Problem: 1140516

Probleme mit vertrauenswürdigen Webaktivitäten melden

Auf dem Tab Probleme werden jetzt Probleme mit Trusted Web Activity angezeigt. So sollen Entwickler die Probleme mit vertrauenswürdigen Webaktivitäten ihrer Websites besser verstehen und beheben können, um die Qualität ihrer Anwendungen zu verbessern.

Öffnen Sie eine vertrauenswürdige Web-Aktivität. Öffnen Sie dann die Tabs Probleme, indem Sie in der Statusleiste der Konsole auf die Schaltfläche Anzahl der Probleme klicken. In dieser Präsentation von Andre erfahren Sie mehr darüber, wie Sie vertrauenswürdige Webaktivitäten erstellen und bereitstellen.

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

Chromium-Problem: 1147479

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

Jetzt werden Strings in der Console als gültige JavaScript-Stringliterale formatiert. Bisher wurden doppelte Anführungszeichen in der Konsole beim Drucken von Strings nicht entkommentiert.

Strings als (gültige) JavaScript-Stringliterale formatieren

Chromium-Problem: 1178530

Neuer Bereich „Trust Tokens“ im Bereich „Anwendung“

In den DevTools werden jetzt alle verfügbaren Trust Tokens im aktuellen Browserkontext im neuen Bereich Trust Tokens im Bereich Anwendung angezeigt.

Trust Token ist eine neue API, die ohne passives Tracking dabei hilft, Betrug zu bekämpfen und Bots von echten Nutzern zu unterscheiden. Weitere Informationen zu 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 color-gamut: p3-Medienabfrage übereinstimmt, bedeutet das, 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 legen Sie dann das Drop-down-Menü CSS-Medienfunktion „color-gamut“ emulieren fest.

Chromium-Problem: 1073887

Verbesserte Tools für progressive Web-Apps

In den DevTools wird in der Konsole jetzt eine ausführlichere Warnung zur Installation von Progressive Web-Apps (PWAs) mit einem Link zur Dokumentation angezeigt.

Warnung zur Installierbarkeit von PWAs

Im Bereich Manifest wird jetzt eine Warnmeldung angezeigt, wenn die Beschreibung des Manifests 324 Zeichen überschreitet.

Warnung, dass die Beschreibung der PWA abgeschnitten wird

Außerdem wird im Bereich Manifest jetzt eine Warnmeldung angezeigt, wenn der Screenshot der PWA nicht den Anforderungen entspricht. Weitere Informationen zur Property Screenshots für PWAs und ihren Anforderungen finden Sie hier.

Warnung zu PWAs im Screenshot

Chromium-Problem: 1146450, 1169689, 965802

Neue Spalte Remote Address Space im Bereich „Netzwerk“

In der neuen Spalte Remote Address Space im Bereich „Netzwerk“ sehen Sie den IP-Adressbereich des jeweiligen Netzwerks.

Neue Spalte „Remote Address Space“

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 erzielen.

In den DevTools werden Stack-Traces erfasst und an Konsolennachrichten oder asynchrone Aufgaben angehängt, damit sie im Falle eines Problems vom Entwickler später verwendet werden können. Da diese Erfassung synchron in der Browser-Engine erfolgen muss, kann eine langsame Stack-Trace-Erfassung die Seite mit geöffneten Entwicklertools erheblich verlangsamen. Wir konnten den Overhead der Stack-Trace-Erfassung deutlich reduzieren.

In einem ausführlicheren Blogpost zu diesem Thema werden wir die Implementierung näher erläutern.

Chromium-Probleme: 1069425, 1077657

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

In der Detailansicht des Frames wird jetzt eine Liste der zulässigen und nicht zulässigen Browserfunktionen angezeigt, die durch die Berechtigungsrichtlinie gesteuert 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 Bereich „Anwendung“ wird jetzt das SameParty-Attribut der Cookies angezeigt. Das Attribut SameParty ist ein neues boolesches Attribut, mit dem angegeben wird, ob ein Cookie in Anfragen an Ursprünge derselben selbst erhobenen Datensätze eingeschlossen werden soll.

Spalte „SameParty“

Chromium-Problem: 1161427

Einstellung der Unterstützung nicht standardmäßiger fn.displayName-Formate

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

Beispiel für die Verwendung von „displayName“

Chrome unterstützt traditionell die nicht standardmäßige Property fn.displayName, mit der Entwickler Debugnamen für Funktionen steuern können, die in error.stack und in DevTools-Stack-Traces angezeigt werden. Im obigen Beispiel würde im Aufrufstack zuvor noLongerSupport angezeigt.

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

Die Unterstützung für fn.displayName ist nicht zuverlässig und nicht einheitlich für alle Browser-Engines. Das verlangsamt die Erfassung des Stack-Traces, was Entwicklern immer Kosten verursacht, 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, da der Chrome-Datensparmodus eingestellt wurde.

Einstellung „Chrome-Datensparmodus-Warnung nicht anzeigen“ eingestellt

Chromium-Problem: 1056922

Experimentelle Funktionen

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

In den DevTools wurde die 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 erkennbare Problem mit der Barrierefreiheit im Web. 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 Probleme, indem Sie in der Statusleiste der Console auf die Schaltfläche Anzahl der Probleme klicken.

Automatische Meldung von Problemen mit geringem Kontrast

Chromium-Problem: 1155460

Vollständige Baumansicht für Barrierefreiheit im Bereich „Elemente“

Sie können jetzt zwischen der neuen und verbesserten Baumstrukturansicht für die Barrierefreiheit einer Seite und der ursprünglichen Ansicht wechseln.

Der aktuelle Bereich „Barrierefreiheit“ bietet nur eine eingeschränkte Ansicht der Knoten. Es wird nur die direkte übergeordnete Kette vom Stammknoten zum geprüften Knoten angezeigt. Die neue Baumansicht für Barrierefreiheit soll dies verbessern und den Baum für Entwickler erkundenswerter, nützlicher und einfacher machen.

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 Barrierefreiheit zu wechseln.

Hinweis: Dies ist ein Test in der Anfangsphase. Wir planen, die Funktion im Laufe der Zeit zu verbessern und zu erweitern.

Vollständige Baumansicht für Barrierefreiheit

Chromium-Problem: 887173

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.