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

Kayce Basques

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

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 à présent des métriques de performances telles que DOMContentLoaded et First Meaningful Paint dans la section Timing.

First Meaningful Paint dans la section "Timing" (Temps)

Figure 1 : First Meaningful Paint dans la section "Timing" (Temps)

Mettre en surbrillance les nœuds de texte

Lorsque vous pointez sur un nœud de texte dans l'arborescence DOM, les outils de développement le mettent 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 écriviez un test d'automatisation qui implique de cliquer sur un nœud (à l'aide de la fonction page.click() de Puppeteer, par exemple) et que vous souhaitiez obtenir rapidement une référence à ce nœud DOM. Le workflow habituel consiste à accéder au panneau "Éléments", à effectuer un clic droit sur le nœud dans l'arborescence DOM, à sélectionner 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 chemin à partir de l'arborescence de l'ombre.

Pour obtenir rapidement une référence à un nœud DOM, effectuez un clic droit sur le nœud DOM, puis sélectionnez Copy > Copy JS path (Copier > Copier le chemin 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, cela est particulièrement utile lorsque vous travaillez avec Shadow DOM, mais vous pouvez l'utiliser pour n'importe quel nœud DOM.

Copier le chemin d'accès JS

Figure 3. Copier le chemin d'accès JS

DevTools copie une expression semblable à celle ci-dessous dans votre presse-papiers:

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

Mises à jour du panneau "Audits" (Audits)

Le panneau "Audits" exécute désormais Lighthouse 3.2. La version 3.2 inclut un nouvel audit appelé Bibliothèques JavaScript détectées. Cet audit présente 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

Vous pouvez également accéder au panneau "Audits" depuis le menu de commande en saisissant Lighthouse ou PWA.

Saisissez "lighthouse" (phare) dans le menu de commandes.

Figure 5. Saisissez lighthouse dans le menu de commandes.

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plates-formes Web de pointe et vous aident à détecter les problèmes sur votre site avant vos utilisateurs.

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

Utilisez les options suivantes pour discuter des nouvelles fonctionnalités, des mises à jour ou de tout autre sujet lié aux outils de développement.

Nouveautés des outils de développement

Liste de tous les éléments abordés dans la série Nouveautés des outils pour les développeurs.