Neuerungen in den Entwicklertools (Chrome 98)

Jecelyn Yeen

Funktion in der Vorabversion: Vollbild-Baumansicht für Barrierefreiheit

Mit dem neuen Barrierefreiheitsbaum für die gesamte Seite können Sie sich leichter einen Überblick über den Barrierefreiheitsbaum für die gesamte Seite verschaffen und besser nachvollziehen, wie Ihre Webinhalte für unterstützende Technologien dargestellt werden.

Öffnen Sie im Bereich Elemente den Bereich Barrierefreiheit und wählen Sie das Kästchen Vollbild-Baumansicht für Barrierefreiheit aktivieren aus. Laden Sie dann die DevTools neu. Im Bereich Elemente wird nun eine neue Schaltfläche für Bedienungshilfen angezeigt.

Sie können darauf klicken, um zur Ansicht Vollbild-Baumansicht für Barrierefreiheit zu wechseln. Sie können Knoten maximieren oder darauf klicken, um Details im Bereich Barrierefreiheit aufzurufen.

Wählen Sie einen Knoten aus und wechseln Sie zurück zur DOM-Baumansicht. Der entsprechende DOM-Knoten ist jetzt ausgewählt. So können Sie die Zuordnung zwischen dem DOM-Knoten und dem zugehörigen Knoten im Barrierefreiheitsbaum besser nachvollziehen. Das funktioniert auch für die DOM-Baumansicht ⬌ Baumansicht für Barrierefreiheit.

Bisher war die Baumansicht für Barrierefreiheit im Bereich Barrierefreiheit verfügbar. Die Ansicht ist eingeschränkt. Sie können nur einen einzelnen Knoten und seine übergeordneten Knoten untersuchen.

Unser Team arbeitet noch aktiv an dieser Vorschaufunktion. Wir freuen uns auf Ihr Feedback, damit wir die Funktion weiter verbessern können.

Vollbild-Baumansicht für Barrierefreiheit

Chromium-Problem: 887173

Präzisere Änderungen auf dem Tab „Änderungen“

Die Codeänderungen auf dem Tab Changes (Änderungen) werden automatisch formatiert.

Bisher war es schwierig, die tatsächlichen Änderungen des minimierten Quellcodes nachzuvollziehen, da der gesamte Code in einer einzigen Zeile angezeigt wurde.

Tab „Änderungen“

Chromium-Probleme: 1238818, 1268754 , 1086491

Längeres Zeitlimit für die Aufzeichnung von User-Flows festlegen

Sie können jetzt die Timeout-Einstellungen im Recorder für alle Schritte oder einen bestimmten Schritt anpassen. Das ist besonders für Seiten mit langsamen Netzwerkanfragen und langen Animationen nützlich.

Ich habe beispielsweise einen User Flow auf dieser Demoseite aufgezeichnet, um das Menüelement zu laden und darauf zu klicken. Das Laden der Menüpunkte dauert jedoch lange (6 Sekunden). Die Wiedergabe dieses Nutzerablaufs ist fehlgeschlagen, da sie länger als 5 Sekunden (das Standard-Zeitlimit) dauert.

Mit den neuen Zeitlimit-Einstellungen lässt sich das Problem beheben. Maximieren Sie den Schritt, in dem wir auf das Menüelement klicken. Bearbeiten Sie den Schritt, indem Sie Zeitüberschreitung hinzufügen auswählen und den Wert auf 6000 Millisekunden (entspricht 6 Sekunden) festlegen.

Optional können Sie das Zeitlimit in den Wiedergabeeinstellungen für alle Schritte anpassen. Maximieren Sie die Wiedergabeeinstellungen und bearbeiten Sie den Wert für Zeitlimit.

Timeouteinstellungen für die Aufzeichnung von User-Flows

Chromium-Problem: 1257499

Prüfen Sie auf dem Tab „Back/Forward-Cache“, ob Ihre Seiten im Cache gespeichert werden können.

Der Back-Forward-Cache (bfcache) ist eine Browseroptimierung, die eine sofortige Rückwärts- und Vorwärtsnavigation ermöglicht.

Auf dem neuen Tab Back/forward cache (Cache für Zurück/Vorwärts) können Sie Ihre Seiten testen, um sicherzustellen, dass sie für den bfcache optimiert sind, und Probleme erkennen, die verhindern, dass sie infrage kommen.

Wenn Sie eine bestimmte Seite testen möchten, rufen Sie sie in Chrome auf und gehen Sie dann in den Entwicklertools zu Application > Back-forward Cache. Klicken Sie als Nächstes auf die Schaltfläche Back-Forward-Cache testen. Die Entwicklertools versuchen dann, die Seite zu verlassen und wieder aufzurufen, um festzustellen, ob sie aus dem Back-Forward-Cache wiederhergestellt werden kann.

Als Webentwickler ist es wichtig zu wissen, wie Sie Ihre Seiten für den Back-Forward-Cache in allen Browsern optimieren, da dies das Surfen für Nutzer erheblich verbessert, insbesondere für langsamere Netzwerke oder Geräte.

Tab „Back-Forward-Cache“

Chromium-Problem: 1110752

Neuer Filter im Bereich „Properties“

Wenn Sie sich auf eine bestimmte Eigenschaft im Bereich Eigenschaften konzentrieren möchten, können Sie jetzt den Namen oder Wert der Eigenschaft in das neue Textfeld Filter eingeben.

Standardmäßig werden Properties, deren Wert null oder undefined ist, nicht angezeigt. Aktivieren Sie das Kästchen Alle anzeigen, um alle Properties aufzurufen.

Dank dieser Verbesserungen können Sie schneller auf die gewünschten Properties zugreifen und so Ihre Produktivität steigern.

Filter im Eigenschaftenbereich

Chromium-Problem: 1269674

CSS-Medienfunktion „forced-colors“ emulieren

Die CSS-Medienfunktion forced-colors wird verwendet, um zu erkennen, ob der User-Agent einen Modus mit erzwungenen Farben aktiviert hat (z.B. den Windows-Modus mit hohem Kontrast), in dem eine vom Nutzer ausgewählte eingeschränkte Farbpalette auf der Seite erzwungen wird.

Öffnen Sie das Befehlsmenü, führen Sie den Befehl Rendering anzeigen aus und legen Sie dann das Drop-down-Menü CSS-Medienfunktion „forced-colors“ emulieren fest.

CSS-Medienfunktion „forced-colors“

Chromium-Problem: 1130859

Befehl „Lineale anzeigen, wenn der Mauszeiger darauf bewegt wird“

Sie können jetzt das Befehlsmenü öffnen und den Befehl Lineale bei Mauszeigerposition anzeigen ausführen. Mit den Seitenlinealen lässt sich die Breite und Höhe eines Elements leichter messen.

Bisher konnten Sie die Seitenlineale nur über das Kästchen Einstellungen > Lineale einblenden aktivieren.

Befehl „Lineale anzeigen, wenn der Mauszeiger darauf bewegt wird“

Chromium-Problem: 1270562

Unterstützung von row-reverse und column-reverse im Flexbox-Editor

Im Flexbox-Editor wurden zwei neue Schaltflächen zur Unterstützung von row-reverse und column-reverse in flex-direction hinzugefügt.

Flexbox-Editor

Chromium-Problem: 1263866

Neue Tastenkombinationen zum Wiederholen von XHR und zum Maximieren aller Suchergebnisse

Tastenkombinationen zum Wiederholen von XHR im Netzwerkbereich

Wählen Sie im Bereich Netzwerk eine XHR-Anfrage aus und drücken Sie auf der Tastatur R, um die XHR-Anfrage noch einmal zu senden. Bisher konnten Sie die XHR nur über das Kontextmenü wiedergeben (Rechtsklick > XHR wiedergeben).

XHR wiederholen

Chromium-Problem: 1050021

Tastenkombination zum Maximieren aller Suchergebnisse

Auf dem Tab Suche wurde eine neue Tastenkombination hinzugefügt, mit der Sie alle Suchergebnisse ein- und ausblenden können. Bisher konnten Sie die Suchergebnisse nur durch Klicken auf jeweils eine Datei ein- und ausblenden.

Öffnen Sie den Tab „Suchen“ über Esc > Dreipunkt-Menü > Suchen. Geben Sie einen Suchstring ein (z.B. „Funktion“) und drücken Sie die Eingabetaste, um die Liste der Suchergebnisse aufzurufen. Konzentrieren Sie sich auf die Suchergebnisse und verwenden Sie den folgenden Tastenkürzel, um die Suchdateien zu maximieren/minimieren:

  • Windows / Linux: Ctrl + Shift + { oder }
  • MacOS: Cmd + Options + { oder }

Tastenkombinationen für Chrome-Entwicklertools

Chromium-Problem: 1255073

Lighthouse 9 im Lighthouse-Bereich

Im Bereich Lighthouse wird jetzt Lighthouse 9 ausgeführt. Lighthouse listet jetzt alle Elemente auf, die dieselbe ID haben.

Eine nicht eindeutige Element-ID ist ein häufiges Problem mit der Barrierefreiheit. Die in einem aria-labelledby-Attribut referenzierte ID wird beispielsweise für mehrere Elemente verwendet.

Weitere Informationen zu den Updates finden Sie unter Neu in Lighthouse 9.0.

​Ein Lighthouse-Audit für „Alle fokussierbaren Elemente müssen eine eindeutige ID haben“ mit zwei Elementen, die beide dieselbe ID haben

Chromium-Problem: 772558

Verbesserter Quellenbereich

Das Steuerfeld Quellen wurde auf CodeMirror 6 aktualisiert und bietet jetzt eine höhere Stabilität. Hier sind einige wichtige Verbesserungen:

  • Deutlich schneller beim Öffnen großer Dateien (z.B. WASM, JavaScript)
  • Kein zufälliges Scrollen mehr beim Durchgehen von Code
  • Verbesserte Vorschläge für die automatische Vervollständigung für bearbeitbare Quellen (z.B. Snippets, lokaler Override)

Chromium-Problem: 1241848

Sonstige Highlights

Hier sind einige wichtige Korrekturen in dieser Version:

  • Das Wasserfalldiagramm der Netzwerkanfragen wird richtig angezeigt. Bisher war der Stil fehlerhaft. (1275501)
  • Die Code-Hervorhebung funktionierte nicht, wenn in Dokumenten mit sehr langen Zeilen im Bereich Quellen gesucht wurde. Das Problem wurde behoben. (1275496)
  • Der Tab Payload wird nicht mehr doppelt in Netzwerkanfragen angezeigt. (1273972)
  • Die fehlenden Details zu Layoutverschiebungen im Bereich Zusammenfassung des Felds Leistung wurden behoben. (1259606)
  • Unterstützung beliebiger Zeichen (z.B. ,, .) in Netzwerksuche-Anfragen. (1267196)

[Experimentell] Endpunkte im Bereich „Reporting API“

Der experimentelle Bereich Reporting API wurde in Chrome 96 eingeführt, damit Sie die auf Ihrer Seite generierten Berichte und ihren Status im Blick behalten können.

Der Abschnitt Endpunkte ist jetzt verfügbar. Sie bietet einen Überblick über alle im Reporting-Endpoints-Header konfigurierten Endpunkte.

Weitere Informationen zur Reporting API

Bereich „Reporting API“

Chromium-Problem: 1200732

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.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.