Neuerungen in den Entwicklertools (Chrome 72)

Kayce Basques

Zu den neuen Funktionen und wichtigen Änderungen, die in Chrome 72 in den Chrome-Entwicklertools eingeführt werden, gehören:

• Leistungsmesswerte im Bereich „Leistung“ visualisieren
• Textknoten im DOM-Baum hervorheben
• Kopieren Sie den JS-Pfad zu einem DOM-Knoten aus dem DOM-Baum.
• Aktualisierungen des Bereichs „Audits“, einschließlich eines neuen Audits, mit dem JS-Bibliotheken erkannt werden, und neuer Keywords für den Zugriff auf den Bereich „Audits“ über das Befehlsmenü.

Videoversion dieser Versionshinweise

Leistungsmesswerte visualisieren

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

Abbildung 1. „Inhalte weitgehend gezeichnet“ im Bereich „Timing“

Textknoten hervorheben

Wenn Sie mit dem Mauszeiger auf einen Textknoten in der DOM-Baumstruktur zeigen, wird dieser Textknoten jetzt im Darstellungsbereich hervorgehoben.

Abbildung 2. Textknoten hervorheben

JS-Pfad kopieren

Angenommen, Sie schreiben einen automatisierten Test, bei dem auf einen Knoten geklickt werden muss (vielleicht mit der Funktion page.click() von Puppeteer), und Sie möchten schnell einen Verweis auf diesen DOM-Knoten erhalten. Normalerweise gehen Sie dazu zum Bereich „Elemente“, klicken mit der rechten Maustaste auf den Knoten im DOM-Baum, wählen Kopieren > Selektor kopieren aus und übergeben diesen CSS-Selektor dann an document.querySelector(). Wenn sich der Knoten jedoch in einem Shadow-DOM befindet, funktioniert dieser Ansatz nicht, da der Selektor einen Pfad aus dem Shadow-Baum 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. DevTools kopiert einen document.querySelector()-Ausdruck, der auf den Knoten verweist, in die Zwischenablage. Wie oben erwähnt, ist dies besonders hilfreich bei der Arbeit mit Shadow DOM, aber Sie können es für jeden DOM-Knoten verwenden.

Abbildung 3. JS-Pfad kopieren

DevTools kopiert einen Ausdruck wie den folgenden in die Zwischenablage:

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

Aktualisierungen des Bereichs „Prüfungen“

Im Bereich „Prüfungen“ wird jetzt Lighthouse 3.2 ausgeführt. Version 3.2 enthält einen neuen Audit namens JavaScript-Bibliotheken erkannt. In dieser Prüfung wird aufgeführt, welche JS-Bibliotheken Lighthouse auf der Seite erkannt hat. Sie finden diesen Audit in Ihrem Bericht unter Best Practices > Bestandene Audits.

Abbildung 4. Erkannte JavaScript-Bibliotheken

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

Abbildung 5. lighthouse in das Befehlsmenü eingeben

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

• Sie können uns Feedback und Funktionsanfragen unter crbug.com senden.
• Melden Sie ein DevTools-Problem in den Entwicklertools über das more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Senden Sie einen Tweet an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu Neuerungen in den DevTools oder den YouTube-Videos mit DevTools-Tipps.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.