Neuerungen in den Entwicklertools (Chrome 87)

Jecelyn Yeen

Neue Tools zur Fehlerbehebung für CSS Grid

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

CSS-Grid-Fehlerbehebung

Wenn auf ein HTML-Element auf Ihrer Seite display: grid oder display: inline-grid angewendet wird, sehen Sie im Bereich Elemente daneben das Symbol grid. Klicken Sie auf das Symbol, um die Anzeige eines Raster-Overlays auf der Seite zu aktivieren oder zu deaktivieren.

Der neue Bereich Layout enthält den Abschnitt Raster, in dem Sie verschiedene Optionen zum Anzeigen der Raster finden.

Weitere Informationen

Chromium-Problem: 1047356

Neuer WebAuthn-Tab

Sie können jetzt Authentifikatoren emulieren und die Web Authentication API auf dem neuen WebAuthn-Tab debuggen.

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 Debugging von WebAuthn. Entwickler benötigten physische Authentifikatoren, um ihre Webanwendung mit der Web Authentication API zu testen.

Auf dem neuen Tab WebAuthn können Webentwickler diese Authentifikatoren jetzt emulieren, ihre Funktionen anpassen und ihre Status prüfen, ohne dass physische Authentifikatoren erforderlich sind. Das erleichtert die Fehlerbehebung erheblich.

Weitere Informationen

Chromium-Problem: 1034663

Tools zwischen dem oberen und dem unteren Steuerfeld verschieben

In den Entwicklertools können Tools jetzt zwischen dem oberen und dem unteren Bereich verschoben werden. So können Sie zwei Tools gleichzeitig aufrufen.

Wenn Sie beispielsweise die Bereiche Elemente und Quellen gleichzeitig sehen möchten, können Sie mit der rechten Maustaste auf den Bereich Quellen klicken und Nach unten verschieben auswählen, um ihn nach unten zu verschieben.

Ans Ende verschieben

Sie können auch einen beliebigen Tab unten nach oben verschieben, indem Sie mit der rechten Maustaste auf einen Tab klicken und Nach oben verschieben auswählen.

An den Anfang verschieben

Chromium-Problem: 1075732

Aktualisierungen des Bereichs „Elemente“

Bereich „Berechnet“ in der Seitenleiste „Stile“ ansehen

Sie können jetzt im Bereich „Stile“ den Bereich Berechnete Seitenleiste ein- und ausblenden.

Der Bereich Seitenleiste mit berechneten Stilen im Bereich Stile ist standardmäßig minimiert. Klicken Sie auf die Schaltfläche, um sie umzuschalten.

Berechneter Seitenleistenbereich

Chromium-Problem: 1073899

CSS-Eigenschaften im Bereich „Berechnet“ gruppieren

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

Mit dieser neuen Gruppierungsfunktion ist es einfacher, im Bereich Berechnet zu navigieren (weniger Scrollen). Außerdem können Sie sich selektiv auf eine Reihe von zusammengehörigen Eigenschaften für die CSS-Prüfung konzentrieren.

Wählen Sie im Bereich Elemente ein Element aus. Aktivieren oder deaktivieren Sie das Kästchen Gruppe, um die CSS-Eigenschaften zu gruppieren oder die Gruppierung aufzuheben.

CSS-Properties gruppieren

Chromium-Probleme: 1096230, 1084673, 1106251

Lighthouse 6.4 im Lighthouse-Bereich

Im Bereich 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, diefont-display: optionalverwenden, vorab geladen wurden.
  • Gültige Quellzuordnungen: Prüft, ob eine Seite gültige Quellzuordnungen für große eigene JavaScript-Dateien hat.
  • [Experimentell] Große JavaScript-Bibliothek: Große JavaScript-Bibliotheken können die Ursache für schlechte Leistung sein. 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 „Zeitangaben“

Im Abschnitt „Zeitangaben“ einer Leistungsaufzeichnung werden jetzt performance.mark()-Ereignisse markiert.

Performance.mark-Ereignisse

Neue Filter resource-type und url im Netzwerkbereich

Mit den neuen Schlüsselwörtern resource-type und url im Netzwerkbereich können Sie Netzwerk-Anfragen filtern.

Verwenden Sie beispielsweise resource-type:image, um sich auf die Netzwerkanfragen zu konzentrieren, die Bilder sind.

Filter für Ressourcentypen

Weitere spezielle Keywords wie resource-type und url finden Sie unter Anfragen nach Attributen filtern.

Chromium-Probleme: 1121141, 1104188

Aktualisierungen der Ansicht mit Frame-Details

COEP- und COOP-Endpunkt reporting to anzeigen

Sie können jetzt den COEP-Endpunkt (Cross-Origin Embedder Policy) und den COOP-Endpunkt (Cross-Origin Opener Policy)reporting to im Abschnitt Sicherheit und Isolation aufrufen.

In der Reporting API wird ein neuer HTTP-Header, Report-To, definiert, mit dem Webentwickler Serverendpunkte angeben können, an die der Browser Warnungen und Fehler senden soll.

Berichterstellung zu Endpunkten

In diesem Artikel erfahren Sie mehr darüber, wie Sie COEP und COOP aktivieren und Ihre Website „cross-origin isolated“ machen.

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, die auf den Modus report-only festgelegt sind.

Nur-Berichtslabel

In diesem Video erfahren Sie, wie Sie Datenlecks verhindern und COOP und COEP auf Ihrer Website aktivieren können.

Chromium-Problem: 1051466

Settings wird aus dem Menü „Weitere Tools“ entfernt

Das Tool Settings im Menü „Weitere Tools“ wurde eingestellt. Öffnen Sie stattdessen die Einstellungen über das Hauptfeld.

Einstellungen im Hauptbereich

Chromium-Problem: 1121312

Experimentelle Funktionen

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

Im Bereich Übersicht über Preisvergleichsportale wird jetzt eine Liste von Texten mit geringem Farbkontrast auf Ihrer Seite angezeigt.

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

Probleme mit geringem Farbkontrast

Klicken Sie auf ein Element in der Liste, um es im Bereich Elemente zu öffnen. DevTools bietet automatische Farbvorschläge, mit denen Sie Text mit niedrigem Kontrast korrigieren können.

Chromium-Problem: 1120316

Tastenkombinationen in DevTools anpassen

Sie können jetzt die Tastenkombinationen für Ihre bevorzugten Befehle in den Entwicklertools anpassen.

Gehen Sie zu Einstellungen > Tastenkombinationen, bewegen Sie den Mauszeiger auf einen Befehl und klicken Sie auf die Schaltfläche Bearbeiten (Stiftsymbol), um die Tastenkombination anzupassen.

Tastenkürzel anpassen

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

Chromium-Problem: 174309

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.