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. „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.

Textknoten hervorheben

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.

JS-Pfad kopieren

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.

Gefundene JavaScript-Bibliotheken

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.

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 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.

Neu in den Entwicklertools

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