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
• Markieren Sie Textknoten im DOM-Baum.
• 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. „Inhalte weitgehend gezeichnet“ im Bereich „Timing“

Textknoten hervorheben

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

Abbildung 2. Textknoten markieren

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, kann aber für jeden DOM-Knoten verwendet werden.

Abbildung 3. JS-Pfad kopieren

In den DevTools wird ein Ausdruck wie der folgende in die Zwischenablage kopiert:

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

Aktualisierungen des Bereichs „Audits“

Im Bereich „Audits“ wird jetzt Lighthouse 3.2 verwendet. Version 3.2 enthält eine neue Prüfung namens JavaScript-Bibliotheken erkannt. 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. Gefundene JavaScript-Bibliotheken

Außerdem können Sie jetzt über das Befehlsmenü auf das Steuerfeld „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 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.