Neu in den Entwicklertools (Chrome 116)

Sofia Emelianova

Verbesserte Fehlerbehebung bei fehlenden Stylesheets

DevTools wurde in einigen Bereichen verbessert, um Ihnen zu helfen, Probleme mit fehlenden Stylesheets schneller zu erkennen und zu beheben:

• Im Baum Quellen > Seite werden jetzt nur die erfolgreich bereitgestellten und geladenen Stylesheets angezeigt, um Verwirrung zu vermeiden.
• Im Quellen > Editor werden jetzt fehlgeschlagene @import-, url()- und href-Anweisungen unterstrichen und es werden Inline-Fehler-Tooltips angezeigt.

• In der Konsole finden Sie jetzt nicht nur Links zu fehlgeschlagenen Anfragen, sondern auch Links zur genauen Zeile, in der auf ein Stylesheet verwiesen wird, das nicht geladen werden konnte.

• Im Bereich Netzwerk wird in der Spalte Initiator immer ein Link zur genauen Zeile angezeigt, in der auf ein Stylesheet verwiesen wird, das nicht geladen werden konnte.

• Im Bereich Probleme werden alle Probleme beim Laden von Stylesheets aufgeführt, einschließlich fehlerhafter URLs, fehlgeschlagener Anfragen und falsch platzierten @import-Anweisungen.

Chromium-Probleme: 1440626, 1442198, 1453611.

Unterstützung für lineare Zeitsteuerung unter „Elements“ > „Styles“ > „Easing Editor“

Im Easing-Editor unter Elemente > Stile können Sie transition-timing-function- und animation-timing-function-Werte mit einem Klick anpassen. In dieser Version wird die lineare Zeitsteuerungsfunktion für den Easing Editor eingeführt.

Klicken Sie zum Konfigurieren linearer Zeitangaben auf die Schaltfläche zur Auswahl linearer Zeitangaben. Wenn Sie einen Kontrollpunkt hinzufügen möchten, klicken Sie auf eine beliebige Stelle auf der Linie. Wenn Sie einen Kontrollpunkt entfernen möchten, doppelklicken Sie darauf. Sie können auch eine der Voreinstellungen auswählen: linear, elastic, bounce oder emphasized. Im Video sehen Sie, wie die lineare Anpassung funktioniert.

Chromium-Problem: 1421241.

Unterstützung von Speicher-Buckets und Metadatenansicht

Der Bereich Anwendung > Speicher unterstützt jetzt Speicher-Buckets. Speicher-Buckets sind unabhängig voneinander. Sie können also die Priorisierung für das Entfernen für Datensegmente festlegen und dafür sorgen, dass die wertvollsten Daten nicht gelöscht werden. In jedem Speicher-Bucket können Daten gespeichert werden, die mit etablierten Speicher-APIs wie IndexedDB und CacheStorage verknüpft sind.

Hier finden Sie ein Beispiel, mit dem Sie die Funktion testen können. Öffnen Sie die Entwicklertools, gehen Sie zu Anwendung > Speicher > Indexed DB und führen Sie den Code aus. In DevTools werden jetzt die Buckets und ihre Inhalte angezeigt. Wählen Sie einen Bucket aus, um die zugehörigen Metadaten anzusehen.

Die einheitliche Metadatenansicht ist jetzt auch für die Bereiche „Lokaler Speicher“, „Sitzungsspeicher“ und „Cache-Speicher“ verfügbar.

Chromium-Probleme: 1448011, 1406017.

Lighthouse 10.3.0

Im Bereich Lighthouse wird jetzt Lighthouse 10.3.0 ausgeführt. In dieser Version werden vier neue Audits hinzugefügt, die verschiedene Probleme mit der Barrierefreiheit von Tabellenüberschriften und Bildunterschriften, Namen von Eingabeschaltflächen und Sprachabweichungen erfassen. Beispiel:

Vollständige Liste der Änderungen Die Grundlagen zur Verwendung des Lighthouse-Bereichs in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558.

Bedienungshilfen: Tastaturbefehle und verbesserte Screenreader-Funktion

DevTools unterstützt jetzt mehr Tastenkombinationen und es wurden Probleme mit Screenreadern behoben:

• Sie können das Kontextmenü jetzt mit einer Tastenkombination öffnen, z. B. Umschalttaste + F10 unter Windows und vielen Linux-Distributionen. Informationen zu macOS-Tastenkombinationen finden Sie unter Alternative Zeigeraktionen.
• Screenreader-Apps:
  • Checkbox-Labels werden nicht unnötig zweimal angekündigt.
  • Die Namen der Spaltenüberschriften für sortierbare Spalten werden angesagt, wenn Sie die Tastenkombination „Spaltenüberschrift vorlesen“ drücken.

Das DevTools-Team bedankt sich bei Yanling Wang und Elorm Coch für die Umsetzung dieser Verbesserungen.

Chromium-Probleme: 1446482, 1414952.

Sonstige Highlights

Hier sind einige wichtige Fehlerbehebungen und Verbesserungen in dieser Version:

• Im Bereich Netzwerk wird die Netzwerkaktivität auch dann weiter aufgezeichnet, wenn Sie mit der Zeitachse interagiert haben (1422552).
• Im Bereich Abdeckung wird jetzt erkannt, ob eine Prerender-Aktivierung oder eine Back-Forward-Cache-Navigation stattgefunden hat. Sie werden aufgefordert, die Seite neu zu laden (1393057).
• Sie können jetzt mit der Tastatur im Bereich Quellen > Haltepunkte navigieren: Verwenden Sie Pfeil nach oben und Pfeil nach unten, um sich zu bewegen, und Leertaste, um auszuwählen (1446150).
• Das Hochladen und Filtern von HAR-Dateien im Bereich Netzwerk funktioniert jetzt wieder (1450622).
• Im Flamechart im Bereich Leistung werden jetzt kleine Lücken zwischen den Traces eingefügt, um sie besser darzustellen (1452150).
• Die automatische Zuordnung für in Quellzuordnungen eingebettete Dateien wurde korrigiert (1446383).

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

• Sie können uns Feedback und Funktionsanfragen unter crbug.com senden.
• Melden Sie ein DevTools-Problem in den Entwicklertools über das more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Senden Sie einen Tweet an @ChromeDevTools.
• Hinterlassen Sie Kommentare in den YouTube-Videos zu den Neuerungen in den DevTools oder den YouTube-Videos mit DevTools-Tipps.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.