Neuerungen in den Entwicklertools (Chrome 84)

Kayce Basques

Probleme mit dem neuen Tab „Probleme“ beheben

Mit dem neuen Tab Probleme im seitlichen Menü soll die Anzahl der Benachrichtigungen reduziert und die Übersichtlichkeit der Console verbessert werden. Derzeit ist die Console der zentrale Ort, an dem Websiteentwickler, Bibliotheken, Frameworks und Chrome selbst Nachrichten, Warnungen und Fehler protokollieren. Auf dem Tab „Probleme“ werden Warnungen des Browsers auf strukturierte, aggregierte und umsetzbare Weise angezeigt. Außerdem finden Sie dort Links zu den betroffenen Ressourcen in den DevTools und eine Anleitung zur Behebung der Probleme. Im Laufe der Zeit werden immer mehr Chrome-Warnungen auf dem Tab „Probleme“ und nicht mehr in der Console angezeigt. Dadurch sollte die Console übersichtlicher werden.

Weitere Informationen finden Sie unter Probleme mit dem Tab „Probleme“ in den Chrome-Entwicklertools finden und beheben.

Den Tab „Probleme“.

Chromium-Fehler: #1068116

Informationen zur Barrierefreiheit in der Kurzinfo zum Inspektionsmodus aufrufen

In der Tooltip-Funktion des Inspektionsmodus wird jetzt angezeigt, ob das Element einen barrierefreien Namen und eine barrierefreie Rolle hat und über die Tastatur fokussiert werden kann.

Die Kurzinfo zum Prüfmodus mit Informationen zur Barrierefreiheit.

Chromium-Fehler: #1040025

Aktualisierungen des Bereichs „Leistung“

Informationen zur Gesamtblockierzeit (Total Blocking Time, TBT) in der Fußzeile aufrufen

Nachdem Sie die Ladeleistung erfasst haben, werden im Bereich „Leistung“ in der Fußzeile Informationen zur Gesamtblockierungszeit (Total Blocking Time, TBT) angezeigt. Die TBT ist ein Messwert für die Ladeleistung, mit dem sich quantifizieren lässt, wie lange es dauert, bis eine Seite nutzbar ist. Es wird im Wesentlichen gemessen, 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 Messwert zur Schätzung der First Input Delay, einer der neuen Core Web Vitals von Google.

Wenn Sie Informationen zur Blockierungszeit insgesamt erhalten möchten, verwenden Sie nicht den Workflow Seite aktualisieren Seite aktualisieren, um die Leistung beim Laden der Seite zu erfassen. Klicken Sie stattdessen auf Aufzeichnen Eintrag, 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, bedeutet das, dass die Entwicklertools die erforderlichen Informationen nicht aus den internen Profilierungsdaten von Chrome erhalten haben.

Informationen zur Blockierungszeit insgesamt in der Fußzeile einer Aufzeichnung im Bereich „Leistung“.

Chromium-Fehler: #1054381

Layout Shift-Ereignisse im Bereich „Neue Version“

Im neuen Bereich Website des Bereichs „Leistung“ können Sie Layoutänderungen erkennen. Der Messwert „Cumulative Layout Shift“ (CLS) ist einer der neuen Core Web Vitals von Google. Mit ihm lässt sich unerwünschte visuelle Instabilität quantifizieren.

Klicken Sie auf ein Ereignis vom Typ Layoutänderung, um die Details der Layoutänderung auf dem Tab Zusammenfassung aufzurufen. Bewegen Sie den Mauszeiger auf die Felder Verschoben von und Verschoben nach, um zu sehen, wo die Layoutänderung stattgefunden hat.

Die Details einer Layoutänderung.

Genauere Terminologie für Zusagen in der Console

Beim Logging 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 „erledigt“.

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

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

V8-Fehler: #6751

Änderungen am Bereich „Stile“

Unterstützung für das Keyword revert

Die Autocomplete-Benutzeroberfläche im Bereich „Styles“ erkennt jetzt das CSS-Schlüsselwort revert, mit dem der kaskadierte Wert einer Property auf den Wert zurückgesetzt wird, der hätte festgelegt werden, wenn keine Änderungen am Stil des Elements vorgenommen worden wären.

Legen Sie den Wert einer Property so fest, dass er rückgängig gemacht wird.

Chromium-Fehler: #1075437

Bildvorschauen

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

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

Chromium-Fehler: #1040019

In der Farbauswahl wird jetzt die zeilenweise Funktionsfarbnotation verwendet

CSS Color Module Level 4 legt fest, dass Farbfunktionen wie rgb() zeilenweise getrennte Argumente unterstützen sollten. rgb(0, 0, 0) entspricht beispielsweise rgb(0 0 0).

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

Argumente im Bereich „Stile“ durch Leerzeichen voneinander trennen

Die Syntax wird auch im Bereich „Berechnet“ und in der Kurzinfo zum Inspektionsmodus angezeigt.

In den DevTools wird die neue Syntax verwendet, da anstehende CSS-Funktionen wie color() die veraltete kommagetrennte Argumentsyntax nicht unterstützen.

Die Syntax mit Leerzeichen zwischen den Argumenten wird in den meisten Browsern schon seit einiger Zeit unterstützt. Weitere Informationen finden Sie unter Kann ich durch Leerzeichen getrennte Notationen für Funktionsfarben verwenden?

Chromium-Fehler: #1072952

Einstellung des Bereichs Eigenschaften im Bereich „Elemente“

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

Der nicht mehr unterstützte Bereich „Eigenschaften“

Referenzen:

Unterstützung für App-Verknüpfungen im Manifestbereich

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

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

App-Verknüpfungen im Bereich „Manifest“

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.