Wat is er nieuw in DevTools (Chrome 72)

Kayce Basken

Nieuwe functies en grote veranderingen voor Chrome DevTools in Chrome 72 zijn onder meer:

Videoversie van deze releaseopmerkingen

Visualiseer prestatiestatistieken

Na het registreren van het laden van een pagina , markeert DevTools nu prestatiestatistieken zoals DOMContentLoaded en First Meaningful Paint in de sectie Timings .

Eerste betekenisvolle verf in de sectie Timing

Figuur 1 . Eerste betekenisvolle verf in de sectie Timing

Markeer tekstknooppunten

Wanneer u over een tekstknooppunt in de DOM-structuur beweegt, markeert DevTools nu dat tekstknooppunt in de viewport.

Een tekstknooppunt markeren

Figuur 2 . Een tekstknooppunt markeren

Kopieer JS-pad

Stel dat u een automatiseringstest schrijft waarbij u op een knooppunt klikt (misschien met de functie page.click() van Puppeteer) en u wilt snel een verwijzing naar dat DOM-knooppunt krijgen. De gebruikelijke workflow is om naar het paneel Elementen te gaan, met de rechtermuisknop op het knooppunt in de DOM-structuur te klikken, Kopiëren > Kopieerselector te selecteren en die CSS-selector vervolgens door te geven aan document.querySelector() . Maar als het knooppunt zich in een schaduw-DOM bevindt, werkt deze aanpak niet omdat de selector een pad oplevert vanuit de schaduwboom.

Als u snel een verwijzing naar een DOM-knooppunt wilt krijgen, klikt u met de rechtermuisknop op het DOM-knooppunt en selecteert u Kopiëren > JS-pad kopiëren . DevTools kopieert een document.querySelector() -expressie naar uw klembord die naar het knooppunt verwijst. Zoals hierboven vermeld, is dit vooral handig bij het werken met Shadow DOM, maar je kunt het voor elk DOM-knooppunt gebruiken.

Kopieer JS-pad

Figuur 3 . Kopieer JS-pad

DevTools kopieert een expressie zoals hieronder naar uw klembord:

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

Updates van het auditpaneel

Het paneel Audits draait nu Lighthouse 3.2 . Versie 3.2 bevat een nieuwe audit genaamd Detected JavaScript-bibliotheken . Deze audit geeft aan welke JS-bibliotheken Lighthouse op de pagina heeft gedetecteerd. U vindt deze audit in uw rapport onder Best Practices > Geslaagde audits .

Gedetecteerde JavaScript-bibliotheken

Figuur 4 . Gedetecteerde JavaScript-bibliotheken

U kunt nu ook toegang krijgen tot het Audits-paneel vanuit het Commandomenu door Lighthouse of PWA te typen.

Typ 'vuurtoren' in het opdrachtmenu

Figuur 5 . lighthouse typen in het opdrachtmenu

Download de voorbeeldkanalen

Overweeg om Chrome Canary , Dev of Beta te gebruiken als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

  • Stuur ons een suggestie of feedback via crbug.com .
  • Rapporteer een DevTools-probleem met behulp van de opties MeerMeer > Help > Rapporteer een DevTools-probleem in DevTools.
  • Tweet op @ChromeDevTools .
  • Laat reacties achter op onze Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .

Wat is er nieuw in DevTools

Een lijst met alles wat aan bod is gekomen in de serie Wat is er nieuw in DevTools .