Cette page a été traduite par l'API Cloud Translation.

Nouveautés des outils de développement (Chrome 72)

Kayce Basques

Les nouvelles fonctionnalités et modifications majeures apportées aux outils pour les développeurs Chrome dans Chrome 72 incluent:

Visualisez les métriques de performances dans le panneau "Performances".
Mettez en surbrillance les nœuds de texte dans l'arborescence DOM.
Copiez le chemin d'accès JS vers un nœud DOM à partir de l'arborescence DOM.
Mises à jour du panneau "Audits", y compris un nouvel audit qui détecte les bibliothèques JS et les nouveaux mots clés pour accéder au panneau "Audits" à partir du menu de commandes.

Version vidéo de ces notes de version

Visualiser les métriques de performances

Après avoir enregistré un chargement de page, les outils de développement marquent désormais des métriques de performances telles que DOMContentLoaded et First Meaningful Paint dans la section Timings.

First Meaningful Paint dans la section Timing

Figure 1 : First Meaningful Paint dans la section Timing

Mettre les nœuds de texte en surbrillance

Lorsque vous pointez sur un nœud de texte dans l'arborescence DOM, les outils de développement le mettent désormais en surbrillance dans la fenêtre d'affichage.

Mettre en surbrillance un nœud de texte

Figure 2 : Mettre en surbrillance un nœud de texte

Copier le chemin JS

Supposons que vous écrivez un test d'automatisation qui implique de cliquer sur un nœud (à l'aide de la fonction page.click() de Puppeteer, peut-être) et que vous souhaitez obtenir rapidement une référence à ce nœud DOM. La procédure habituelle consiste à accéder au panneau "Elements", à effectuer un clic droit sur le nœud dans l'arborescence DOM, à sélectionner Copy > Copy selector (Copier > Copier le sélecteur), puis à transmettre ce sélecteur CSS à document.querySelector(). Toutefois, si le nœud se trouve dans un Shadow DOM, cette approche ne fonctionne pas, car le sélecteur génère un tracé à partir de l'arborescence fantôme.

Pour obtenir rapidement une référence à un nœud DOM, effectuez un clic droit sur ce nœud, puis sélectionnez Copier > Copier le chemin d'accès JS. Les outils de développement copient dans votre presse-papiers une expression document.querySelector() qui pointe vers le nœud. Comme indiqué ci-dessus, cette fonctionnalité est particulièrement utile lorsque vous utilisez Shadow DOM, mais vous pouvez l'utiliser avec n'importe quel nœud DOM.

Copier le chemin JS

Image 3. Copier le chemin JS

Les outils de développement copient une expression comme celle ci-dessous dans votre presse-papiers:

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

Mises à jour du panneau "Audits"

Le panneau "Audits" utilise désormais Lighthouse 3.2. La version 3.2 inclut un nouvel audit appelé Bibliothèques JavaScript détectées. Cet audit répertorie les bibliothèques JavaScript que Lighthouse a détectées sur la page. Vous trouverez cet audit dans votre rapport sous Bonnes pratiques > Audits réussis.

Bibliothèques JavaScript détectées

Figure 4. Bibliothèques JavaScript détectées

De plus, vous pouvez désormais accéder au panneau "Audits" à partir du menu de commandes en saisissant Lighthouse ou PWA.

en tapant "phare" dans le menu de commandes ;

Figure 5. Saisir lighthouse dans le menu de commandes

Télécharger les canaux de prévisualisation

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces versions preview vous permettent d'accéder aux dernières fonctionnalités des outils de développement, de tester des API de pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

Contacter l'équipe des outils pour les développeurs Chrome

Utilisez les options suivantes pour discuter des nouvelles fonctionnalités et des modifications dans l'article, ou de toute autre question concernant les outils de développement.

Envoyez-nous une suggestion ou des commentaires via crbug.com.
Signalez un problème dans les outils de développement via Plus d'options > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
Envoyez un tweet à @ChromeDevTools.
Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.