Neuerungen in den Entwicklertools (Chrome 98)

Jecelyn Yeen

Vorschaufunktion: Ganzseitige Barrierefreiheitsstruktur

Die neue Ganzseitige Baumstruktur für Barrierefreiheit erleichtert Ihnen einen Überblick über den ganzseitigen Baum für Barrierefreiheit und hilft Ihnen zu verstehen, wie Ihre Webinhalte durch Hilfstechnologien genutzt werden.

Öffnen Sie im Steuerfeld Elemente den Bereich Bedienungshilfen und klicken Sie das Kästchen Ganzseitige Barrierefreiheitsstruktur aktivieren an. Aktualisieren Sie dann die Entwicklertools. Im Steuerfeld Elemente wird Ihnen eine neue Schaltfläche für Bedienungshilfen angezeigt.

Sie können darauf klicken, um zur Ganzseitigen Bedienungshilfen-Baumansicht zu wechseln. Sie können Knoten maximieren oder klicken, um Details im Bereich Bedienungshilfen zu sehen.

Wählen Sie einen Knoten aus und wechseln Sie zurück zur DOM-Baumansicht. Der entsprechende DOM-Knoten ist jetzt ausgewählt. Dies ist eine gute Möglichkeit, die Zuordnung zwischen dem DOM-Knoten und seinem Baumknoten für Barrierefreiheit zu verstehen. Das funktioniert auch für die DOM-Baumansicht ⬌ Barrierefreiheit in der Baumansicht!

Bisher war die Struktur im Bereich Bedienungshilfen verfügbar. Die Ansicht ist eingeschränkt. Sie können damit nur einen einzelnen Knoten und seine Ancestors untersuchen.

Unser Team arbeitet noch aktiv an dieser Vorschaufunktion. Wir freuen uns über dein Feedback zu weiteren Verbesserungen.

Ganzseitige Baumstruktur für Bedienungshilfen

Chromium-Problem: 887173

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

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

Bisher war es schwierig, die tatsächlichen Änderungen des reduzierten 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 User Flows festlegen

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

Ein Beispiel: Ich habe auf dieser Demoseite einen User Flow aufgezeichnet, um ihn zu laden und auf den Menüpunkt zu klicken. Das Laden der Menüpunkte dauert jedoch nur 6 Sekunden. Die Wiederholung dieses Nutzerflusses ist fehlgeschlagen, da sie 5 Sekunden überschreitet (Standardzeitlimit).

Mit den neuen Einstellungen für die Zeitüberschreitung lässt sich dieses Problem beheben. Maximieren Sie den Schritt, in dem wir auf den Menüpunkt klicken. Bearbeiten Sie den Schritt durch Zeitlimit hinzufügen und legen Sie ihn auf 6.000 Millisekunden (entspricht 6 s) fest.

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

Zeitüberschreitungseinstellungen für die Aufzeichnung des User Flows

Chromium-Problem: 1257499

Auf dem Tab „Back-Forward-Cache“ müssen Seiten im Cache gespeichert werden

Der Back-Forward-Cache (oder bfcache) ist eine Browseroptimierung, die ein sofortiges Vor- und Zurückspulen ermöglicht.

Auf dem neuen Tab Back-Forward-Cache können Sie Ihre Seiten testen und prüfen, ob sie für den bfcache optimiert sind. Außerdem können Sie Probleme ermitteln, die möglicherweise verhindern, dass sie geeignet sind.

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

Als Webentwickler sollten Sie unbedingt wissen, wie Sie Ihre Seiten für den bfcache in allen Browsern optimieren können, da dies das Surfen für Nutzer erheblich verbessert. Dies gilt insbesondere für Nutzer mit langsamen Netzwerken und Geräten.

Tab für den Back-Forward-Cache

Chromium-Problem: 1110752

Neuer Filter im Bereich „Eigenschaften“

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

Standardmäßig werden Properties mit dem Wert null oder undefined nicht angezeigt. Klicken Sie das Kästchen Alle anzeigen an, um alle Unterkünfte zu sehen.

So können Sie schneller auf gewünschte Properties zugreifen und so Ihre Produktivität steigern.

Filter für den Bereich „Eigenschaften“

Chromium-Problem: 1269674

CSS-Medienfunktion „force-colors“ emulieren

Mit der CSS-Medienfunktion forced-colors lässt sich feststellen, ob der User-Agent einen erzwungenen Farbmodus (z.B. Windows-Modus mit hohem Kontrast) aktiviert hat, in 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 wählen Sie das Drop-down-Menü CSS-Medienfunktion forced-colors emulieren aus.

CSS-Medienfunktion „erzwungene Farben“

Chromium-Problem: 1130859

Lineale anzeigen, wenn der Mauszeiger auf einen Befehl bewegt wird

Sie können jetzt das Befehlsmenü öffnen und den Befehl Lineal einblenden, wenn der Mauszeiger auf das Objekt bewegt wird. Mit den Seiten Linealen können Sie die Breite und Höhe eines Elements leichter messen.

Bisher war das nur über Einstellungen > Lineal einblenden möglich.

Lineale anzeigen, wenn der Mauszeiger auf einen Befehl bewegt wird

Chromium-Problem: 1270562

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

Der Flexbox-Editor hat 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 zur Wiedergabe von XHR und zum Erweitern aller Suchergebnisse

Tastenkombinationen für die Wiedergabe von XHR im Bereich „Netzwerk“

Wählen Sie im Bereich Network eine XHR-Anfrage aus und drücken Sie auf der Tastatur R, um die XHR erneut zu spielen. Bisher können Sie die XHR nur über das Kontextmenü (Rechtsklick und XHR wiedergeben) wiederholen.

XHR noch einmal spielen

Chromium-Problem: 1050021

Tastenkombination zum Maximieren aller Suchergebnisse

Auf dem Tab Suche wird eine neue Verknüpfung hinzugefügt, mit der Sie alle Suchergebnisse maximieren und minimieren können. Bisher konnten die Suchergebnisse nur durch Klicken auf eine Datei maximiert und minimiert werden.

Öffne den Such-Tab über die Esc > das Esc > Esc. Geben Sie einen Suchstring (z.B. „Funktion“) ein und drücken Sie die Eingabetaste, um die Liste der Suchergebnisse aufzurufen. Legen Sie den Fokus 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 Übersicht über die Tastenkombinationen in den Chrome-Entwicklertools finden Sie hier.

Chromium-Problem: 1255073

Lighthouse 9 im Lighthouse-Bereich

Im Bereich Lighthouse wird jetzt Lighthouse 9 ausgeführt. In Lighthouse werden nun alle Elemente aufgelistet, die dieselbe ID haben.

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 finden Sie unter Neue Funktionen in Lighthouse 9.0.

​Eine Lighthouse-Prüfung für „Alle fokussierbaren Elemente muss eine eindeutige ID haben, bei der zwei Elemente angezeigt werden, beide mit derselben ID“

Chromium-Problem: 772558

Verbesserter Bereich „Quellen“

Im Rahmen der Aktualisierung auf CodeMirror 6 wurden im Bereich Quellen zahlreiche Stabilitätsverbesserungen vorgenommen. Hier einige wichtige Verbesserungen:

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

Chromium-Problem: 1241848

Sonstige Highlights

Dies sind einige bemerkenswerte Korrekturen in dieser Version:

  • Korrekte Anzeige des Wasserfalldiagramms der Netzwerkanfragen Zuvor war der Stil fehlerhaft. 1275501
  • Die Codemarkierung war bei der Suche in Dokumenten mit sehr langen Zeilen im Bereich Quellen fehlerhaft. Dieser Fehler wurde behoben. (1275496)
  • Kein doppelter Tab Nutzlast in Netzwerkanfragen mehr. (1273972)
  • Das Problem mit fehlenden Details zu Layout Shifts im Bereich Zusammenfassung des Steuerfelds Leistung wurde behoben. (1259606)
  • In Network Search-Abfragen werden beliebige Zeichen (z.B. ,, .) unterstützt. (1267196)

[Experimentell] Endpunkte im Bereich Reporting API

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

Der Abschnitt Endpunkte ist jetzt verfügbar. Sie erhalten eine Übersicht über alle im Reporting-Endpoints-Header konfigurierten Endpunkte.

Mit der Reporting API können Sie Sicherheitsverstöße, eingestellte API-Aufrufe und mehr im Blick behalten.

Bereich „Reporting API“

Chromium-Problem: 1200732

Vorschaukanäle herunterladen

Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome Erste Schritte

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde abgebrochen.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59