Neu in den Entwicklertools (Chrome 116)

Sofia Emelianova
Sofia Emelianova
GitHub

Verbesserte Fehlerbehebung bei fehlenden Stylesheets

Die DevTools wurden um eine Reihe von Verbesserungen erweitert, mit denen sich Probleme mit fehlenden Stylesheets schneller erkennen und beheben lassen:

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

Unterstrichene Aussagen mit Kurzinfos im Bereich „Quellen“.

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

Die Console enthält Links zu den genauen Zeilen mit problematischen Anweisungen.

  • Im Bereich Netzwerk werden in der Spalte Initiator immer Links zur genauen Zeile angezeigt, die auf ein Stylesheet verweist, 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 platzierter @import-Anweisungen.

Der Bereich „Probleme“ mit Links zu Quellen und Anfragen.

Chromium-Probleme: 1440626, 1442198, 1453611.

Unterstützung für lineare Zeitachse unter „Elemente“ > „Stile“ > „Editor für Übergänge“

Im Ease-Editor Easing-Editor unter Elemente > Stile können Sie die Werte transition-timing-function und animation-timing-function mit einem Klick anpassen. In dieser Version wird der Ease-Editor Easing-Editor um die lineare Timingfunktion erweitert.

Klicken Sie auf die Schaltfläche für die lineare Auswahl, um lineare Zeitangaben zu konfigurieren. Klicken Sie auf eine beliebige Stelle auf der Linie, um einen Kontrollpunkt hinzuzufügen. 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 die lineare Anpassung in Aktion.

Chromium-Problem: 1421241

Unterstützung von Speicher-Buckets und Metadatenansicht

Der Bereich Anwendung > Speicher unterstützt jetzt Speicher-Buckets. Speicher-Buckets sind voneinander unabhängig. Sie können also eine Auslagerungspriorisierung für Datensegmente angeben 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.

In diesem Fiddle können Sie die Funktion testen. Öffnen Sie die DevTools, gehen Sie zu Application > Storage > Indexed DB und führen Sie den Code aus. In den DevTools werden jetzt die Buckets und deren Inhalte angezeigt. Wählen Sie einen Bucket aus, um die zugehörigen Metadaten aufzurufen.

Metadaten eines Buckets ansehen

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

Die neue einheitliche Metadatenansicht.

Chromium-Probleme: 1448011, 1406017.

Lighthouse 10.3.0

Im Bereich Lighthouse wird jetzt Lighthouse 10.3.0 ausgeführt. In dieser Version wurden vor allem vier neue Prüfungen hinzugefügt, die verschiedene Probleme mit der Barrierefreiheit bei Tabellenüberschriften und Beschriftungen, Namen von Eingabeschaltflächen und Sprachabweichungen erfassen. Beispiel:

Die Prüfung der Tabellenüberschriften hat bestanden.

Weitere Informationen finden Sie in der vollständigen Liste der Änderungen. Informationen zu den Grundlagen der Verwendung des Lighthouse-Steuerfelds in den DevTools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558

Bedienungshilfen: Tastaturbefehle und verbesserte Screenreader-Unterstützung

In den DevTools werden jetzt mehr Tastenkombinationen unterstützt und 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 Tastenkürzeln unter macOS finden Sie unter Alternative Zeigeraktionen.
  • Screenreader-Anwendungen:
    • Kästchenlabels werden nicht unnötig zweimal angesagt.
    • 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 diese Verbesserungen.

Chromium-Probleme: 1446482, 1414952.

Sonstige Highlights

Hier sind einige wichtige Fehlerkorrekturen und Verbesserungen in dieser Version:

  • Im Bereich Netzwerk wird die Netzwerkaktivität auch dann fortlaufend aufgezeichnet, wenn Sie mit der Zeitachse interagiert haben (1422552).
  • Im Bereich Abdeckung wird jetzt erkannt, ob eine Pre-Render-Aktivierung oder eine Back-/Forward-Cache-Navigation stattgefunden hat, und Sie werden zum Aktualisieren aufgefordert (1393057).
  • Sie können den Bereich Quellen > Bruchstellen jetzt mit der Tastatur bedienen: Pfeil nach oben und Pfeil nach unten zum Bewegen und Leertaste zum Auswählen (1446150).
  • Korrigiert: Upload und Filtern von HAR-Dateien im Bereich Netzwerk (1450622)
  • Im Bereich Leistung werden in Flammenkarten jetzt kleine Lücken zwischen den Spuren eingefügt, um sie besser darzustellen (1452150).
  • Die automatische Zuordnung für in Quellkarten eingebettete Dateien wurde korrigiert (1446383).

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Zugriff auf die neuesten DevTools-Funktionen, ermöglichen den Test moderner Webplattform-APIs und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Über die folgenden Optionen können Sie sich über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools austauschen.

Neu in den DevTools

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