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. Met deze voorbeeldkanalen krijgt u toegang tot de nieuwste DevTools-functies, kunt u geavanceerde webplatform-API's testen en kunt u problemen op uw site opsporen voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies, updates of iets anders gerelateerd aan DevTools te bespreken.

Wat is er nieuw in DevTools

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

,

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. Met deze voorbeeldkanalen krijgt u toegang tot de nieuwste DevTools-functies, kunt u geavanceerde webplatform-API's testen en kunt u problemen op uw site opsporen voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies, updates of iets anders gerelateerd aan DevTools te bespreken.

Wat is er nieuw in DevTools

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