Neuerungen in den Entwicklertools (Chrome 98)

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.

Sie können darauf klicken, um zur Vollbild-Baumansicht für Barrierefreiheit 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.

Chromium-Problem: 887173

Genauere Änderungen auf dem Tab „Änderungen“

Die Codeänderungen auf dem Tab Änderungen werden automatisch in einer lesbaren Formatierung dargestellt.

Bisher war es schwierig, die tatsächlichen Änderungen am minimierten Quellcode zu verfolgen, da der gesamte Code in einer einzigen Zeile angezeigt wurde.

Chromium-Probleme: 1238818, 1268754 , 1086491

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

Sie können die Zeitüberschreitungseinstellungen im Aufzeichnungstool jetzt 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 ist jedoch langsam (6 Sekunden). Die Wiedergabe dieses Nutzerflusses ist fehlgeschlagen, da sie 5 Sekunden (die Standardzeitüberschreitung) überschreitet.

Mit den neuen Zeitlimiteinstellungen können wir das Problem 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 (6 Sekunden) festlegen.

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

Chromium-Problem: 1257499

Über den Tab „Back-Forward-Cache“ prüfen, ob Ihre 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 können Sie Ihre Seiten testen, um sicherzustellen, dass sie für den Back-/Forward-Cache optimiert sind, und Probleme erkennen, die die Eignung verhindern könnten.

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 als Nächstes auf die Schaltfläche Back-Forward-Cache testen. Die Entwicklertools versuchen dann, zur Seite zu wechseln und wieder zurückzukommen, um festzustellen, ob die Seite aus dem Back-Forward-Cache wiederhergestellt werden kann.

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.

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.

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 Rendering anzeigen aus und legen Sie dann das Drop-down-Menü CSS-Medienfunktion „forced-colors“ emulieren fest.

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.

Chromium-Problem: 1270562

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

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

Chromium-Problem: 1263866

Neue Tastenkürzel 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 konnte die XHR-Anfrage nur über das Kontextmenü (Rechtsklick > XHR-Anfrage wiedergeben) wiedergegeben werden.

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 (z.B. eine Funktion) ein 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 }

Eine Liste der Tastenkombinationen in den Chrome-Entwicklertools finden Sie unter Tastenkombinationen.

Chromium-Problem: 1255073

Lighthouse 9 im Lighthouse-Steuerfeld

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

​

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 schnelleres Ö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. Das 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)
• Unterstützung beliebiger Zeichen (z. B. ,, .) in Netzwerksuchanfragen (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

Chromium-Problem: 1200732

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.

• Senden Sie uns Feedback und Funktionsanfragen unter crbug.com.
• Melden Sie ein DevTools-Problem über das Dreipunkt-Menü more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Tweeten Sie an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu den Neuigkeiten in den DevTools oder den YouTube-Videos mit Tipps zu den DevTools.

Neu in den DevTools

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