Neuerungen in den Entwicklertools (Chrome 72)

Kayce Basques

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

• Leistungsmesswerte im Bereich „Leistung“ visualisieren
• Textknoten in der DOM-Struktur markieren
• Kopieren Sie den JS-Pfad aus dem DOM-Baum in einen DOM-Knoten.
• Aktualisierungen des Bereichs „Audits“, einschließlich einer neuen Prüfung, mit der JS-Bibliotheken erkannt werden, und neuer Keywords, mit denen Sie über das Menü „Befehle“ auf den Bereich „Audits“ zugreifen können.

Videoversion dieser Versionshinweise

Leistungsmesswerte visualisieren

Nachdem Sie einen Seitenaufbau aufgezeichnet haben, werden in den DevTools jetzt Leistungsmesswerte wie DOMContentLoaded und First Meaningful Paint im Bereich Timings markiert.

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

Textknoten hervorheben

Wenn Sie den Mauszeiger auf einen Textknoten in der DOM-Struktur bewegen, wird dieser Textknoten jetzt in Entwicklertools im Darstellungsbereich hervorgehoben.

Abbildung 2. Textknoten hervorheben

JS-Pfad kopieren

Angenommen, Sie schreiben einen Automatisierungstest, bei dem Sie auf einen Knoten klicken (z. B. mit der Funktion page.click() von Puppeteer) und schnell eine Referenz auf diesen DOM-Knoten erhalten möchten. Normalerweise klicken Sie im Bereich „Elemente“ mit der rechten Maustaste auf den Knoten im DOM-Baum, wählen Kopieren > Selektor kopieren aus und übergeben diesen CSS-Selektor an document.querySelector(). Wenn sich der Knoten jedoch in einem Shadow-DOM befindet, funktioniert dieser Ansatz nicht, da der Selektor einen Pfad innerhalb des Shadow-Baums zurückgibt.

Wenn Sie schnell einen Verweis auf einen DOM-Knoten erhalten möchten, klicken Sie mit der rechten Maustaste auf den DOM-Knoten und wählen Sie Kopieren > JS-Pfad kopieren aus. In den DevTools wird ein document.querySelector()-Ausdruck in die Zwischenablage kopiert, der auf den Knoten verweist. Wie bereits erwähnt, ist dies besonders hilfreich bei der Arbeit mit Shadow DOM. Sie können die Funktion jedoch für jeden DOM-Knoten verwenden.

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 Bereichs „Audits“

Im Bereich „Audits“ wird jetzt Lighthouse 3.2 ausgeführt. Version 3.2 enthält eine neue Prüfung namens Erkannte JavaScript-Bibliotheken. In dieser Prüfung werden die JS-Bibliotheken aufgeführt, die Lighthouse auf der Seite erkannt hat. 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

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Zugriff auf die neuesten DevTools-Funktionen, ermöglichen den Test moderner Webplattform-APIs 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 Entwicklertools

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