Neuerungen in den Entwicklertools (Chrome 84)

Kayce Basques

Websiteprobleme mit dem neuen Tab „Probleme“ beheben

Der neue Tab Probleme in der Leiste soll dazu beitragen, dass Benachrichtigungen Konsole: Derzeit ist die Console der zentrale Ort für Website-Entwickler, Bibliotheken, Frameworks und Chrome selbst, um Meldungen, Warnungen und Fehler zu protokollieren. Auf dem Tab „Probleme“ werden strukturierte, aggregierte und entscheidungsrelevante Warnungen vom Browser, Links zu betroffenen in den Entwicklertools und bietet Anleitungen zum Beheben der Probleme. Im Laufe der Zeit der Chrome-Warnungen werden auf dem Tab "Probleme" und nicht in der Konsole angezeigt. um das Durcheinander in der Konsole zu reduzieren.

Informationen zum Einstieg finden Sie unter 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 angegeben, ob das Element einen zugänglichen Namen und eine Rolle hat. und ist auf die Tastatur fokussierbar.

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 die Ladeleistung erfasst wurde, wird im Bereich „Leistung“ jetzt die Gesamtblockierungszeit angezeigt. in der Fußzeile. TBT ist ein Messwert für die Lastleistung, mit dem Sie quantifizieren können, braucht eine Seite, damit sie nutzungsfreundlich wird. Sie misst im Wesentlichen, wie lange eine Seite nutzungsfreundlich erscheint. weil der Inhalt auf dem Bildschirm gerendert wurde, kann aber nicht verwendet werden, da JavaScript blockiert den Hauptthread, sodass die Seite nicht auf Nutzereingaben reagieren kann. TBT ist das Haupt-Lab Messwert zur Schätzung des First Input Delays. Dies ist einer der neuen Core Web Vitals von Google.

Um Informationen zur Gesamtblockierungszeit zu erhalten, verwenden Sie nicht die Seite neu laden. Seite aktualisieren zur Erfassung der Seitenladeleistung. Klicken Sie stattdessen auf Aufzeichnen. Eintrag, Laden Sie die Seite manuell neu, warten Sie, bis sie geladen ist, und beenden Sie die Aufzeichnung dann. Wenn Sie Total Blocking Time: Unavailable bedeutet, dass die Entwicklertools nicht die benötigten Informationen von Interne Profildaten von Chrome.

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 ist einer der neuen Core Web Vitals von Google.

Klicken Sie auf ein Ereignis vom Typ Layout Shift, um die Details dazu auf dem Tab Zusammenfassung zu sehen. Mauszeiger darauf bewegen über 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 Konsole der Status von Promise fälschlicherweise wie folgt beschrieben: resolved:

Ein Beispiel für die Konsole mit der alten Lösung Terminologie.

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

Beispiel für die Konsole mit dem neuen Feld „fulfilled“ Terminologie.

V8-Fehler: #6751

Aktualisierungen des Stilbereichs

Unterstützung für das Keyword revert

Die Benutzeroberfläche für die automatische Vervollständigung des Stilbereichs erkennt jetzt das CSS-Keyword revert, wodurch die den Wert einer Eigenschaft kaskadiert an den Wert, den der Wert gewesen wäre, wenn keine Änderungen am Stil des Elements anpassen.

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-Farbmodul Level 4 gibt an, dass Farbfunktionen wie rgb() unterstützt werden sollen. durch Leerzeichen getrennte Argumente. rgb(0, 0, 0) entspricht beispielsweise rgb(0 0 0).

Wenn Sie mit der Farbauswahl Farben auswählen oder zwischen den Farbdarstellungen in den Stile, indem Sie die Umschalttaste gedrückt halten und dann auf den Farbwert klicken. Argumentsyntax.

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 künftige CSS-Funktionen wie color() das nicht mehr unterstützte Syntax mit kommagetrennten Argumenten.

Die Syntax für durch Leerzeichen getrennte Argumente wird in den meisten Browsern bereits seit einiger Zeit unterstützt. Weitere Informationen finden Sie unter Kann ich Durch Leerzeichen getrennte funktionale Farbnotationen?

Chromium-Fehler: #1072952

Der Bereich Eigenschaften im Bereich „Elemente“ wird eingestellt

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

Der eingestellte Bereich „Eigenschaften“.

Referenzen:

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

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

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.
  • 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