Neuerungen in den Entwicklertools (Chrome 90)

Neue Debugging-Tools für CSS-Flexboxen

Die Entwicklertools bieten jetzt spezielle Tools zum Debuggen von CSS-Flexboxen.

Wenn auf ein HTML-Element auf Ihrer Seite display: flex oder display: inline-flex angewendet wird, sehen Sie im Bereich „Elemente“ daneben das Symbol flex. Klicken Sie auf das Symbol, um die Anzeige eines flexiblen Overlays auf der Seite zu aktivieren oder zu deaktivieren.

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 Abschnitt Flexbox, in dem alle Flexbox-Elemente auf der Seite angezeigt werden. Sie können die Einblendung der einzelnen Elemente ein- und ausschalten.

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 Informationen zu wichtigen Faktoren für eine optimale Nutzererfahrung im Web zur Verfügung gestellt werden.

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

Das Overlay zeigt derzeit Folgendes an:

• Largest Contentful Paint (LCP): Misst die Ladeleistung. Für eine gute Nutzerfreundlichkeit sollte der LCP innerhalb von 2, 5 Sekunden nach dem ersten Laden der Seite erfolgen.
• 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 sollten Seiten einen CLS-Wert von weniger als 0, 1 aufweisen.

Chromium-Problem: 1152089

Aktualisierungen auf dem Tab „Probleme“

Anzahl der Probleme in die Statusleiste der Console verschoben

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

Chromium-Problem: 1140516

Probleme mit vertrauenswürdigen Web-Aktivitäten melden

Auf dem Tab „Probleme“ werden jetzt Probleme mit Trusted Web Activity gemeldet. So können Entwickler die Probleme mit Trusted Web Activities auf ihren Websites besser nachvollziehen und beheben und die Qualität ihrer Anwendungen 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 diesem Vortrag von Andre erfahren Sie mehr darüber, wie Sie eine Trusted Web Activity erstellen und bereitstellen.

Chromium-Problem: 1147479

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

In der Console werden Strings jetzt als gültige JavaScript-Stringliterale formatiert. Bisher wurden in der Konsole beim Ausgeben von Strings keine doppelten Anführungszeichen maskiert.

Chromium-Problem: 1178530

Neuer Bereich „Trust Tokens“ im Anwendungsbereich

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

Trust Token ist eine neue API, mit der Betrug bekämpft und Bots von echten Menschen unterschieden werden können, ohne dass passives Tracking erfolgt. Weitere Informationen zu Trust Tokens

Chromium-Problem: 1126824

CSS-Medienfunktion „color-gamut“ emulieren

Mit der Media-Anfrage color-gamut können Sie den ungefähren Farbbereich testen, der vom Browser und vom Ausgabegerät unterstützt wird. Wenn beispielsweise die Media-Anfrage color-gamut: p3 ü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 Entwicklertools wird jetzt eine detailliertere Warnmeldung zur Installierbarkeit von Progressive Web-Apps (PWAs) in der Konsole mit einem Link zur Dokumentation angezeigt.

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

Außerdem wird im Bereich Manifest jetzt eine Warnmeldung angezeigt, wenn der Screenshot der PWA nicht den Anforderungen entspricht. Weitere Informationen zur Eigenschaft „screenshots“ für PWAs und den zugehörigen Anforderungen

Chromium-Problem: 1146450, 1169689, 965802

Neue Spalte Remote Address Space im Netzwerkbereich

In der neuen Spalte Remote Address Space im Bereich „Netzwerk“ sehen Sie den Netzwerk-IP-Adressraum jeder Netzwerkressource.

Chromium-Problem: 1128885

Leistungsverbesserungen

Die Leistung beim Laden von Seiten mit geöffneten Entwicklertools wurde verbessert. In einigen extremen Fällen haben wir Leistungssteigerungen von bis zu 1000 % beobachtet.

DevTools erfasst Stacktraces und hängt sie an Konsolennachrichten oder asynchrone Aufgaben an, damit der Entwickler sie später im Falle eines Problems verwenden kann. Da diese Erfassung synchron in der Browser-Engine erfolgen muss, kann eine langsame Erfassung von Stacktraces die Seite bei geöffneten Entwicklertools erheblich verlangsamen. Wir konnten den Aufwand für die Erfassung von Stacktraces deutlich reduzieren.

In Kürze wird ein detaillierter technischer Blogpost zur Implementierung veröffentlicht.

Chromium-Probleme: 1069425, 1077657

Zulässige/nicht zulässige Funktionen in der Ansicht „Frame-Details“ anzeigen

In der Ansicht mit den Frame-Details wird jetzt eine Liste der zulässigen und unzulässigen Browserfunktionen angezeigt, die von der Berechtigungsrichtlinie gesteuert werden.

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

Chromium-Problem: 1158827

Neue Spalte SameParty im Bereich „Cookies“

Im Bereich „Cookies“ im Bereich „Anwendung“ 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 enthalten sein soll.

Chromium-Problem: 1161427

Eingestellte Unterstützung für nicht standardmäßige fn.displayName-Elemente

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

In Chrome wurde die nicht standardmäßige fn.displayName-Eigenschaft bisher unterstützt, damit Entwickler Debug-Namen für Funktionen festlegen können, die in error.stack und in DevTools-Stapeltraces angezeigt werden. Im obigen Beispiel würde im Aufrufstack zuvor noLongerSupport angezeigt.

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

Die Unterstützung für fn.displayName war unzuverlässig und nicht konsistent in den verschiedenen Browser-Engines. Dadurch wird die Erfassung von Stacktraces verlangsamt. Das ist ein Nachteil, den Entwickler immer in Kauf nehmen müssen, unabhängig davon, ob sie fn.displayName tatsächlich verwenden oder nicht.

Chromium-Problem: 1177685

Entfernung von Don't show Chrome Data Saver warning aus dem Menü „Einstellungen“

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

Chromium-Problem: 1056922

Experimentelle Funktionen

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

In DevTools wurde experimentelle Unterstützung für das automatische Melden 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 Demoseite. Öffnen Sie dann die Tabs Probleme, indem Sie in der Statusleiste der Console auf die Schaltfläche Anzahl der Probleme klicken.

Chromium-Problem: 1155460

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

Sie können jetzt umschalten, um die neue und verbesserte Vollbild-Baumansicht für Barrierefreiheit einer Seite aufzurufen.

Im aktuellen Bereich „Barrierefreiheit“ werden die Knoten nur eingeschränkt angezeigt. Es wird nur die direkte Vorfahrenkette vom Stammknoten zum untersuchten Knoten dargestellt. Die neue Baumansicht für Barrierefreiheit soll das verbessern und den Baum für Barrierefreiheit für Entwickler leichter zugänglich, nützlicher und einfacher zu verwenden 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 Barrierefreiheitsbaum zu wechseln.

Bitte beachten Sie, dass es sich hierbei um ein Experiment in der Anfangsphase handelt. Wir planen, die Funktion im Laufe der Zeit zu verbessern und zu erweitern.

Chromium-Problem: 887173

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 unter den YouTube-Videos zu 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.