Neuerungen in den Entwicklertools (Chrome 98)

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.

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.

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.

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.

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 und so Ihre Produktivität steigern.

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.

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 Sie die Seitenlineal nur über Einstellungen > Lineal einblenden anklicken.

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.

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

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.

Tab „Suche“ über Esc öffnen > 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 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.

​

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

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.
• Problem mit den Entwicklertools über Weitere Optionen melden > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
• 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