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 wird, sehen Sie im Elementbereich das Kennzeichen flex. Klicken Sie auf das Badge, um die Flex-Overlay auf der Seite an.

Im Bereich Stile können Sie auf das neue Symbol neben dem display: flex oder display: inline-flex, um den Flexbox-Editor zu öffnen. Mit dem Flexbox-Editor können Flexbox-Eigenschaften festlegen. Versuchen Sie es selbst!

Darüber hinaus verfügt der Bereich Layout über einen Abschnitt Flexbox, in dem alle Flexbox-Elemente auf der Seite Seite. 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 dem Ziel, einheitliche Leitlinien für Qualitätssignale bereitzustellen, die sind unerlässlich, um eine positive Nutzererfahrung im Web zu bieten.

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

Das Overlay wird derzeit angezeigt:

  • Largest Contentful Paint (LCP): Damit wird die Ladeleistung gemessen. Um eine gute User Experience sollte der LCP-Wert innerhalb von 2, 5 Sekunden nach dem erstmaligen Laden der Seite erfolgen.
  • First Input Delay (FID): Damit wird die Interaktivität gemessen. Um eine gute Nutzererfahrung zu bieten, sollte eine FID von unter 100 Millisekunden haben.
  • Cumulative Layout Shift (CLS): misst die visuelle Stabilität. Um eine gute User Experience sollten Seiten einen CLS-Wert von weniger als 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 gibt Warnungen aus. 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. 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.

Öffnen Sie eine vertrauenswürdige Webaktivität. Öffnen Sie dann die Tabs Probleme, indem Sie auf Anzahl der Probleme klicken. in der Statusleiste der Konsole klicken, um die Probleme anzuzeigen. In diesem Vortrag von Andre erfahren Sie mehr. Weitere Informationen zum Erstellen und Bereitstellen von vertrauenswürdigen Webaktivitä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 Die Console verwendet beim Drucken von Strings keine doppelten Anführungszeichen.

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 in der neuen Trust Tokens an Tokens unter dem Bereich Anwendung.

Trust Token ist eine neue API zur Bekämpfung von Betrug und zur Unterscheidung zwischen Bots und echten Menschen. Verfolgung. 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 können Sie den ungefähren Bereich der unterstützten Farben testen vom Browser und Ausgabegerät. Stimmt beispielsweise die Medienabfrage color-gamut: p3 überein, bedeutet, dass das Gerät des Nutzers den Farbraum Display-P3 unterstützt.

Öffnen Sie das Befehlsmenü, führen Sie den Befehl Show Rendering (Rendering anzeigen) aus und legen Sie den Wert für Emulate CSS (CSS emulieren) fest. Mediafeature color-gamut (Farbgamut) für Medienfunktion.

Chromium-Problem: 1073887

Verbesserte Tools für progressive Web-Apps

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

Warnung zur Installierbarkeit von PWAs

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

Warnung zur Kürzung der PWA-Beschreibung

Darüber hinaus wird im Bereich Manifest jetzt eine Warnmeldung angezeigt, wenn der Screenshot der PWA nicht die den Anforderungen entsprechen. Weitere Informationen zur Eigenschaft Screenshots einer PWA und ihren Anforderungen 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 IP-Adressbereich des Netzwerks zu sehen der einzelnen Netzwerkressourcen.

Neuer „Remote-Adressraum“ Spalte

Chromium-Problem: 1128885

Leistungsverbesserungen

Die Leistung beim Laden von Seiten mit geöffneten Entwicklertools wurde verbessert. In Extremfällen ergab sich eine 10-fache Leistungsverbesserungen.

Die Entwicklertools erfassen Stacktraces und hängen sie für später an Konsolennachrichten oder asynchrone Aufgaben an die der Entwickler im Falle eines Problems verwendet. Da diese Sammlung synchron erfolgen muss, in der Browser-Engine kann eine langsame Stacktraces-Erfassung die Seite erheblich verlangsamen. Die Entwicklertools werden geöffnet. 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

Die Ansicht „Frame-Details“ zeigt jetzt eine Liste zulässiger und nicht zulässiger Browserfunktionen an, die vom Berechtigungsrichtlinie.

Eine Berechtigungsrichtlinie ist eine Webplattform-API, mit der eine Website Berechtigungen für die Verwendung von Browserfunktionen in einem eigenen Frame oder in iFrames, die er eingebettet hat.

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. Die Das Attribut SameParty ist ein neues boolesches Attribut, das angibt, ob ein Cookie in Anfragen an Ursprünge derselben First-Party-Sets.

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

Bisher wurde die nicht standardmäßige fn.displayName-Eigenschaft von Chrome unterstützt, Entwickler können Debug-Namen für Funktionen festlegen, die in error.stack und im Entwicklertools-Stack angezeigt werden Spuren. Im obigen Beispiel wurde im Aufrufstack zuvor noLongerSupport angezeigt.

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

Die Unterstützung für fn.displayName ist in den verschiedenen Browser-Engines unzuverlässig und nicht konsistent. Es wird langsamer Stacktraces zu sammeln. Diese Kosten entstehen Entwicklern immer, unabhängig davon, ob sie fn.displayName 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 Chrome-Datensparmodus eingestellt.

„Keine Warnung im Chrome-Datensparmodus anzeigen“ wurde eingestellt Einstellungen

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 Probleme Klicken Sie in der Statusleiste der Console auf die Schaltfläche Issues count (Anzahl der Probleme), um die Probleme aufzurufen.

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 nur die Knoten angezeigt, die die Ancestor-Kette vom Stammknoten zum geprüften Knoten leitet. Mit der neuen Baumansicht für Barrierefreiheit um dies zu verbessern und den Baum für Barrierefreiheit zu optimieren. zu verwenden.

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

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

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.
  • Problem mit den Entwicklertools über Weitere Optionen melden Mehr > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
  • 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