Neuerungen in den Entwicklertools (Chrome 84)

Kayce Basques

Websiteprobleme mit dem neuen Tab „Probleme“ beheben

Mit dem neuen Tab Issues (Probleme) in der Leiste sollen Benachrichtigungen überflüssig und unübersichtlich in der Console reduziert werden. Derzeit ist die Console der zentrale Ort für Websiteentwickler, Bibliotheken, Frameworks und Chrome selbst, um Meldungen, Warnungen und Fehler zu protokollieren. Auf dem Tab „Probleme“ werden Warnungen des Browsers in strukturierter, aggregierter und umsetzbarer Weise angezeigt. Außerdem enthält der Tab Links zu betroffenen Ressourcen in den Entwicklertools und Anleitungen zur Behebung der Probleme. Im Laufe der Zeit werden mehr und mehr Warnungen von Chrome auf dem Tab „Probleme“ und nicht in der Console angezeigt, was dazu beitragen sollte, dass die Konsole übersichtlicher ist.

Informationen zum Einstieg finden Sie im Artikel Probleme mit dem Tab „Probleme in den Chrome-Entwicklertools finden und beheben“.

Tab „Probleme“

Chromium-Fehler: #1068116

Informationen zur Barrierefreiheit in der Kurzinfo zum Prüfmodus ansehen

In der Kurzinfo zum Prüfmodus wird jetzt angezeigt, ob das Element einen zugänglichen Namen und eine Rolle hat und auf die Tastatur fokussierbar ist.

Die Kurzinfo zum Überprüfungsmodus mit Informationen zur Barrierefreiheit.

Chromium-Fehler: #1040025

Updates im Bereich „Leistung“

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

Nachdem Sie die Ladeleistung aufgezeichnet haben, werden im Bereich „Leistung“ in der Fußzeile jetzt Informationen zur Total Blocking Time (TBT) angezeigt. TBT ist ein Messwert für die Ladeleistung, mit dem Sie quantifizieren können, wie lange es dauert, bis eine Seite nutzbar ist. Er misst im Wesentlichen, wie lange eine Seite als nutzbar erscheint, weil ihr Inhalt auf dem Bildschirm gerendert wurde, aber ist nicht nutzbar, weil JavaScript den Hauptthread blockiert und die Seite daher nicht auf Nutzereingaben reagieren kann. TBT ist der wichtigste Lab-Messwert zur Schätzung des First Input Delay, einer der neuen Core Web Vitals von Google.

Wenn Sie Informationen zur gesamten Blockierzeit erhalten möchten, verwenden Sie nicht den Workflow Seite neu laden Seite aktualisieren, um die Leistung beim Seitenaufbau zu erfassen. Klicken Sie stattdessen auf Aufzeichnen Eintrag, aktualisieren Sie die Seite manuell, warten Sie, bis sie geladen ist, und beenden Sie die Aufzeichnung dann. Wenn Total Blocking Time: Unavailable angezeigt wird, haben die Entwicklertools nicht die benötigten Informationen aus den internen Profiling-Daten von Chrome abgerufen.

Informationen zur gesamten Blockierzeit in der Fußzeile einer Aufzeichnung im Leistungssteuerfeld.

Chromium-Fehler: #1054381

Layout Shift-Ereignisse im neuen Bereich „Experience“

Im neuen Bereich Leistung im Bereich „Leistung“ können Sie Layoutveränderungen erkennen. Cumulative Layout Shift (CLS) ist ein Messwert, mit dem Sie unerwünschte visuelle Instabilität quantifizieren können. Er gehört zu den neuen Core Web Vitals von Google.

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

Die Details eines Layout Shifts.

Genauere Promise-Terminologie in der Console

Beim Logging eines Promise wurde in der Console der Status von Promise fälschlicherweise als resolved beschrieben:

Ein Beispiel für die Konsole mit der alten Terminologie, in der „beseitigt“ verwendet wird.

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

Ein Beispiel für die Konsole mit der neuen Terminologie „ausgeführt“.

V8-Fehler: #6751

Aktualisierungen des Stilbereichs

Unterstützung für das Keyword revert

In der Benutzeroberfläche für die automatische Vervollständigung des Stilbereichs wird jetzt das CSS-Keyword revert erkannt. Dadurch wird der kaskadierte Wert einer Eigenschaft auf den Wert zurückgesetzt, den der Wert ohne Änderungen am Stil des Elements gewesen wäre.

Festlegen des Werts einer Eigenschaft, die zurückgesetzt werden soll.

Chromium-Fehler: #1075437

Bildvorschau

Bewegen Sie den Mauszeiger im Bereich „Stile“ auf einen background-image-Wert, um eine Vorschau des Bildes als Kurzinfo zu sehen.

Bewegen des Mauszeigers auf einen Hintergrundbildwert.

Chromium-Fehler: #1040019

In der Farbauswahl wird jetzt eine durch Leerzeichen getrennte funktionale Farbnotation verwendet

CSS-Farbmodulstufe 4 gibt an, dass Farbfunktionen wie rgb() durch Leerzeichen getrennte Argumente unterstützen sollen. rgb(0, 0, 0) entspricht beispielsweise rgb(0 0 0).

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

Durch Leerzeichen getrennte Argumente im Bereich „Stile“ verwenden.

Außerdem sehen Sie die Syntax im Bereich „Berechnet“ und in der Kurzinfo zum Prüfmodus.

Die Entwicklertools verwenden die neue Syntax, da neue CSS-Funktionen wie color() die verworfene Syntax für durch Kommas getrennte Argumente nicht unterstützen.

Die Syntax für durch Leerzeichen getrennte Argumente wird in den meisten Browsern bereits seit einiger Zeit unterstützt. Siehe Kann ich durch Leerzeichen getrennte funktionale Farbnotationen verwenden?

Chromium-Fehler: #1072952

Der Bereich Eigenschaften im Bereich „Elemente“ wird eingestellt

Der Bereich Eigenschaften im Steuerfeld Elemente wurde eingestellt. Führen Sie stattdessen console.dir($0) in der Console aus.

Der eingestellte Bereich „Eigenschaften“.

Referenzen:

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

App-Verknüpfungen helfen Nutzern, schnell gängige oder empfohlene Aufgaben in einer Web-App zu starten. Das Menü für 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 Mit App-Verknüpfungen Aufgaben schnell erledigen.

App-Verknüpfungen im Bereich „Manifest“.

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.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • 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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde gekündigt.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59