Neuerungen in den Entwicklertools (Chrome 74)

Kayce Basques

Willkommen zurück! Das ist neu:

Videoversion dieser Seite

Alle Knoten hervorheben, die von der CSS-Eigenschaft betroffen sind

Bewegen Sie den Mauszeiger auf eine CSS-Eigenschaft, die sich auf das Box-Modell eines Knotens auswirkt, z. B. padding oder margin, um alle Knoten hervorzuheben, die von dieser Deklaration betroffen sind.

Wenn Sie den Mauszeiger auf ein Margin-Attribut bewegen, werden alle Knoten hervorgehoben, die von dieser Deklaration betroffen sind.

Abbildung 1. Wenn Sie den Mauszeiger auf eine margin-Property bewegen, werden die Ränder aller Knoten hervorgehoben, die von dieser Deklaration betroffen sind.

Lighthouse v4 im Bereich „Audits“

Bei der neuen Prüfung Größe von Tippzielen ist nicht richtig eingestellt wird überprüft, ob interaktive Elemente wie Schaltflächen und Links auf Mobilgeräten groß genug und ausreichend weit voneinander entfernt sind.

Für die PWA-Kategorie eines Berichts wird jetzt ein Bewertungssystem für Logos verwendet.

Das neue Bewertungssystem für die PWA-Kategorie

Abbildung 3. Das neue Bewertungssystem für die PWA-Kategorie

WebSocket-Binärnachrichtenanzeige

So rufen Sie den Inhalt einer binären WebSocket-Nachricht auf:

  1. Öffnen Sie den Bereich Netzwerk. Unter Netzwerkaktivität überprüfen finden Sie die Grundlagen der Analyse der Netzwerkaktivität.

    Netzwerkbereich

    Abbildung 4. Netzwerkbereich

  2. Klicken Sie auf WS, um alle Ressourcen herauszufiltern, die keine WebSocket-Verbindungen sind.

    Nach dem Klicken auf „WS“ werden nur WebSocket-Verbindungen angezeigt

    Abbildung 5. Nach dem Klicken auf „WS“ werden nur WebSocket-Verbindungen angezeigt.

  3. Klicken Sie auf den Namen einer WebSocket-Verbindung, um sie zu prüfen.

    WebSocket-Verbindung prüfen

    Abbildung 6. WebSocket-Verbindung prüfen

  4. Klicken Sie auf den Tab Nachrichten.

    Tab „Nachrichten“

    Abbildung 7. Tab „Nachrichten“

  5. Klicken Sie auf einen der Einträge Binary Message, um ihn zu prüfen.

    Binäre Nachricht prüfen

    Abbildung 8. Binäre Nachricht prüfen

Über das Drop-down-Menü unten in der Anzeige können Sie die Nachricht in Base64 oder UTF-8 konvertieren. Klicken Sie auf In Zwischenablage kopieren In Zwischenablage kopieren, um die Binärnachricht in die Zwischenablage zu kopieren.

Binäre Nachricht als Base64 ansehen

Abbildung 9. Binäre Nachricht als Base64 ansehen

Screenshot des Bereichs zum Aufnehmen im Befehlsmenü

Mit Bereichsscreenshots können Sie einen Screenshot eines Teils des Darstellungsbereichs erstellen. Diese Funktion gibt es schon länger, aber der Zugriff darauf war ziemlich versteckt. Screenshots von Bereichen sind jetzt über das Menü „Befehle“ verfügbar.

  1. Legen Sie den Fokus auf die Entwicklertools und drücken Sie dann Strg + Umschalttaste + P oder Befehlstaste + Umschalttaste + P (Mac), um das Befehlsmenü zu öffnen.

    Das Befehlsmenü

    Abbildung 10. Das Befehlsmenü

  2. Geben Sie area ein, wählen Sie Screenshots von Bereichen erfassen aus und drücken Sie die Eingabetaste.

  3. Ziehen Sie den Mauszeiger über den Bereich des Ansichtsbereichs, von dem Sie einen Screenshot erstellen möchten.

    Darstellungsbereich für Screenshot auswählen

    Abbildung 11. Darstellungsbereich für Screenshot auswählen

Service Worker-Filter im Bereich „Netzwerk“

Geben Sie im Filtertextfeld des Bereichs „Netzwerk“ is:service-worker-initiated oder is:service-worker-intercepted ein, um Anfragen aufzurufen, die von einem Dienst-Worker verursacht (initiated) oder möglicherweise geändert (intercepted) wurden.

Nach „is:service-worker-initiated“ filtern

Abbildung 12. Filtern nach is:service-worker-initiated

Nach „is:service-worker-intercepted“ filtern

Abbildung 13. Filtern nach is:service-worker-intercepted

Weitere Informationen zum Filtern von Netzwerkprotokollen finden Sie unter Ressourcen filtern.

Aktualisierungen des Bereichs „Leistung“

In Leistungsaufzeichnungen werden jetzt lange Aufgaben und First Paint gekennzeichnet.

Im Hilfeartikel Weniger Arbeit für den Hauptthread finden Sie ein Beispiel dafür, wie Sie mit dem Bereich „Leistung“ die Seitenladeleistung analysieren.

Lange Aufgaben in Leistungsaufzeichnungen

In Leistungsaufzeichnungen werden jetzt lange Aufgaben angezeigt.

Mauszeiger in einer Leistungsaufzeichnung auf eine lange Aufgabe bewegen

Abbildung 14. Mauszeiger in einer Leistungsaufzeichnung auf eine lange Aufgabe bewegen

„First Paint“ im Bereich „Timings“

Im Abschnitt „Timings“ einer Leistungsaufzeichnung wird jetzt „First Paint“ markiert.

„First Paint“ im Bereich „Timings“

Abbildung 15. „First Paint“ im Bereich „Timings“

Neue DOM-Anleitung

Im Artikel Einführung in das DOM finden Sie eine praktische Einführung in DOM-bezogene Funktionen.

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

Neu in den DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.