Neuerungen in den Entwicklertools (Chrome 72)

Kayce Basques

Zu den neuen Funktionen und wichtigen Änderungen in den Chrome-Entwicklertools in Chrome 72 gehören:

• Im Bereich „Leistung“ können Sie Leistungsmesswerte visualisieren.
• Textknoten in der DOM-Struktur hervorheben
• Kopieren Sie den JS-Pfad aus der DOM-Struktur in einen DOM-Knoten.
• Aktualisierungen des Audit-Bereichs, einschließlich einer neuen Prüfung, die JS-Bibliotheken und neue Keywords für über das Befehlsmenü auf den Bereich „Audits“ (Audits) zugreifen.

Videoversion dieser Versionshinweise

Leistungsmesswerte visualisieren

Nach dem Erfassen eines Seitenaufbaus markiert die Entwicklertools jetzt Leistungsmesswerte wie DOMContentLoaded und First Meaningful Paint im Abschnitt Timings.

Abbildung 1. „First Meaningful Paint“ im Bereich „Timing“

Textknoten hervorheben

Wenn Sie den Mauszeiger auf einen Textknoten in der DOM-Struktur bewegen, hebt Entwicklertools diesen Textknoten jetzt im Darstellungsbereich.

Abbildung 2. Textknoten markieren

JS-Pfad kopieren

Angenommen, Sie schreiben einen Automatisierungstest, bei dem auf einen Knoten (mithilfe der page.click()) und Sie möchten schnell einen Verweis auf diesen DOM-Knoten abrufen. Die Gehen Sie normalerweise zum Steuerfeld „Elemente“, klicken Sie mit der rechten Maustaste auf den Knoten in der DOM-Struktur, wählen Sie Kopieren > Kopieren Sie den Selektor und übergeben Sie diesen CSS-Selektor an document.querySelector(). Wenn aber Der Knoten befindet sich in einem Shadow DOM. Diese Vorgehensweise funktioniert nicht, da der Selektor einen Pfad von innerhalb des Schattenbaums.

Um schnell einen Verweis auf einen DOM-Knoten zu erhalten, klicken Sie mit der rechten Maustaste auf den DOM-Knoten und wählen Sie Kopieren > JS kopieren Pfad. Die Entwicklertools kopiert einen document.querySelector()-Ausdruck in deine Zwischenablage, der auf den Knoten. Wie bereits erwähnt, ist dies besonders hilfreich bei der Arbeit mit Shadow DOM. Sie können aber auch für jeden DOM-Knoten.

Abbildung 3. JS-Pfad kopieren

Die Entwicklertools kopiert einen Ausdruck wie den folgenden in die Zwischenablage:

document.querySelector('#demo1').shadowRoot.querySelector('p:nth-child(2)')

Aktualisierungen des Audit-Bereichs

Im Bereich „Audits“ wird jetzt Lighthouse 3.2 ausgeführt. Version 3.2 enthält eine neue Prüfung namens Erkannte JavaScript-Bibliotheken. Bei dieser Prüfung wird aufgeführt, in welchen JS-Bibliotheken Lighthouse festgestellt wurde auf der Seite. Sie finden diese Prüfung in Ihrem Bericht unter Best Practices > Bestandene Prüfungen:

Abbildung 4. Erkannte JavaScript-Bibliotheken

Außerdem können Sie jetzt über das Befehlsmenü auf den Bereich „Audits“ zugreifen, indem Sie Lighthouse oder PWA eingeben.

Abbildung 5. lighthouse in das Befehlsmenü eingeben

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhalten Sie Zugriff auf die neuesten Entwicklertools, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, bevor Ihre 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 > 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