Neuerungen in den Entwicklertools (Chrome 84)

Kayce Basques
Kayce Basques
X GitHub

Websiteprobleme mit dem neuen Tab „Probleme“ beheben

Der neue Tab Probleme in der Seitenleiste soll dazu beitragen, die Anzahl der Benachrichtigungen und die Unübersichtlichkeit der Konsole zu verringern. Derzeit ist die Konsole der zentrale Ort, an dem Website-Entwickler, Bibliotheken, Frameworks und Chrome selbst Nachrichten, Warnungen und Fehler protokollieren. Auf dem Tab „Probleme“ werden Warnungen des Browsers strukturiert, zusammengefasst und umsetzbar dargestellt. Außerdem werden Links zu betroffenen Ressourcen in den Entwicklertools bereitgestellt und es wird erläutert, wie die Probleme behoben werden können. Im Laufe der Zeit werden immer mehr Chrome-Warnungen auf dem Tab „Probleme“ anstelle der Konsole angezeigt. So soll die Konsole übersichtlicher werden.

Weitere Informationen

Der Tab „Probleme“

Chromium-Fehler: #1068116

Informationen zur Barrierefreiheit in der Kurzinfo zum Inspektionsmodus ansehen

In der Kurzinfo zum Prüfmodus wird jetzt angegeben, ob das Element einen barrierefreien Namen und eine barrierefreie Rolle hat und mit der Tastatur fokussierbar ist.

Die Kurzinfo zum Prüfmodus mit Informationen zur Barrierefreiheit.

Chromium-Fehler: #1040025

Aktualisierungen des Bereichs „Leistung“

Informationen zur Total Blocking Time (TBT) in der Fußzeile ansehen

Nachdem Sie die Ladeleistung aufgezeichnet haben, wird im Bereich „Leistung“ jetzt in der Fußzeile die Gesamtblockierungszeit (Total Blocking Time, TBT) angezeigt. TBT ist ein Messwert für die Ladeleistung, mit dem quantifiziert wird, wie lange es dauert, bis eine Seite nutzbar ist. Sie gibt im Grunde an, wie lange eine Seite scheinbar nutzbar ist (weil ihr Inhalt auf dem Bildschirm gerendert wurde), aber tatsächlich nicht nutzbar ist, weil JavaScript den Hauptthread blockiert und die Seite daher nicht auf Nutzereingaben reagieren kann. TBT ist der wichtigste Labormesswert zur Schätzung von First Input Delay (FID), einem der neuen Core Web Vitals von Google.

Wenn Sie Informationen zur gesamten Blockierungszeit erhalten möchten, dürfen Sie den Workflow Seite neu laden nicht verwenden, um die Seitenladeleistung aufzuzeichnen.Seite aktualisieren Klicken Sie stattdessen auf Aufzeichnen Aufnehmen, aktualisieren Sie die Seite manuell, warten Sie, bis die Seite geladen ist, und beenden Sie dann die Aufzeichnung. Wenn Sie Total Blocking Time: Unavailable sehen, haben die Entwicklertools nicht die erforderlichen Informationen aus den internen Profiling-Daten von Chrome erhalten.

Informationen zur gesamten Blockierungszeit in der Fußzeile einer Aufzeichnung eines Leistungsbereichs.

Chromium-Fehler: #1054381

Layoutverschiebungsereignisse im neuen Bereich „Erfahrung“

Im neuen Bereich Nutzerfreundlichkeit des Leistungsberichts können Sie Layoutverschiebungen erkennen. Cumulative Layout Shift (CLS) ist ein Messwert, mit dem sich unerwünschte visuelle Instabilität quantifizieren lässt. Er gehört zu den neuen Core Web Vitals von Google.

Klicken Sie auf ein Layout Shift-Ereignis, um die Details des Layout-Shifts auf dem Tab Zusammenfassung aufzurufen. Bewegen Sie den Mauszeiger auf die Felder Verschoben von und Verschoben nach, um zu sehen, wo die Layoutverschiebung aufgetreten ist.

Details zu einer Layoutverschiebung.

Genauere Terminologie für Zusagen in der Console

Beim Protokollieren eines Promise wurde der Status des Promise in der Console fälschlicherweise als resolved beschrieben:

Ein Beispiel für die Console mit der alten Terminologie „resolved“ (behoben).

In der Console wird jetzt der Begriff fulfilled verwendet, der der Promise-Spezifikation entspricht:

Beispiel für die Console mit der neuen Terminologie „erfüllt“.

V8-Fehler: #6751

Aktualisierungen im Bereich „Stile“

Unterstützung für das Keyword revert

Die Autocomplete-Benutzeroberfläche des Bereichs „Styles“ erkennt jetzt das CSS-Schlüsselwort revert. Damit wird der kaskadierende Wert einer Eigenschaft auf den Wert zurückgesetzt, den sie gehabt hätte, wenn keine Änderungen am Stil des Elements vorgenommen worden wären.

Legen Sie den Wert einer Property fest, der zurückgesetzt werden soll.

Chromium-Fehler: #1075437

Bildvorschauen

Bewegen Sie den Mauszeiger im Bereich „Stile“ auf einen background-image-Wert, um eine Vorschau des Bildes in einer Kurzinfo aufzurufen.

Bewegen Sie den Mauszeiger auf einen „background-image“-Wert.

Chromium-Fehler: #1040019

Die Farbauswahl verwendet jetzt die durch Leerzeichen getrennte funktionale Farbnotation.

Im CSS Color Module Level 4 wird festgelegt, dass Farbfunktionen wie rgb() durch Leerzeichen getrennte Argumente unterstützen sollten. rgb(0, 0, 0) entspricht beispielsweise rgb(0 0 0).

Wenn Sie Farben mit der Farbauswahl auswählen oder zwischen Farbdarstellungen im Bereich „Stile“ wechseln, indem Sie die Umschalttaste gedrückt halten und dann auf den Farbwert klicken, wird jetzt die durch Leerzeichen getrennte Argumentsyntax angezeigt.

Leerzeichengetrennte Argumente im Bereich „Stile“ verwenden

Die Syntax wird auch im Bereich „Berechnet“ und in der Kurzinfo für den Prüfmodus angezeigt.

DevTools verwendet die neue Syntax, weil bevorstehende CSS-Funktionen wie color() die eingestellte Argument-Syntax mit Kommas nicht unterstützen.

Die durch Leerzeichen getrennte Argumentsyntax wird in den meisten Browsern schon seit einiger Zeit unterstützt. Weitere Informationen finden Sie unter Kann ich durch Leerzeichen getrennte funktionale Farbnotationen verwenden?

Chromium-Fehler: #1072952

Das Steuerfeld Eigenschaften im Elementbereich wird eingestellt

Der Bereich Eigenschaften im Bereich Elemente wird nicht mehr unterstützt. Führen Sie console.dir($0) stattdessen in der Console aus.

Der eingestellte Eigenschaftenbereich.

Referenzen:

Unterstützung von App-Verknüpfungen im Manifestbereich

Mit App-Verknüpfungen können Nutzer schnell häufige oder empfohlene Aufgaben in einer Web-App starten. Das Menü mit App-Verknüpfungen wird nur für progressive Web-Apps angezeigt, die auf dem Desktop oder Mobilgerät des Nutzers installiert sind.

Weitere Informationen finden Sie unter Aufgaben mit App-Verknüpfungen schnell erledigen.

App-Verknüpfungen im Manifestbereich

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.

Neu in den Entwicklertools

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