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 konnten Informationen über Videoplayer gefunden in chrome://media-internals.

Das neue Steuerfeld „Medien“ bietet eine einfachere Möglichkeit, Ereignisse, Protokolle, Eigenschaften und eine Zeitachse des Frames aufzurufen. wird im selben Browsertab wie der Videoplayer decodiert. Sie können einen Livestream ansehen und mögliche Probleme schneller erkennen (z.B. warum Frames ausgelassen werden, warum JavaScript mit auf unerwartete Weise auftreten).

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, indem Sie mit der rechten Maustaste auf das Element klicken und Wählen Sie Knoten-Screenshot aufnehmen 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. Aktivieren Sie das neue Feld Einschließen Probleme mit Drittanbieter-Cookies, um sie aufzurufen.

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 Schriftarten zu emulieren. local() Quellen in @font-face-Regeln.

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

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

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 bei Inaktivität reagieren. Änderungen. Sie können jetzt die Entwicklertools verwenden, um Änderungen des Inaktivitätsstatus auf dem Tab Sensoren sowohl für die Nutzerstatus und Bildschirmstatus ändern, anstatt darauf zu warten, dass sich der tatsächliche Inaktivitätsstatus ändert. Sie können in der Leiste den Tab Sensoren.

Inaktive Nutzer emulieren

Chromium-Problem: 1090802

prefers-reduced-data emulieren

Die Medienabfrage prefers-reduced-data erkennt, ob der Nutzer eine alternative Anzeige vorzieht Content, bei dem für das Rendering 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 der neuen die Operatoren &&=, ||= und ??= in der Konsole und im Bereich „Quellen“.
  • Quelltextformatierung für numerische Trennzeichen: Die Entwicklertools bieten jetzt eine ordnungsgemäße 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. In den Versionshinweisen finden Sie die vollständige Liste der Änderungen.

Bildgröße ändern

Neue Prüfungen in Lighthouse 6.2:

  • Vermeiden Sie lange Hauptthread-Aufgaben. Meldet die längsten Aufgaben im Hauptthread, nützlich für und identifizieren, die am stärksten zur Eingabeverzögerung beitragen.
  • Links können gecrawlt werden. Prüfen Sie, ob das Attribut href von Anchor-Elementen auf ein geeignetes damit die Links auch 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 instabil und die CLS reduzieren.
  • Wartet auf die unload-Ereignisse. Meldet das unload-Ereignis. Verwenden Sie gegebenenfalls die pagehide oder visibilitychange-Ereignisse, da das unload-Ereignis 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änglichen JavaScript-Quellzuordnungen.

Chromium-Problem: 772558

Einstellung „andere Ursprünge“ im Bereich „Service Workers“

Die Entwicklertools bieten jetzt einen Link zur vollständigen Liste der Service Worker anderer Ursprünge in einem neuen Browsertab – chrome://serviceworker-internals/?devtools.

Zuvor wurde in den Entwicklertools eine Liste angezeigt, die im Bereich Application (Anwendung) verschachtelt ist. Service Worker .

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 Filter werden auf dem Tab Abdeckung angewendet. Bisher wurde auf dem Tab Abdeckung immer ein Zusammenfassung aller Abdeckungsinformationen.

Beachten Sie im folgenden Beispiel, wie die Zusammenfassung anfangs lautete 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. und sagt dann: 57 kB of 604 kB (10%) used so far. 546 kB unused., 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 ihn aufrufen, indem Sie auf einen Frame unter dem Bereich Frames klicken. im Bereich Anwendung.

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. In der Detailansicht des Frames der geöffneten Fenster enthalten zusätzliche Sicherheitsinformationen.

Details zum geöffneten Fensterrahmen

Chromium-Problem: 1107766

Informationen zu Sicherheit und Isolation (COEP / COOP)

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

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 die Farbauswahl von color, um das Problem zu beheben. im Bereich „Stile“. Nachdem Sie den Bereich Kontrastverhältnis maximiert haben, bietet die Entwicklertools AA und AAA-Farbvorschläge. 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 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 aktivierten Test-IDs und Chrome-Flags in Ihrem Browser. Die Header-Rohwerte sehen aus wie opake Strings, da sie base-64-codiert sind. serialisierten Protokollzwischenspeichern. Um die Inhalte für Entwickler transparenter zu machen, werden die Entwicklertools mit den decodierten Werten.

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

Chromium-Problem: 1103854

Benutzerdefinierte Schriftarten im Bereich „Stile“ automatisch vervollständigen

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

In diesem Beispiel ist 'Noto Sans' eine benutzerdefinierte Schriftart, die auf dem lokalen Computer installiert ist. Es wird angezeigt in der Preisvergleichsportal-Abschlussliste. Zuvor war dies nicht der Fall.

Benutzerdefinierte Schriftarten automatisch vervollständigen

Chromium-Problem: 1106221

Ressourcentyp immer im Netzwerkbereich anzeigen

In den Entwicklertools wird jetzt konsistent der gleiche Ressourcentyp wie in der ursprünglichen Netzwerkanfrage angezeigt. hängt / Redirect an den Wert der Spalte Typ an, wenn eine 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"

Über die Filtertextfelder im Bereich Stile und im Bereich Netzwerk sowie im DOM-Suchtext im Steuerfeld Elemente finden Sie jetzt die Schaltfläche Löschen. Wenn Sie auf Löschen klicken, wird der gesamte Text entfernt, Sie haben Input.

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.
  • Problem mit den Entwicklertools über Weitere Optionen melden Mehr > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
  • 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