Neuerungen in den Entwicklertools (Chrome 86)

Jecelyn Yeen

Bereich „Neuer Medien“

In den Entwicklertools werden jetzt im Medienbereich Informationen zu Mediaplayern angezeigt.

Bereich „Neuer Medien“

Vor dem neuen Medienbereich in den Entwicklertools wurden Protokollierungs- und Fehlerbehebungsinformationen zu Videoplayern in chrome://media-internals abgerufen.

Das neue Steuerfeld „Medien“ bietet eine einfachere Möglichkeit, Ereignisse, Logs, Eigenschaften und eine Zeitachse der decodierten Frames auf demselben Browsertab anzusehen, auf dem sich auch der Videoplayer befindet. Du kannst den Livestream schneller ansehen und potenzielle Probleme schneller untersuchen, z.B. warum Frames ausgelassen wurden oder warum JavaScript auf unerwartete Weise mit dem Player interagiert.

Chromium-Problem: 1018414

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

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

Sie können beispielsweise einen Screenshot des Inhaltsverzeichnisses erstellen. Klicken Sie dazu mit der rechten Maustaste auf das Element und wählen Sie Screenshot erstellen aus.

Knoten-Screenshots aufnehmen

Chromium-Problem: 1100253

Aktualisierung des Tabs „Probleme“

Die Warnleiste im Bereich „Probleme“ der Konsole wird jetzt 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 anzuzeigen.

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

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

Fehlende lokale Schriftarten emulieren

Häufig verwenden Entwickler und Designer bei 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:

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

Chromium-Problem: 384968

Inaktive Nutzer emulieren

Mit der Idle Detection API können Entwickler inaktive Nutzer erkennen und auf Änderungen des Inaktivitätsstatus reagieren. Du kannst 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. Sie können den Tab Sensoren in der Leiste öffnen.

Inaktive Nutzer emulieren

Chromium-Problem: 1090802

prefers-reduced-data emulieren

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

Du kannst jetzt die Entwicklertools verwenden, um die prefers-reduced-data-Medienabfrage zu emulieren.

„präferenz-reduzierte-Daten“ 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“.
  • Klar gedruckte numerische Trennzeichen: Die Entwicklertools sorgen jetzt für eine korrekte Darstellung der numerischen Trennzeichen im Bereich „Quellen“.

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. Dies ist nützlich, um die Hauptverursacher zu identifizieren, die zur Eingabeverzögerung beitragen.
  • 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 Bildelemente ein explizites width und height festgelegt ist. Eine explizite Bildgröße kann Layoutverschiebungen reduzieren und den CLS verbessern.
  • Vermeiden Sie Animationen, die nicht zusammengesetzt sind. Meldet nicht zusammengesetzte Animationen, die langsam aussehen und die CLS-Werte reduzieren.
  • Wartet auf die unload-Ereignisse. Meldet das unload-Ereignis. Sie können stattdessen die Ereignisse pagehide oder visibilitychange verwenden, da das Ereignis unload nicht zuverlässig ausgelöst wird.

Aktualisierte Prüfungen in Lighthouse 6.2:

  • Nicht verwendetes JavaScript entfernen Lighthouse verbessert nun die Prüfung, wenn eine Seite öffentlich zugängliche JavaScript-Quellzuordnungen hat.

Chromium-Problem: 772558

Einstellung der Liste „Andere Ursprünge“ im Bereich „Service Worker“

Die Entwicklertools bieten jetzt einen Link, über den Sie die vollständige Liste der Service Worker anderer Ursprünge in einem neuen Browsertab ansehen können: chrome://serviceworker-internals/?devtools.

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

Link zu anderen Ursprüngen

Chromium-Problem: 807440

Zusammenfassung der Abdeckung für gefilterte Elemente einblenden

In den Entwicklertools wird jetzt eine Zusammenfassung der Abdeckungsinformationen dynamisch 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 wird in der Zusammenfassung zuerst 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. und dann 57 kB of 604 kB (10%) used so far. 546 kB unused. angezeigt, nachdem die CSS-Filterung angewendet wurde.

Zusammenfassung der Abdeckung für gefilterte Elemente

Chromium-Problem: 1061385

Neue Frame-Detailansicht im Anwendungsbereich

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

Neue Frame-Detailansicht im Anwendungsbereich

Chromium-Problem: 1093247

Framedetails für geöffnete Fenster

In den Entwicklertools werden geöffnete Fenster / Pop-ups jetzt auch 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

Informationen zu Sicherheit und Isolation (COEP / COOP)

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

Informationen zu Sicherheit und Isolation

In der Detailansicht des Frames 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 geringem Farbkontrast.

Im folgenden Beispiel enthält 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, werden in den Entwicklertools AA- und AAA-Farbvorschläge angezeigt. Klicken Sie auf die vorgeschlagene Farbe, um sie anzuwenden.

Chromium-Problem: 1093227

Den Bereich Eigenschaften im Bereich „Elemente“ wiederherstellen

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

Bereich „Eigenschaften“ im Bereich „Elemente“

Chromium-Problem: 1105205, 1116085

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

Bei der Untersuchung einer Netzwerkressource im Bereich „Netzwerk“ formatiert die Entwicklertools jetzt alle X-Client-Data-Headerwerte im Header-Bereich als Code.

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 es sich um base64-codierte, serialisierte Protokollzwischenspeicher handelt. Damit die Inhalte für Entwickler transparenter werden, 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 Stile bearbeitet wird.

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

Benutzerdefinierte Schriftarten automatisch vervollständigen

Chromium-Problem: 1106221

Ressourcentyp immer im Netzwerkbereich anzeigen

Die Entwicklertools zeigen jetzt konsistent denselben Ressourcentyp wie die ursprüngliche Netzwerkanfrage an und hängt / Redirect an den Wert in der Spalte Type an, wenn die Weiterleitung (Status 302) erfolgt.

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

Ressourcentyp für Weiterleitung anzeigen

Chromium-Problem: 997694

Löschen von Schaltflächen in den Steuerfeldern "Elemente" und "Netzwerk"

Für die Filtertextfelder im Bereich Stile und im Bereich Netzwerk sowie für das Textfeld für die DOM-Suche im Bereich Elemente gibt es jetzt die Schaltfläche Löschen. Wenn Sie auf Löschen klicken, wird der gesamte eingegebene Text entfernt.

Löschen von Schaltflächen in den Steuerfeldern "Elemente" und "Netzwerk"

Chromium-Problem: 1067184

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