Neuerungen in den Entwicklertools (Chrome 98)

Jecelyn Yeen

Vorschaufunktion: Ganzseitige Baumstruktur für Bedienungshilfen

Mit dem neuen Baum für Barrierefreiheit im Internet können Sie sich einen Überblick über den ganzseitigen Baum zur Barrierefreiheit verschaffen und besser nachvollziehen, wie Ihre Webinhalte mit Hilfstechnologien erscheinen.

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

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

Wählen Sie einen Knoten aus und wechseln Sie zurück zur DOM-Baumansicht. Der entsprechende DOM-Knoten ist jetzt ausgewählt. Dies ist ein gutes Mittel, um die Zuordnung zwischen dem DOM-Knoten und seinem Baumknoten für die Barrierefreiheit zu verstehen. Dies funktioniert auch für die DOM-Baumansicht ⬌ Baumansicht für Bedienungshilfen!

Bisher war die Baumstruktur für Bedienungshilfen im Bereich Bedienungshilfen verfügbar. Die Ansicht ist eingeschränkt. Sie können damit nur einen einzelnen Knoten und dessen Vorgänger untersuchen.

Unser Team arbeitet derzeit noch aktiv an dieser Funktion in der Vorabversion. Wir freuen uns auf dein Feedback zur Verbesserung der Funktionen.

Ganzseitige Baumstruktur für Bedienungshilfen

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. Dies ist insbesondere bei Seiten mit langsamen Netzwerkanfragen und langwierigen Animationen nützlich.

Ich habe beispielsweise auf dieser Demoseite einen User Flow aufgezeichnet, um den Menüpunkt zu laden und darauf zu klicken. Das Laden der Menüpunkte dauert jedoch sechs Sekunden. Die Wiederholung dieses User Flows ist fehlgeschlagen, weil sie 5 Sekunden überschreitet (Standardzeitlimit).

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

In den Einstellungen für die erneute Wiedergabe kannst du die Zeitüberschreitung für alle Schritte anpassen. Maximieren Sie den Bereich Einstellungen für die erneute Wiedergabe und bearbeiten Sie den Wert für Zeitüberschreitung.

Zeitüberschreitungseinstellungen für die Aufzeichnung des User Flows

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 Zurück- und Vorwärtsnavigation 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 verhindern, dass deine Seiten infrage kommen.

Wenn du eine bestimmte Seite testen möchtest, rufe sie in Chrome auf und gehe 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 ist es wichtig zu wissen, wie ihr eure Seiten für den bfcache in allen Browsern optimieren könnt, 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 „Eigenschaften“

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

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

Dank dieser Verbesserungen können Sie schneller zu den gewünschten Unterkünften gelangen, was sich wiederum positiv auf Ihre Produktivität auswirkt.

Filter im Bereich „Eigenschaften“

Chromium-Problem: 1269674

CSS-Medienfunktion „forced-colors“ emulieren

Die CSS-Medienfunktion forced-colors wird verwendet, um zu erkennen, ob der User-Agent einen erzwungenen Farbmodus aktiviert hat (z.B. den Modus mit hohem Kontrast in Windows), 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 legen Sie das Drop-down-Menü CSS-Medienfunktion forced-colors emulieren fest.

CSS-Medienfunktion „Forceced-Colors“

Chromium-Problem: 1130859

Lineale anzeigen, wenn der Mauszeiger darauf bewegt wird

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

Bisher konnten die Seitenlineal nur über das Kästchen Einstellungen > Lineal einblenden aktiviert werden.

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 Tastaturkürzel zur Wiedergabe von XHR und Erweitern aller Suchergebnisse

Tastenkombinationen zur Wiedergabe von XHR im Netzwerkbereich

Wählen Sie im Bereich Network (Netzwerk) eine XHR-Anfrage aus und drücken Sie auf der Tastatur R, um die XHR-Anfrage noch einmal abzuspielen. Bisher können 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 maximieren und minimieren können. Bisher konnten die Suchergebnisse nur durch Klicken auf eine Datei maximiert oder minimiert werden.

Ö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. 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 }

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

Chromium-Problem: 1255073

Lighthouse 9 im Steuerfeld „Leuchtturm“

Im Steuerfeld Lighthouse wird jetzt Lighthouse 9 ausgeführt. In Lighthouse werden nun alle Elemente mit derselben ID aufgelistet.

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.

Hier finden Sie weitere Informationen zu den Neuerungen 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“

Zahlreiche Stabilitätsverbesserungen im Bereich Quellen nach der Aktualisierung auf CodeMirror 6. Hier sind einige wichtige Verbesserungen:

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

Chromium-Problem: 1241848

Verschiedene Highlights

Im Folgenden sind einige wichtige Fehlerkorrekturen in dieser Version aufgeführt:

  • Wasserfalldiagramm von Netzwerkanfragen richtig anzeigen Zuvor war der Stil fehlerhaft. (1275501)
  • Die Codehervorhebung ist bei der Suche in Dokumenten mit sehr langen Zeilen im Bereich Quellen fehlerhaft. Dieses Problem wurde behoben. (1275496)
  • Keine doppelten Payload-Tabs in Netzwerkanfragen. (1273972)
  • Die fehlenden Details zu Layout Shifts im Bereich Zusammenfassung des Steuerfelds Leistung wurden behoben. (1259606)
  • Sie können in Anfragen für die Netzwerksuche beliebige Zeichen wie , und . unterstützen. (1267196)

[Experimentell] Endpunkte im Bereich „Reporting API“

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

Der Abschnitt Endpunkte ist jetzt verfügbar. Sie erhalten einen Überblick über alle Endpunkte, die im Reporting-Endpoints-Header konfiguriert sind.

Mit der Reporting API Sicherheitsverstöße, eingestellte API-Aufrufe und mehr überwachen

Bereich „Reporting API“

Chromium-Problem: 1200732

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 101

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 gekündigt.

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