Neuerungen in den Entwicklertools (Chrome 87)

Neue Debugging-Tools für CSS Grid

Die Entwicklertools bieten jetzt eine bessere Unterstützung für das Debugging von CSS-Rastern.

Wenn auf ein HTML-Element auf Ihrer Seite display: grid oder display: inline-grid angewendet wird, sehen Sie im Bereich Elemente das Kennzeichen grid. Klicke auf das Badge, um die Anzeige ein- oder auszuschalten eines Raster-Overlays auf der Seite.

Der neue Bereich Layout hat einen Rasterbereich mit einer Reihe von Optionen zum Anzeigen des Raster.

Weitere Informationen finden Sie in der Dokumentation.

Chromium-Problem: 1047356

Neuer WebAuthn-Tab

Mit der neuen Funktion WebAuthn können Sie jetzt Authenticatoren emulieren und Fehler in der Web Authentication API beheben. .

Wähle Weitere Optionen > Weitere Tools > WebAuthn zum Öffnen des Tabs WebAuthn

Vor dem neuen Tab WebAuthn gab es in Chrome keine native Unterstützung für das WebAuthn-Debugging. Entwickler benötigten physische Authenticatoren, um ihre Webanwendung mit der Web Authentication API zu testen.

Mit dem neuen Tab WebAuthn können Webentwickler diese Authenticatoren jetzt emulieren, und ihren Status prüfen können, ohne dass physische Authenticatoren erforderlich sind. Dadurch wird die Fehlerbehebung viel einfacher.

In unserer Dokumentation erfahren Sie mehr über die WebAuthn-Funktion.

Chromium-Problem: 1034663

Tools zwischen dem oberen und unteren Steuerfeld verschieben

Die Entwicklertools unterstützen jetzt das Verschieben von Tools in Entwicklertools zwischen dem oberen und unteren Steuerfeld. Auf diese Weise können Sie zwei Tools gleichzeitig anzeigen.

Wenn Sie sich beispielsweise die Bereiche Elemente und Quellen gleichzeitig ansehen möchten, können Sie rechts Klicken Sie auf den Bereich Quellen und wählen Sie An das Ende verschieben aus, um ihn nach unten zu verschieben.

Ebenso können Sie einen beliebigen unteren Tab nach oben verschieben, indem Sie mit der rechten Maustaste auf einen Tab klicken und Verschieben nach nach oben.

Chromium-Problem: 1075732

Aktualisierungen des Steuerfelds „Elemente“

Bereich „Berechnete Seitenleiste“ im Bereich „Stile“ aufrufen

Sie können jetzt im Bereich „Stile“ den Bereich Berechnete Seitenleiste aktivieren und deaktivieren.

Der Bereich Berechnete Seitenleiste im Bereich Stile ist standardmäßig minimiert. Klicken Sie auf die Schaltfläche, umschalten.

Chromium-Problem: 1073899

CSS-Attribute im Bereich „Berechnet“ gruppieren

Sie können die CSS-Eigenschaften im Bereich Computed jetzt nach Kategorien gruppieren.

Diese neue Gruppierungsfunktion erleichtert die Navigation im Bereich Computed (weniger Scrollen) und konzentrieren Sie sich selektiv auf eine Reihe verwandter Eigenschaften für die CSS-Prüfung.

Wählen Sie im Steuerfeld Elemente ein Element aus. Klicken Sie das Kästchen Gruppieren an, um das Preisvergleichsportal zu gruppieren bzw. die Gruppierung aufzuheben. Eigenschaften.

Chromium-Probleme: 1096230, 1084673, 1106251

Lighthouse 6.4 im Lighthouse-Steuerfeld

Im Steuerfeld Lighthouse wird jetzt Lighthouse 6.4 ausgeführt. In den Versionshinweisen finden Sie die vollständige Liste der Änderungen.

Neue Prüfungen in Lighthouse 6.4:

• Schriftarten vorab laden: Prüft, ob alle Schriftarten, die font-display: optional verwenden, vorab geladen wurden.
• Gültige Quellzuordnungen. Prüft, ob eine Seite gültige Quellzuordnungen für umfangreiches eigenes JavaScript hat.
• [Experimentell] Große JavaScript-Bibliothek. Große JavaScript-Bibliotheken können zu schlechten die Leistung. Bei dieser Prüfung werden günstigere Alternativen zu gängigen, großen JavaScript-Bibliotheken vorgeschlagen, moment.js

Chromium-Problem: 772558

performance.mark() Ereignisse im Bereich „Timings“

Im Bereich Timings einer Leistungsaufzeichnung werden jetzt performance.mark() Ereignisse markiert.

Neue Filter für resource-type und url im Steuerfeld "Netzwerk"

Verwenden Sie die neuen Keywords resource-type und url im Steuerfeld "Netzwerk", um Netzwerkanfragen zu filtern.

Verwenden Sie beispielsweise resource-type:image, um sich auf die Netzwerkanfragen zu konzentrieren, bei denen es sich um Bilder handelt.

Informieren Sie sich unter Anfragen nach Properties filtern, um weitere spezielle Keywords wie resource-type zu finden. und url.

Chromium-Probleme: 1121141, 1104188

Aktualisierungen der Frame-Detailansicht

COEP- und COOP-reporting to-Endpunkt anzeigen

Sie können sich jetzt die COEP-Richtlinie (Cross-Origin Embedder Policy) und die Cross-Origin Opener-Richtlinie ansehen. (COOP)reporting to im Bereich Sicherheit & Isolation (Isolation).

Die Reporting API definiert den neuen HTTP-Header Report-To. Dieser gibt Webentwicklern die Möglichkeit, Serverendpunkte angeben, an die der Browser Warnungen und Fehler senden soll.

In diesem Artikel erfahren Sie mehr darüber, wie Sie COEP und COOP aktivieren und Ihre Website ursprungsübergreifend isoliert.

Chromium-Problem: 1051466

COEP- und COOP-Modus report-only anzeigen

In den Entwicklertools wird jetzt das Label report-only für COEP und COOP angezeigt, für das der Modus report-only festgelegt ist.

In diesem Video erfahren Sie, wie Sie Datenlecks vermeiden und COOP und COEP in Ihrer Website.

Chromium-Problem: 1051466

Einstellung von Settings im Menü „Weitere Tools“

Die Settings im Menü „Weitere Tools“ wurde eingestellt. Öffnen Sie im Hauptbereich die Einstellungen. .

Chromium-Problem: 1121312

Experimentelle Funktionen

Kontrastprobleme im Bereich „CSS-Übersicht“ ansehen und beheben

Im Bereich CSS-Übersicht wird jetzt eine Liste mit Texten Ihrer Seite mit geringem Farbkontrast angezeigt.

In diesem Beispiel weist die Demoseite ein Problem mit niedrigem Farbkontrast auf. Klicken Sie auf das Problem, um eine Liste der Elemente anzuzeigen, bei denen das Problem auftritt.

Klicken Sie auf ein Element in der Liste, um es im Steuerfeld Elemente zu öffnen. Entwicklertools bieten eine automatische Farbvorschlag, um Text mit geringem Kontrast korrigieren zu können.

Chromium-Problem: 1120316

Tastenkombinationen in den Entwicklertools anpassen

Du kannst jetzt die Tastenkombinationen für deine bevorzugten Befehle in den Entwicklertools anpassen.

Gehen Sie zu Einstellungen > Verknüpfungen: Bewegen Sie den Mauszeiger auf einen Befehl und klicken Sie auf die Schaltfläche Bearbeiten (Stiftsymbol). um die Tastenkombination anzupassen.

Wenn Sie alle Tastenkombinationen zurücksetzen möchten, klicken Sie auf Standardverknüpfungen wiederherstellen.

Chromium-Problem: 174309

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