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 Zeitachsen unter „Elemente“ > „Stile“ > „Easing-Editor“

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.

Wenn du lineare Zeitangaben konfigurieren möchtest, klicke auf die Schaltfläche „Lineare Auswahl“. 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 Inhalt 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, Eingabeschalternamen 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

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 werden Netzwerkaktivitäten auch dann aufgezeichnet, wenn Sie mit der Zeitachse interagiert haben (1422552).
  • Im Bereich Abdeckung wird jetzt erkannt, ob die Vorabrendering-Funktion aktiviert wurde oder die Navigation im Back-Forward-Cache verwendet wurde. In diesem Fall werden Sie zum Aktualisieren aufgefordert (1393057).
  • Sie können den Bereich Quellen > Unterbrechungen 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 Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

Neu in den DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.