Neuerungen in den Entwicklertools (Chrome 86)

Neuer Bereich „Media“

In den DevTools werden jetzt Informationen zu Mediaplayern im Media-Bereich angezeigt.

Vor dem neuen Media-Bereich in den Entwicklertools waren Protokollierungs- und Debugging-Informationen zu Videoplayern unter chrome://media-internals zu finden.

Im neuen Media-Bereich können Sie Ereignisse, Logs, Eigenschaften und eine Zeitachse der Frame-Decodierungen auf demselben Tab wie den Videoplayer ansehen. Sie können sich Live-Ansichten ansehen und potenzielle Probleme schneller untersuchen, z.B. warum es zu Frame-Drops kommt oder warum JavaScript auf unerwartete Weise mit dem Player interagiert.

Chromium-Problem: 1018414

Knoten-Screenshots über das Kontextmenü des Bereichs „Elemente“ aufnehmen

Sie können jetzt über das Kontextmenü im Bereich „Elemente“ Screenshots von Knoten erstellen.

Sie können beispielsweise einen Screenshot des Inhaltsverzeichnisses erstellen, indem Sie mit der rechten Maustaste auf das Element klicken und Knoten-Screenshot erstellen auswählen.

Chromium-Problem: 1100253

Aktualisierungen auf dem Tab „Probleme“

Die Warnleiste „Probleme“ im Konsolenbereich wurde durch eine normale Meldung ersetzt.

Probleme mit Drittanbieter-Cookies sind jetzt standardmäßig auf dem Tab „Probleme“ ausgeblendet. Aktivieren Sie das neue Kästchen Mit Problemen von Drittanbieter-Cookies, um sie aufzurufen.

Chromium-Probleme: 1096481, 1068116, 1080589

Fehlende lokale Schriftarten emulieren

Öffnen Sie den Tab „Rendering“ und verwenden Sie die neue Funktion Lokale Schriftarten deaktivieren, um fehlende local()-Quellen in @font-face-Regeln zu emulieren.

Wenn beispielsweise die Schriftart „Rubik“ auf Ihrem Gerät installiert ist und in der @font-face src-Regel als local()-Schriftart verwendet wird, verwendet Chrome die lokale Schriftartdatei von Ihrem Gerät.

Wenn Lokale Schriftarten deaktivieren aktiviert ist, werden die local()-Schriftarten in den DevTools ignoriert und aus dem Netzwerk abgerufen.

Oft verwenden Entwickler und Designer während der Entwicklung zwei verschiedene Kopien derselben Schriftart:

• Eine lokale Schriftart für Ihre Designtools
• Eine Web-Schriftart für Ihren Code

Wenn Sie lokale Schriftarten deaktivieren, können Sie:

• Ladeleistung und Optimierung von Webfonts debuggen und messen
• Korrektheit der @font-face-Regeln für Preisvergleichsportale prüfen
• Unterschiede zwischen Webfonts und ihren lokalen Versionen erkennen

Chromium-Problem: 384968

Inaktive Nutzer simulieren

Mit der Idle Detection API können Entwickler inaktive Nutzer erkennen und auf Änderungen des Leerlaufstatus reagieren. Sie können jetzt mit den DevTools Änderungen des Inaktivitätsstatus auf dem Tab Sensors sowohl für den Nutzer- als auch für den Bildschirmstatus emulieren, anstatt auf die tatsächliche Änderung des Inaktivitätsstatus zu warten. Sie können den Tab Sensoren über das Schubfach öffnen.

Chromium-Problem: 1090802

prefers-reduced-data emulieren

Die Media-Anfrage prefers-reduced-data erkennt, ob der Nutzer alternative Inhalte bevorzugt, bei denen weniger Daten für das Rendern der Seite verwendet werden.

Sie können jetzt mit den Entwicklertools die Media-Query prefers-reduced-data emulieren.

Chromium-Problem: 1096068

Unterstützung für neue JavaScript-Funktionen

DevTools bietet jetzt eine bessere Unterstützung für einige der neuesten JavaScript-Sprachfunktionen:

• Logische Zuweisungsoperatoren: DevTools unterstützt jetzt die logische Zuweisung mit den neuen Operatoren &&=, ||= und ??= in den Bereichen „Konsole“ und „Quellen“.
• Numerische Trennzeichen formatieren – DevTools formatiert jetzt die numerischen Trennzeichen im Bereich „Quellen“ korrekt.

Chromium-Probleme: 1086817, 1080569

Lighthouse 6.2 im Lighthouse-Bereich

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

Neue Prüfungen in Lighthouse 6.2:

• Lange Hauptthread-Aufgaben vermeiden: Listet die längsten Aufgaben im Hauptthread auf. Das ist nützlich, um die wichtigsten Ursachen für die Eingabeverzögerungen zu ermitteln.
• Links können gecrawlt werden: Prüfen Sie, ob das href-Attribut von Anchor-Elementen auf ein geeignetes Ziel verweist, damit die Links gefunden werden können.
• Bildelemente ohne Größenangabe: Prüfen Sie, ob für Bildelemente eine explizite width und height festgelegt ist. Wenn Sie die Bildgröße explizit angeben, können Sie Layoutverschiebungen reduzieren und den CLS-Wert verbessern.
• Nicht zusammengesetzte Animationen vermeiden: Berichte zu nicht zusammengesetzten Animationen, die nicht richtig gerendert werden und den CLS-Wert verringern.
• Wartet auf die unload-Ereignisse. Meldet das Ereignis unload. Möglicherweise ist es sinnvoll, stattdessen das pagehide- oder das visibilitychange-Ereignis zu verwenden, da das unload-Ereignis nicht zuverlässig ausgelöst wird.

Aktualisierte Prüfungen in Lighthouse 6.2:

• Nicht verwendetes JavaScript entfernen: Lighthouse optimiert die Prüfung, wenn für eine Seite öffentlich zugängliche JavaScript-Quellzuordnungen vorhanden sind.

Chromium-Problem: 772558

Einstellung der Auflistung „Andere Quellen“ im Bereich „Service Worker“

DevTools bietet jetzt einen Link, über den Sie die vollständige Liste der Service Worker aus anderen Quellen in einem neuen Browsertab aufrufen können: chrome://serviceworker-internals/?devtools.

Bisher wurde in den DevTools eine Liste unter Application > Service workers angezeigt.

Chromium-Problem: 807440

Zusammenfassung der Abdeckung für gefilterte Elemente anzeigen

DevTools berechnet jetzt dynamisch eine Zusammenfassung der Abdeckungsinformationen neu und zeigt sie an, wenn im Tab Abdeckung Filter angewendet werden. Bisher wurde auf dem Tab Abdeckung immer eine Zusammenfassung aller Abdeckungsinformationen angezeigt.

Im folgenden Beispiel sehen Sie, dass in der Zusammenfassung zuerst 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. und nach der CSS-Filterung 57 kB of 604 kB (10%) used so far. 546 kB unused. steht.

Chromium-Problem: 1061385

Neue Ansicht mit Frame-Details im Anwendungsbereich

In den Entwicklertools wird jetzt eine detaillierte Ansicht für jeden Frame angezeigt. Klicken Sie dazu im Bereich Anwendung im Menü Frames auf einen Frame.

Chromium-Problem: 1093247

Rahmendetails für geöffnete Fenster

In den DevTools werden geöffnete Fenster / Pop-ups jetzt auch im Frame-Baum angezeigt. Die Ansicht mit den Frame-Details der geöffneten Fenster enthält zusätzliche Sicherheitsinformationen.

Chromium-Problem: 1107766

Informationen zu Sicherheit und Isolation (COEP / COOP)

In den Entwicklertools werden jetzt sichere Kontexte, Cross-Origin-Embedder-Policy (COEP) und Cross-Origin-Opener-Policy (COOP) in den Frame-Details angezeigt.

Der Ansicht mit den Frame-Details werden demnächst weitere Sicherheitsinformationen hinzugefügt.

Chromium-Problem: 1051466

Aktualisierungen der Bereiche „Elemente“ und „Netzwerk“

Vorschläge für barrierefreie Farben im Bereich „Stile“

In den Entwicklertools werden jetzt Farbvorschläge für Text mit geringem Farbkontrast angezeigt.

Im Beispiel unten hat h1 Text mit niedrigem Kontrast. Um das Problem zu beheben, öffnen Sie die Farbauswahl der color-Eigenschaft im Bereich „Stile“. Nachdem Sie den Bereich Kontrastverhältnis maximiert haben, werden in den DevTools Farbvorschläge für AA und AAA angezeigt. Klicken Sie auf die vorgeschlagene Farbe, um sie anzuwenden.

Chromium-Problem: 1093227

Bereich Eigenschaften im Elementbereich wiederherstellen

Der Bereich „Eigenschaften“ ist wieder da. Er wurde in Chrome 84 eingestellt. In einer zukünftigen Version von DevTools werden wir den Workflow zum Untersuchen von Elementattributen verbessern.

Chromium-Problem: 1105205, 1116085

Menschenlesbare X-Client-Data-Headerwerte im Netzwerkbereich

Wenn Sie eine Netzwerkressource im Bereich „Netzwerk“ untersuchen, werden alle X-Client-Data-Headerwerte im Bereich „Header“ jetzt als Code formatiert.

Der HTTP-Header X-Client-Data enthält eine Liste von Test-IDs und Chrome-Flags, die in Ihrem Browser aktiviert sind. Die Rohheaderwerte sehen wie undurchsichtige Strings aus, da sie base64-codierte, serialisierte Protocol Buffers sind. Damit die Inhalte für Entwickler transparenter sind, werden in den DevTools jetzt die decodierten Werte angezeigt.

Chromium-Problem: 1103854

Benutzerdefinierte Schriftarten im Bereich „Stile“ automatisch vervollständigen

Importierte Schriftarten werden jetzt der Liste der CSS-Autovervollständigung hinzugefügt, wenn die Eigenschaft font-family im Bereich Styles bearbeitet wird.

In diesem Beispiel ist 'Noto Sans' eine benutzerdefinierte Schriftart, die auf dem lokalen Computer installiert ist. Sie wird in der Liste der CSS-Vervollständigung angezeigt. Das war bisher nicht der Fall.

Chromium-Problem: 1106221

Ressourcentyp im Netzwerkbereich einheitlich anzeigen

In DevTools wird jetzt immer derselbe Ressourcentyp wie bei der ursprünglichen Netzwerkanfrage angezeigt. Außerdem wird dem Wert der Spalte Typ bei einer Weiterleitung (Status 302) / Redirect angehängt.

Bisher hat DevTools den Typ manchmal in Other geändert.

Chromium-Problem: 997694

Schaltflächen zum Löschen im Bereich „Elemente“ und im Netzwerkbereich

Die Filtertextfelder im Bereich Stile und im Bereich Netzwerk sowie das DOM-Suchtextfeld im Bereich Elemente haben jetzt Löschen-Schaltflächen. Wenn Sie auf Löschen klicken, wird der eingegebene Text entfernt.

Chromium-Problem: 1067184

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.

• Sie können uns Feedback und Funktionsanfragen unter crbug.com senden.
• Melden Sie ein DevTools-Problem in den Entwicklertools über das more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Senden Sie einen Tweet an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu Neuerungen in den DevTools oder den YouTube-Videos mit DevTools-Tipps.

Neu in den Entwicklertools

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