Neuerungen in den Entwicklertools (Chrome 86)

Jecelyn Yeen

Neues Mediensteuerfeld

In den Entwicklertools werden jetzt Informationen zu Mediaplayern im Bereich „Medien“ angezeigt.

Neues Mediensteuerfeld

Vor der Einführung des neuen Medienbereichs in den Entwicklertools waren Logging- und Debug-Informationen zu Videoplayern unter chrome://media-internals verfügbar.

Das neue Steuerfeld „Medien“ bietet eine einfachere Möglichkeit, Ereignisse, Protokolle, Eigenschaften und eine Zeitachse der Frame-Decodierungen im selben Browsertab wie der Videoplayer anzusehen. Du kannst potenzielle Probleme schneller ansehen und prüfen, warum z.B. ausgelassene Frames auftreten oder warum JavaScript auf unerwartete Weise mit dem Player interagiert.

Chromium-Problem: 1018414

Knoten-Screenshots über das Kontextmenü des Steuerfelds „Elemente“ erfassen

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

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

Knoten-Screenshots aufnehmen

Chromium-Problem: 1100253

Aktualisierungen des Tabs „Probleme“

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

Probleme in der Konsolennachricht

Probleme mit Drittanbieter-Cookies werden jetzt standardmäßig auf dem Tab „Probleme“ ausgeblendet. Klicken Sie das neue Kästchen Probleme mit Drittanbieter-Cookies einschließen an, um sie zu sehen.

Kästchen für Probleme mit Drittanbieter-Cookies

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 die Regel @font-face src sie als Schriftart local() verwendet, verwendet Chrome die lokale Schriftartdatei von Ihrem Gerät.

Wenn Lokale Schriftarten deaktivieren aktiviert ist, ignorieren die Entwicklertools die local()-Schriftarten und rufen sie aus dem Netzwerk ab.

Fehlende lokale Schriftarten emulieren

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

  • eine lokale Schriftart für Ihre Designtools und
  • Eine Webschriftart für Ihren Code

Das Deaktivieren lokaler Schriftarten erleichtert Ihnen Folgendes:

  • Fehler beim Laden von Webschriftarten beheben und deren Leistung optimieren und Fehler beheben
  • Richtigkeit Ihrer @font-face-Regeln für Preisvergleichsportale prüfen
  • Unterschiede zwischen Webschriftarten und ihren lokalen Versionen erkennen

Chromium-Problem: 384968

Inaktive Nutzer emulieren

Mit der Idle Detection API können Entwickler inaktive Nutzer erkennen und auf Änderungen des Inaktivitätsstatus reagieren. Sie können jetzt die Entwicklertools verwenden, um Änderungen des Inaktivitätsstatus auf dem Tab Sensoren sowohl für den Nutzer- als auch den Bildschirmstatus zu emulieren, anstatt darauf zu warten, dass sich der tatsächliche Inaktivitätsstatus ändert. In der Leiste können Sie den Tab Sensoren öffnen.

Inaktive Nutzer emulieren

Chromium-Problem: 1090802

prefers-reduced-data emulieren

Mit der Medienabfrage prefers-reduced-data wird ermittelt, ob der Nutzer lieber alternative Inhalte sehen möchte, die weniger Daten verbrauchen, damit die Seite gerendert werden kann.

Sie können jetzt die Entwicklertools verwenden, um die prefers-reduced-data-Medienabfrage zu emulieren.

Daten-Reduzierung bevorzugt emulieren

Chromium-Problem: 1096068

Unterstützung neuer JavaScript-Funktionen

Die Entwicklertools bieten jetzt eine bessere Unterstützung für einige der neuesten JavaScript-Sprachfunktionen:

  • Logische Zuweisungsoperatoren: Die Entwicklertools unterstützen jetzt die logische Zuweisung mit den neuen Operatoren &&=, ||= und ??= in den Bereichen „Konsole“ und „Quellen“.
  • Numerische Trennzeichen im Quelltextformat: Die Entwicklertools geben die numerischen Trennzeichen im Bereich „Quellen“ jetzt korrekt aus.

Chromium-Probleme: 1086817, 1080569

Lighthouse 6.2 im Lighthouse-Steuerfeld

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

Bildgröße ändern

Neue Prüfungen in Lighthouse 6.2:

  • Vermeiden Sie lange Hauptthread-Aufgaben. Meldet die längsten Aufgaben im Hauptthread, um die größten Auswirkungen auf die Eingabeverzögerung zu finden.
  • Links können gecrawlt werden. Prüfen Sie, ob das Attribut href von Anchor-Elementen auf ein geeignetes Ziel verweist, damit die Links gefunden werden können.
  • Bildelemente ohne Größe: Prüfen Sie, ob für die Bildelemente eine explizite width und height festgelegt ist. Eine explizite Bildgröße kann Layoutverschiebungen reduzieren und den CLS-Wert verbessern.
  • Vermeiden Sie nicht zusammengesetzte Animationen. Meldet nicht zusammengesetzte Animationen, die langsam erscheinen und den CLS-Wert reduzieren.
  • Wartet auf unload-Ereignisse. Meldet das Ereignis unload. Sie sollten stattdessen das Ereignis pagehide oder visibilitychange verwenden, da das unload-Ereignis nicht zuverlässig ausgelöst wird.

Aktualisierte Prüfungen in Lighthouse 6.2:

  • Entfernen Sie nicht verwendetes JavaScript. In Lighthouse wird die Prüfung nun verbessert, wenn eine Seite öffentlich zugängliche JavaScript-Quellzuordnungen enthält.

Chromium-Problem: 772558

Eintrag „Andere Ursprünge“ im Bereich „Service Workers“ wird eingestellt

Die Entwicklertools bieten jetzt einen Link zum Ansehen der vollständigen Liste der Service Worker aus anderen Ursprüngen in einem neuen Browsertab: chrome://serviceworker-internals/?devtools.

Bisher wurde in den Entwicklertools eine Liste angezeigt, die im Bereich Anwendung > Dienst-Worker verschachtelt war.

Mit anderen Ursprüngen verknüpfen

Chromium-Problem: 807440

Zusammenfassung der Abdeckung für gefilterte Elemente anzeigen

In den Entwicklertools wird jetzt dynamisch eine Zusammenfassung der Abdeckungsinformationen neu berechnet und angezeigt, wenn auf dem Tab Abdeckung Filter angewendet werden. Bisher wurde auf dem Tab Abdeckung immer eine Zusammenfassung aller Informationen zur Abdeckung 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 Anwendung der CSS-Filterung dann 57 kB of 604 kB (10%) used so far. 546 kB unused. angezeigt wird.

Zusammenfassung der Abdeckung für gefilterte Elemente

Chromium-Problem: 1061385

Neue Frame-Detailansicht im Steuerfeld „Anwendung“

In den Entwicklertools wird jetzt eine Detailansicht für jeden Frame angezeigt. Sie können darauf zugreifen, indem Sie im Steuerfeld Anwendung im Menü Frames auf einen Frame klicken.

Neue Frame-Detailansicht im Steuerfeld „Anwendung“

Chromium-Problem: 1093247

Framedetails für geöffnete Fenster

In den Entwicklertools werden jetzt auch geöffnete Fenster / Pop-ups unter dem Frame-Baum angezeigt. Die Frame-Detailansicht der geöffneten Fenster enthält zusätzliche Sicherheitsinformationen.

Details zum geöffneten Fensterrahmen

Chromium-Problem: 1107766

Sicherheits- und Isolierungsinformationen (COEP / COOP)

Die Entwicklertools zeigen jetzt sicheren Kontext, Cross-Origin-Embedder-Policy (COEP) und Cross-Origin-Opener-Policy (COOP) in den Frame-Details an.

Sicherheits- und Isolierungsinformationen

Der Frame-Detailansicht werden demnächst weitere Sicherheitsinformationen hinzugefügt.

Chromium-Problem: 1051466

Aktualisierungen des Steuerfelds „Elemente und Netzwerk“

Barrierefreier Farbvorschlag im Bereich „Stile“

Die Entwicklertools bieten jetzt Farbvorschläge für Text mit niedrigem Farbkontrast.

Im Beispiel unten hat h1 Text mit geringem Kontrast. Öffnen Sie zum Beheben des Problems die Farbauswahl der Eigenschaft color im Bereich „Stile“. Nachdem Sie den Bereich Kontrastverhältnis maximiert haben, bieten die Entwicklertools AA- und AAA-Farbvorschläge. Klicken Sie auf die vorgeschlagene Farbe, um die Farbe anzuwenden.

Chromium-Problem: 1093227

Bereich Eigenschaften im Steuerfeld „Elemente“ wiederherstellen

Der Bereich „Eigenschaften“ ist wieder verfügbar. Er wurde in Chrome 84 eingestellt. In einer zukünftigen Version der Entwicklertools verbessern wir den Workflow für die Untersuchung der Eigenschaften von Elementen.

Bereich „Eigenschaften“ im Steuerfeld „Elemente“

Chromium-Problem: 1105205, 1116085

Für Menschen lesbare X-Client-Data-Headerwerte im Steuerfeld „Netzwerk“

Beim Untersuchen einer Netzwerkressource im Bereich „Network“ formatieren die Entwicklertools jetzt alle X-Client-Data-Header-Werte im Header-Bereich als Code.

Der HTTP-Header X-Client-Data enthält eine Liste mit Test-IDs und Chrome-Flags, die in deinem Browser aktiviert sind. Die Header-Rohdaten sehen wie intransparente Strings aus, da sie base-64-codierte,serialisierte Protokollzwischenspeicher sind. Um Entwicklern mehr Transparenz zu bieten, werden in den Entwicklertools jetzt die decodierten Werte angezeigt.

Für Menschen lesbare „X-Client-Data“-Headerwerte

Chromium-Problem: 1103854

Benutzerdefinierte Schriftarten im Bereich „Stile“ automatisch vervollständigen

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

In diesem Beispiel ist 'Noto Sans' eine benutzerdefinierte Schriftart, die auf dem lokalen Computer installiert ist. Sie wird in der CSS-Vervollständigungsliste angezeigt. Bisher nicht.

Benutzerdefinierte Schriftarten automatisch vervollständigen

Chromium-Problem: 1106221

Ressourcentyp wird einheitlich im Bereich „Netzwerk“ angezeigt

Die Entwicklertools zeigen jetzt konsistent denselben Ressourcentyp wie die ursprüngliche Netzwerkanfrage an und fügen / Redirect an den Spaltenwert Type (Typ) an, wenn eine Weiterleitung erfolgt (Status 302).

Bisher wurde der Typ in den Entwicklertools manchmal zu Other geändert.

Ressourcentyp der Displayweiterleitung

Chromium-Problem: 997694

Schaltflächen in den Bereichen Elemente und Netzwerk löschen

Die Filtertextfelder in den Bereichen Styles und Netzwerk sowie das Textfeld für die DOM-Suche im Bereich Elemente enthalten jetzt die Schaltfläche Löschen. Wenn Sie auf Löschen klicken, wird der gesamte eingegebene Text entfernt.

Schaltflächen in den Bereichen Elemente und Netzwerk löschen

Chromium-Problem: 1067184

Vorschaukanäle herunterladen

Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

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

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

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