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

Suppose you're writing an automation test that involves clicking a node (using Puppeteer's page.click() function, perhaps) and you want to quickly get a reference to that DOM node. The usual workflow is to go to the Elements panel, right-click the node in the DOM Tree, select Copy > Copy selector , and then pass that CSS selector to document.querySelector() . But if the node is in a Shadow DOM this approach doesn't work because the selector yields a path from within the shadow tree.

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 auditpanel

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 wat in de serie Wat is er nieuw in DevTools is behandeld.