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.

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.

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.

   

   Abbildung 4. Netzwerkbereich

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

   

   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.

   

   Abbildung 6. WebSocket-Verbindung prüfen

4. Klicken Sie auf den Tab Nachrichten.

   

   Abbildung 7. Tab „Nachrichten“

5. Klicken Sie auf einen der Einträge Binary Message, um ihn zu 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 , um die Binärnachricht in die Zwischenablage zu kopieren.

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.

   

   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.

   

   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.

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

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.

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.

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.

• Senden Sie uns Feedback und Funktionsanfragen unter crbug.com.
• Melden Sie ein DevTools-Problem über das Dreipunkt-Menü more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Tweeten Sie an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu den Neuigkeiten in den DevTools oder den YouTube-Videos mit Tipps zu den DevTools.

Neu in den DevTools

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