Neu in den Entwicklertools (Chrome 116)

Sofia Emelianova
Sofia Emelianova
GitHub

Verbesserte Fehlerbehebung bei fehlenden Stylesheets

Die Entwicklertools erhalten eine Reihe von Verbesserungen, mit denen Sie Probleme mit fehlenden Stylesheets schneller erkennen und beheben können:

  • Die Quellen > Seitenstruktur zeigt jetzt nur die erfolgreich bereitgestellten und geladenen Stylesheets an, um Verwechslungen zu vermeiden.
  • Die Quellen > Im Editor werden jetzt neben fehlgeschlagenen @import-, url()- und href-Anweisungen Inline-Fehlerkurzinfos unterstrichen und angezeigt.

Unterstrichene Aussagen mit Kurzinfos im Bereich „Quellen“.

  • Neben den Links zu fehlgeschlagenen Anfragen enthält die Console jetzt auch Links zu genau der Zeile, die auf ein nicht geladenes Stylesheet verweist.

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

  • Im Steuerfeld Netzwerk werden in der Spalte Initiator regelmäßig 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 aufgelistet, 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 lineares Timing unter „Elements“ > Stile > Easing-Editor

Den Easing-Editor. Easing-Editor unter Elemente > Über 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 Easing-Editor. die Funktion für lineares Timing.

Wenn Sie lineares Timing konfigurieren möchten, klicken Sie auf die entsprechende Schaltfläche. Klicken Sie zum Hinzufügen eines Kontrollpunkts auf eine beliebige Stelle auf der Linie. Um einen Kontrollpunkt zu entfernen, doppelklicken Sie darauf. Sie können auch eine der Voreinstellungen auswählen: linear, elastic, bounce oder emphasized. Sehen Sie sich das Video an, um die lineare Anpassung in Aktion zu sehen.

Chromium-Problem: 1421241.

Unterstützung von Storage-Buckets und Metadatenansicht

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

Sehen Sie sich diese Geige an, um die Funktion zu testen. Öffnen Sie die Entwicklertools, gehen Sie zu Application > Speicher > Indexed DB (Indexierte Datenbank) und führen Sie den Code aus. In den Entwicklertools werden jetzt die Buckets und deren Inhalt angezeigt. Wählen Sie einen Bucket aus, um seine Metadaten anzusehen.

Metadaten eines Buckets aufrufen

Die einheitliche Metadatenansicht ist jetzt auch für die Bereiche „Lokaler Speicher“, „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. Insbesondere wurden in dieser Version vier neue Prüfungen hinzugefügt, in denen verschiedene Probleme mit der Barrierefreiheit in Bezug auf Tabellenüberschriften und Untertitel, Namen der Eingabeschaltflächen und nicht übereinstimmende Sprachen berücksichtigt werden. Beispiel:

Eine bestandene Prüfung der Tabellenüberschriften.

Eine vollständige Liste der Änderungen finden Sie hier. Grundlegende Informationen zur Verwendung des Bereichs Lighthouse in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558.

Bedienungshilfen: Tastaturbefehle und verbesserte Screenreader-Funktion

Die Entwicklertools unterstützen jetzt mehr Tastenkombinationen und beheben Probleme mit Screenreadern:

  • Sie können das Kontextmenü jetzt mit einer Tastenkombination öffnen, z. B. mit Umschalttaste + F10 unter Windows und in vielen Linux-Distributionen. Informationen zu macOS-Tastenkombinationen finden Sie unter Alternative Zeigeraktionen.
  • Screenreader-Anwendungen: <ph type="x-smartling-placeholder">
      </ph>
    • Kästchenlabels werden nicht unnötigerweise zweimal angesagt.
    • Die Spaltenüberschriften für sortierbare Spalten werden angesagt, wenn Sie auf „Spaltenüberschrift lesen“ klicken. .

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

Chromium-Probleme: 1446482, 1414952.

Verschiedene Highlights

Im Folgenden sind einige bemerkenswerte Fehlerbehebungen und Verbesserungen in dieser Version aufgeführt:

  • Im Bereich Netzwerk wird die Netzwerkaktivität weiterhin aufgezeichnet, auch nachdem Sie mit der Zeitachse (1422552) interagiert haben.
  • Im Bereich Abdeckung wird jetzt angezeigt, ob eine Pre-Rendering-Aktivierung oder eine Back-Forward-Cache-Navigation erfolgt ist und Sie aufgefordert werden, die Seite neu zu laden (1393057).
  • Sie können jetzt im Bereich Quellen > Bereich Haltepunkte mit der Tastatur: Aufwärtspfeil und Abwärtspfeil zum Verschieben und Leertaste zum Auswählen (1446150)
  • Das Hochladen und Filtern von HAR-Dateien im Bereich Netzwerk wurde behoben (1450622).
  • In Flamechart werden im Bereich Leistung jetzt kleine Lücken zwischen Traces eingefügt, um sie besser zu rendern (1452150).
  • Die automatische Zuordnung für Dateien, die in Quellzuordnungen eingebettet sind, wurde korrigiert (1446383).

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 Mehr > 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