Neuerungen in den Entwicklertools (Chrome 74)

Kayce Basques
Kayce Basques
X GitHub

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 Attribut für den Rand bewegen, werden alle Knoten hervorgehoben, die von dieser Deklaration betroffen sind.

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

Lighthouse v4 im Bereich „Prüfungen“

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

Für die PWA-Kategorie eines Berichts wird jetzt ein Badgesystem verwendet.

Das neue System zur Berechnung von Badges für die PWA-Kategorie

Abbildung 3. Das neue System zur Berechnung von Badges für die PWA-Kategorie

WebSocket-Binärnachrichten-Viewer

So sehen Sie sich den Inhalt einer binären WebSocket-Nachricht an:

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

    Der Netzwerkbereich

    Abbildung 4. Der Netzwerkbereich

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

    Nach dem Klicken auf „WS only“ werden nur WebSockety-Verbindungen angezeigt.

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

  3. Klicken Sie auf den Namen einer WebSocket-Verbindung, um sie zu untersuchen.

    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 unter Binary Message, um ihn zu prüfen.

    Binärnachrichten prüfen

    Abbildung 8. Binärnachrichten prüfen

Über das Drop-down-Menü unten im Viewer können Sie die Nachricht in Base64 oder UTF-8 konvertieren. Klicken Sie auf In Zwischenablage kopieren In Zwischenablage kopieren, um die binäre Nachricht in die Zwischenablage zu kopieren.

Binäre Nachricht als Base64 ansehen

Abbildung 9. Binäre Nachricht als Base64 ansehen

Screenshot vom Bereich im Befehlsmenü aufnehmen

Mit Bereichsscreenshots können Sie einen Screenshot eines Teils des Darstellungsbereichs erstellen. Diese Funktion gibt es schon länger, aber der Workflow für den Zugriff darauf war bisher ziemlich versteckt. Bereichs-Screenshots sind jetzt über das Befehlsmenü verfügbar.

  1. Fokusieren Sie die Entwicklertools und drücken Sie dann Strg + Umschalt + P oder Befehl + Umschalt + P (Mac), um das Befehlsmenü zu öffnen.

    Das Befehlsmenü

    Abbildung 10. Das Befehlsmenü

  2. Geben Sie area ein, wählen Sie Screenshots vom Erfassungsbereich aus und drücken Sie die Eingabetaste.

  3. Ziehen Sie die Maus über den Bereich des Ansichtsfensters, von dem Sie einen Screenshot erstellen möchten.

    Ausschnitt des Darstellungsbereichs für den Screenshot auswählen

    Abbildung 11. Ausschnitt des Darstellungsbereichs für den Screenshot auswählen

Service Worker-Filter im Bereich „Netzwerk“

Geben Sie im Textfeld des Filters für das Netzwerk-Panel is:service-worker-initiated oder is:service-worker-intercepted ein, um Anfragen aufzurufen, die von einem Service Worker verursacht (initiated) oder möglicherweise geändert (intercepted) wurden.

Filtern nach „is:service-worker-initiated“

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“ markiert.

Ein Beispiel für die Analyse der Seitenladeleistung mit dem Leistungspanel finden Sie unter Weniger Arbeit im Hauptthread.

Lange Aufgaben in Leistungsaufzeichnungen

In Leistungsaufzeichnungen werden jetzt lange Aufgaben angezeigt.

Mit dem Mauszeiger auf eine lange Aufgabe in einer Leistungsaufzeichnung zeigen

Abbildung 14. Mit dem Mauszeiger auf eine lange Aufgabe in einer Leistungsaufzeichnung zeigen

„First Paint“ im Bereich „Timings“

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

„First Paint“ im Bereich „Timings“

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

Neue DOM-Anleitung

Im Startleitfaden zum Ansehen und Ändern des DOM finden Sie eine praktische Einführung in DOM-bezogene Funktionen.

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.

Neu in den Entwicklertools

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