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.

CSS-Raster-Debugging

Wenn auf ein HTML-Element auf Ihrer Seite display: grid oder display: inline-grid angewendet wurde, wird im Bereich Elemente daneben das Logo grid angezeigt. Klicken Sie auf das Badge, um ein Raster-Overlay auf der Seite einzublenden.

Der neue Bereich Layout hat einen Abschnitt Grid, der eine Reihe von Optionen zum Anzeigen der Raster bietet.

Weitere Informationen finden Sie in der Dokumentation.

Chromium-Problem: 1047356

Neuer WebAuthn-Tab

Auf dem neuen Tab WebAuthn können Sie jetzt Authenticatoren emulieren und Fehler in der Web Authentication API beheben.

Wählen Sie Weitere Optionen > Weitere Tools > WebAuthn aus, um den Tab „WebAuthn“ zu öffnen.

Tab „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 Authenticator jetzt emulieren, ihre Funktionen anpassen und ihren Status prüfen, ohne physische Authenticatoren zu benötigen. Dies vereinfacht die Fehlerbehebung.

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. So können Sie zwei beliebige Tools gleichzeitig anzeigen.

Wenn Sie beispielsweise die Bereiche Elemente und Quellen gleichzeitig ansehen möchten, können Sie mit der rechten Maustaste auf den Bereich Quellen klicken und An das Ende verschieben auswählen.

Ans Ende verschieben

Ebenso können Sie einen beliebigen unteren Tab nach oben verschieben. Klicken Sie dazu mit der rechten Maustaste auf einen Tab und wählen Sie An den Anfang verschieben aus.

An den Anfang verschieben

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, um sie zu wechseln.

Berechneter Seitenleistenbereich

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 erleichtert die selektive Konzentration auf eine Reihe verwandter Eigenschaften für die CSS-Prüfung.

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

CSS-Properties gruppieren

Chromium-Probleme: 1096230, 1084673, 1106251

Lighthouse 6.4 im Lighthouse-Steuerfeld

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

Leuchtturm

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 die Leistung beeinträchtigen. Bei dieser Prüfung werden günstigere Alternativen zu gängigen, großen JavaScript-Bibliotheken wie moment.js vorgeschlagen.

Chromium-Problem: 772558

performance.mark() Ereignisse im Bereich „Timings“

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

Performance.mark-Ereignisse

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.

Ressourcentypfilter

Unter Anfragen nach Properties filtern können Sie weitere spezielle Keywords wie resource-type und url ermitteln.

Chromium-Probleme: 1121141, 1104188

Aktualisierungen der Frame-Detailansicht

COEP- und COOP-reporting to-Endpunkt anzeigen

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

Die Reporting API definiert den neuen HTTP-Header Report-To. Damit haben Webentwickler die Möglichkeit, Serverendpunkte für den Browser anzugeben, an die Warnungen und Fehler gesendet werden.

an den Endpunkt melden

In diesem Artikel erfahren Sie, wie Sie COEP und COOP aktivieren und Ihre Website „ursprungsübergreifend isoliert“ machen können.

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.

Nur-Bericht-Label

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

Chromium-Problem: 1051466

Einstellung von Settings im Menü „Weitere Tools“

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

Einstellungen im Hauptbereich

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 aufzurufen, bei denen das Problem auftritt.

Probleme mit niedrigem Farbkontrast

Klicken Sie auf ein Element in der Liste, um es im Steuerfeld Elemente zu öffnen. In den Entwicklertools werden automatische Farbvorschläge angezeigt, damit Sie Text mit geringem Kontrast korrigieren 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.

Tastenkombinationen anpassen

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