Wat is er nieuw in DevTools (Chrome 72)

Kayce Basques

Nieuwe functies en belangrijke wijzigingen voor Chrome DevTools in Chrome 72 zijn onder andere:

• Visualiseer prestatiestatistieken in het paneel Prestaties.
• Markeer tekstknooppunten in de DOM-boom.
• Kopieer het JavaScript-pad naar een DOM-knooppunt vanuit de DOM-structuur.
• Updates voor het auditpaneel , waaronder een nieuwe audit die JavaScript-bibliotheken detecteert en nieuwe trefwoorden voor toegang tot het auditpaneel vanuit het opdrachtmenu.

Videoversie van deze release notes

Visualiseer prestatiestatistieken

Na het vastleggen van een paginalading , markeert DevTools nu prestatiegegevens zoals DOMContentLoaded en First Meaningful Paint in het gedeelte Timings .

Figuur 1. Eerste betekenisvolle verf in het timinggedeelte.

Markeer tekstknooppunten

Wanneer je met de muis over een tekstknooppunt in de DOM-structuur beweegt, wordt dat tekstknooppunt nu in de viewport gemarkeerd door DevTools.

Afbeelding 2. Een tekstknooppunt markeren.

JS-pad kopiëren

Stel, je schrijft een automatiseringstest waarbij je op een knooppunt klikt (bijvoorbeeld met page.click() `-functie van Puppeteer) en je 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-boom te klikken, 'Kopiëren' > 'Selector kopiëren' te selecteren en vervolgens die CSS-selector door te geven aan document.querySelector() . Maar als het knooppunt zich in een Shadow DOM bevindt, werkt deze aanpak niet, omdat de selector een pad binnen de Shadow DOM oplevert.

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

Afbeelding 3. Kopieer het JS-pad.

Met DevTools kopieert u een expressie zoals de onderstaande naar uw klembord:

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

Updates van het auditpanel

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

Figuur 4. Gedetecteerde JavaScript-bibliotheken

Je kunt het paneel Audits nu ook openen via het opdrachtmenu door Lighthouse of PWA in te typen.

Afbeelding 5. Het lighthouse typen in het opdrachtmenu.

Download de previewkanalen

Overweeg om Chrome Canary , Dev of Beta als standaard ontwikkelbrowser te gebruiken. Deze preview-versies geven je toegang tot de nieuwste DevTools-functies, stellen je in staat om geavanceerde API's van webplatformen te testen en helpen je problemen op je site te vinden voordat je gebruikers ze tegenkomen!

Neem contact op met het Chrome DevTools-team.

Gebruik de volgende opties om de nieuwe functies, updates of andere zaken met betrekking tot DevTools te bespreken.

• Stuur feedback en suggesties voor nieuwe functies naar crbug.com .
• Meld een probleem met DevTools via de optie ' Meer opties ' > 'Help' > 'Een probleem met DevTools melden' in DevTools.
• Tweet naar @ChromeDevTools .
• Laat reacties achter op de YouTube-video's 'Wat is er nieuw in DevTools' of 'DevTools-tips' .

Wat is er nieuw in DevTools?

Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .