Neuerungen in den Entwicklertools (Chrome 98)

Jecelyn Yeen

Vorabversion: Vollbild-Baumansicht für Barrierefreiheit

Mit dem neuen Baumdiagramm zur Barrierefreiheit für die gesamte Seite erhalten Sie leichter einen Überblick über das Baumdiagramm zur Barrierefreiheit für die gesamte Seite und können besser nachvollziehen, wie Ihre Webinhalte für Hilfstechnologien sichtbar sind.

Öffnen Sie im Bereich Elemente den Bereich Barrierefreiheit und klicken Sie das Kästchen Vollbild-Baumansicht für Barrierefreiheit aktivieren an. Aktualisieren Sie dann die DevTools. Im Bereich Elemente sehen Sie nun eine neue Schaltfläche für Bedienungshilfen.

Klicken Sie darauf, um zur Vollbildansicht für Bedienungshilfen zu wechseln. Sie können Knoten maximieren oder im Bereich Barrierefreiheit auf Details klicken.

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 Knoten im Baum für Barrierefreiheit besser nachvollziehen. Das funktioniert auch für die DOM-Baum-⬌ 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 Vorfahren untersuchen.

Unser Team arbeitet noch aktiv an dieser Vorschaufunktion. Wir freuen uns auf dein Feedback, um die Funktion weiter zu verbessern.

Vollbild-Baumansicht für Barrierefreiheit

Chromium-Problem: 887173

Genauere Änderungen auf dem Tab „Änderungen“

Die Codeänderungen auf dem Tab Änderungen werden automatisch gedruckt.

Zuvor war es schwierig, die tatsächlichen Änderungen des komprimierten Quellcodes nachzuverfolgen, da der gesamte Code in einer einzigen Zeile angezeigt wird.

Tab „Änderungen“

Chromium-Probleme: 1238818, 1268754 , 1086491

Längeres Zeitlimit für die Aufzeichnung des Nutzerflusses festlegen

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

Ich habe beispielsweise einen User Flow auf dieser Demoseite aufgezeichnet, um den Menüpunkt zu laden und anzuklicken. Das Laden der Menüpunkte dauert jedoch 6 Sekunden. Die Wiedergabe dieses Nutzerflusses ist fehlgeschlagen, da er 5 Sekunden (die Standardzeitüberschreitung) überschreitet.

Wir können die neuen Einstellungen für die Zeitüberschreitung verwenden, um dieses Problem zu beheben. Maximieren Sie den Schritt, in dem wir auf den Menüpunkt klicken. Bearbeiten Sie den Schritt, indem Sie Zeitüberschreitung hinzufügen auswählen und auf 6.000 Millisekunden (entspricht 6 Sekunden) festlegen.

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

Zeitüberschreitungseinstellungen für die Aufzeichnung des Nutzerflusses

Chromium-Problem: 1257499

Prüfe mithilfe des Tabs „Back-Forward-Cache“, ob deine Seiten im Cache gespeichert werden können

Der Back-Forward-Cache (oder bfcache) ist eine Browseroptimierung, die eine sofortige und vorwärtsgerichtete Navigation ermöglicht.

Auf dem neuen Tab Back-Forward-Cache kannst du deine Seiten testen, um sicherzustellen, dass sie für den bfCache optimiert sind. Außerdem kannst du mögliche Probleme ermitteln, die die Teilnahme verhindern.

Wenn Sie eine bestimmte Seite testen möchten, rufen Sie sie in Chrome auf und gehen Sie dann in den Entwicklertools zu Anwendung > Back-Forward-Cache. Klicken Sie dann auf die Schaltfläche Back-Forward-Cache testen. Die Entwicklertools versuchen dann, die Seite zu verlassen und wieder zurückzugehen, um festzustellen, ob die Seite aus dem bfcache wiederhergestellt werden konnte.

Als Webentwickler müssen Sie wissen, wie Sie Ihre Seiten für den bfcache in allen Browsern optimieren, da dies das Surfen für Nutzer erheblich verbessert, insbesondere für Nutzer mit langsameren Netzwerken oder Geräten.

Tab „Back-Forward-Cache“

Chromium-Problem: 1110752

Neuer Filter im Bereich „Properties“

Wenn Sie sich im Bereich Properties (Eigenschaften) auf eine bestimmte Eigenschaft konzentrieren möchten, können Sie den Namen oder Wert dieser Eigenschaft jetzt 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 zu sehen.

So können Sie schneller zu den von Ihnen betreuten Unterkünften gelangen und so Ihre Produktivität steigern.

Filter im Bereich „Properties“

Chromium-Problem: 1269674

CSS-Medienfunktion „forced-colors“ emulieren

Mit der CSS-Medienfunktion forced-colors wird ermittelt, ob der User-Agent einen Modus für erzwungene Farben aktiviert hat (z.B. den Windows-Modus mit hohem Kontrast), bei dem eine vom Nutzer ausgewählte eingeschränkte Farbpalette auf der Seite erzwungen wird.

Öffnen Sie das Befehlsmenü, führen Sie den Befehl Darstellung anzeigen aus und legen Sie 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 beim Bewegen des Mauszeigers anzeigen ausführen. Mit den Seitenlinealen lässt sich die Breite und Höhe eines Elements leichter messen.

Bisher konnten Sie die Seitenleisten nur über das Kästchen Einstellungen > Leisten anzeigen aktivieren.

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

Chromium-Problem: 1270562

row-reverse und column-reverse im Flexbox-Editor unterstützen

Im Flexbox-Editor wurden zwei neue Schaltflächen hinzugefügt, um row-reverse und column-reverse in flex-direction zu unterstützen.

Flexbox-Editor

Chromium-Problem: 1263866

Neue Tastenkombinationen zum Wiedergeben von XHR und zum Maximieren aller Suchergebnisse

Tastenkombinationen zum Wiedergeben von XHR-Anfragen im Netzwerkbereich

Wählen Sie im Bereich Netzwerk eine XHR-Anfrage aus und drücken Sie auf der Tastatur die Taste R, um die XHR-Anfrage noch einmal abzuspielen. Bisher war die XHR-Wiedergabe nur über das Kontextmenü (Rechtsklick > XHR wiedergeben) möglich.

XHR wiedergeben

Chromium-Problem: 1050021

Tastenkombination zum Maximieren aller Suchergebnisse

Auf dem Tab Suchen wurde eine neue Tastenkombination hinzugefügt, mit der Sie alle Suchergebnisse maximieren und minimieren können. Bisher konnten Sie die Suchergebnisse nur maximieren und minimieren, indem Sie jeweils auf eine Datei geklickt haben.

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

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

Weitere Informationen zu Tastenkombinationen in den Chrome-Entwicklertools finden Sie hier.

Chromium-Problem: 1255073

Lighthouse 9 im Steuerfeld „Leuchtturm“

Im Bereich Lighthouse wird jetzt Lighthouse 9 ausgeführt. Lighthouse listet jetzt alle Elemente mit derselben ID auf.

Eine nicht eindeutige Element-ID ist ein häufiges Problem bei der Barrierefreiheit. Beispielsweise wird die ID, auf die in einem aria-labelledby-Attribut verwiesen wird, für mehrere Elemente verwendet.

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

​Eine Lighthouse-Prüfung für „Alle fokussierbaren Elemente müssen eine eindeutige ID haben“, die zwei Elemente enthält, die beide dieselbe „id“ haben

Chromium-Problem: 772558

Verbesserter Bereich „Quellen“

Es gibt viele Stabilitätsverbesserungen im Bereich Quellen, da wir auf CodeMirror 6 umgestellt haben. Hier sind einige wichtige Verbesserungen:

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

Chromium-Problem: 1241848

Sonstige Highlights

Hier sind einige bemerkenswerte Fehlerkorrekturen in dieser Version:

  • Das Abfolgediagramm der Netzwerkanfragen wird korrekt angezeigt. Bisher war der Stil fehlerhaft. (1275501)
  • Die Code-Hervorhebung funktionierte nicht mehr, wenn im Bereich Quellen in Dokumenten mit sehr langen Zeilen gesucht wurde. Dieses Problem wurde behoben. (1275496)
  • Es gibt keinen doppelten Tab Nutzlast mehr in Netzwerkanfragen. (1273972)
  • Im Bereich Leistung unter Zusammenfassung wurden fehlende Details zu Layoutänderungen korrigiert. (1259606)
  • Sie können in Anfragen für die Netzwerksuche beliebige Zeichen wie , und . unterstützen. (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 Bereich Endpunkte ist jetzt verfügbar. Sie erhalten einen Überblick über alle Endpunkte, die im Reporting-Endpoints-Header konfiguriert sind.

Informationen zum Überwachen von Sicherheitsverstößen, eingestellten API-Aufrufen und mehr mit der Reporting API

Bereich „Reporting API“

Chromium-Problem: 1200732

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Zugriff auf die neuesten DevTools-Funktionen, ermöglichen den Test moderner Webplattform-APIs 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 DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.