Neuerungen in den Entwicklertools (Chrome 72)

Kayce Basques

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

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.

„Inhalte weitgehend gezeichnet“ im Bereich „Timing“

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.

Textknoten hervorheben

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.

JS-Pfad kopieren

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.

Gefundene JavaScript-Bibliotheken

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.

Geben Sie „lighthouse“ in das Befehlsmenü ein.

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.

Neu in den DevTools

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