Diese Seite wurde von der Cloud Translation API übersetzt.

Neu in den Entwicklertools (Chrome 116)

Sofia Emelianova

Verbessertes Debugging für fehlende Stylesheets

Für die Entwicklertools wurden eine Reihe von Verbesserungen vorgenommen, damit Sie Probleme mit fehlenden Stylesheets schneller erkennen und beheben können:

In der Baumstruktur Quellen > Seite werden jetzt nur die erfolgreich bereitgestellten und geladenen Stylesheets angezeigt, um Verwirrung zu vermeiden.
Unter Quellen > Editor werden jetzt Inline-Kurzinfos zu Fehlern neben den fehlgeschlagenen @import-, url()- und href-Anweisungen angezeigt.

Unterstrichene Anweisungen mit Kurzinfos im Bereich „Quellen“.

In der Console finden Sie neben den Links zu fehlgeschlagenen Anfragen jetzt auch Links zur genauen Zeile, die auf ein nicht geladenes Stylesheet verweist.

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

Im Bereich Netzwerk werden in die Spalte Initiator immer Links zu genau der Zeile eingefügt, 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 falscher @import-Anweisungen.

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

Chromium-Probleme: 1440626, 1442198, 1453611.

Unterstützung für lineares Timing unter „Elemente“ > „Stile“ > „Easing-Editor“

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

Klicken Sie auf die Schaltfläche für die lineare Auswahl, um das lineare Timing zu konfigurieren. Klicken Sie auf eine beliebige Stelle auf der Linie, um einen Kontrollpunkt hinzuzufügen. Wenn Sie einen Kontrollpunkt entfernen möchten, klicken Sie doppelt 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 für Storage-Buckets und Metadatenansicht

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

Hier kannst du die Funktion testen. Öffnen Sie die Entwicklertools, gehen Sie zu Application > Storage > Indexed DB und führen Sie den Code aus. In den Entwicklertools werden jetzt die Buckets und deren Inhalte angezeigt. Wählen Sie einen Bucket aus, um seine Metadaten anzusehen.

Metadaten eines Buckets ansehen

Die einheitliche Metadatenansicht ist jetzt auch für die Bereiche „Lokal“, „Sitzung“ und „Cachespeicher“ 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. Besonders hervorzuheben sind bei dieser Version vier neue Prüfungen, die verschiedene Probleme mit der Barrierefreiheit im Zusammenhang mit Tabellenheadern und Untertiteln, Namen der Eingabeschaltflächen und nicht übereinstimmenden Sprachen erfassen. Beispiel:

Eine bestandene Prüfung von Tabellenüberschriften.

Eine vollständige Liste der Änderungen finden Sie hier. Informationen zu den Grundlagen der Verwendung des Steuerfelds Lighthouse in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558.

Bedienungshilfen: Tastaturbefehle und verbesserte Screenreader

Die Entwicklertools unterstützen jetzt mehr Tastenkombinationen und Behebung von Problemen mit Screenreadern:

Sie können das Kontextmenü jetzt über eine Tastenkombination öffnen, z. B. unter Windows und vielen Linux-Distributionen mit Umschalttaste + F10. Die Tastenkombinationen unter macOS finden Sie unter Alternative Zeigeraktionen.
Screenreader-Anwendungen:
- Kästchenlabels werden nicht unnötig zweimal angesagt.
- Die Spaltenüberschriften für sortierbare Spalten werden angekündigt, wenn Sie die Tastenkombination „Spaltenüberschrift vorlesen“ drücken.

Das DevTools-Team bedankt sich bei Yanling Wang und Elorm Coch dafür, dass diese Verbesserungen umgesetzt wurden.

Chromium-Probleme: 1446482, 1414952.

Sonstige Highlights

Dies sind einige bemerkenswerte Korrekturen und Verbesserungen in dieser Version:

Im Bereich Netzwerk werden die Netzwerkaktivitäten auch nach Ihrer Interaktion mit der Zeitachse (1422552) weiterhin aufgezeichnet.
Im Bereich Abdeckung wird jetzt erkannt, ob die Pre-Rendering-Aktivierung oder die Navigation im Back-Forward-Cache stattgefunden hat, und Sie werden zum Aktualisieren aufgefordert (1393057).
Sie können jetzt mit der Tastatur im Bereich Quellen > Haltepunkte navigieren: Aufwärtspfeil und Abwärtspfeil zum Verschieben und Leertaste zum Auswählen (1446150).
Fehler beim Hochladen und Filtern von HAR-Dateien im Bereich Netzwerk (1450622) wurden korrigiert.
Flamechart im Bereich Leistung schließt jetzt kleine Lücken zwischen Traces, um sie besser zu rendern (1452150).
Die automatische Zuordnung für Dateien, die in Quellkarten eingebettet sind, wurde korrigiert (1446383).

Vorschaukanäle herunterladen

Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

Sende uns über crbug.com Vorschläge oder Feedback.
Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen > Hilfe > Probleme mit den Entwicklertools melden.
Senden Sie einen Tweet an @ChromeDevTools.
Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.