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, DevTools marque désormais les métriques de performances telles que DOMContentLoaded et First Meaningful Paint dans la section Timings (Délais).

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, DevTools le met désormais en surbrillance dans le viewport.

Mettre en surbrillance un nœud de texte

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

Copier le chemin d'accès 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 fantôme.

Pour obtenir rapidement une référence à un nœud DOM, effectuez un clic droit sur le nœud DOM, puis sélectionnez Copier > Copier le chemin d'accès JS. DevTools copie 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" s'exécute désormais avec Lighthouse 3.2. La version 3.2 inclut un nouvel audit appelé Bibliothèques JavaScript détectées. Cet audit liste 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 plate-forme 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 élément lié aux outils pour les développeurs.

Nouveautés des outils pour les développeurs

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