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 prestatiegegevens in het paneel Prestaties.
• Markeer tekstknooppunten in de DOM-boom.
• Kopieer het JS-pad naar een DOM-knooppunt uit de DOM-boom.
• Updates voor het Audits-paneel , met onder andere een nieuwe audit die JS-bibliotheken detecteert en nieuwe trefwoorden voor toegang tot het Audits-paneel via het opdrachtmenu.

Videoversie van deze release-opmerkingen

Visualiseer prestatiegegevens

Nadat een pagina is geladen , markeert DevTools nu prestatiegegevens zoals DOMContentLoaded en First Meaningful Paint in het gedeelte Timings .

Figuur 1. Eerste betekenisvolle verf in het gedeelte Timing

Markeer tekstknooppunten

Wanneer u de muisaanwijzer op een tekstknooppunt in de DOM-structuur plaatst, markeert DevTools nu dat tekstknooppunt in het venster.

Figuur 2. Een tekstknooppunt markeren

Kopieer JS-pad

Stel dat je een automatiseringstest schrijft waarbij je op een knooppunt moet klikken (bijvoorbeeld met behulp van Puppeteer's page.click() functie) en je wilt snel een referentie naar dat DOM-knooppunt. De gebruikelijke workflow is om naar het Elementenpaneel 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 vanuit de shadow tree oplevert.

Om snel een verwijzing naar een DOM-knooppunt te 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 u kunt het voor elk DOM-knooppunt gebruiken.

Figuur 3. JS-pad kopiëren

DevTools kopieert een expressie zoals hieronder naar uw klembord:

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

Updates van het auditpaneel

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

Figuur 4. Gedetecteerde JavaScript-bibliotheken

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

Figuur 5. lighthouse typen in het opdrachtmenu

Download de previewkanalen

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

Neem contact op met het Chrome DevTools-team

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

• Geef uw feedback en verzoeken voor nieuwe functies door aan crbug.com .
• Meld een DevTools-probleem met more_vert Meer opties > Help > Meld een DevTools-probleem in DevTools.
• Tweet naar @ChromeDevTools .
• Laat een reactie achter in de YouTube-video's 'Wat is er nieuw in DevTools' of in de YouTube-video's 'DevTools Tips' .

Wat is er nieuw in DevTools

Een lijst met alles dat in de serie Wat is er nieuw in DevTools is behandeld.