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

Kayce Basques
Kayce Basques
X GitHub

Voici quelques-unes des nouvelles fonctionnalités et des principaux changements apportés 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é le chargement d'une page, les outils de développement marquent désormais les 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 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 mettent désormais en surbrillance ce nœud de texte dans la fenêtre d'affichage.

Mise en surbrillance d'un nœud de texte

Figure 2 : Mise en surbrillance d'un nœud de texte

Copier le chemin d'accès JS

Supposons que vous rédigiez 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 d'accès à 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 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

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

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

Modifications du panneau "Audits"

Le panneau "Audits" exécute désormais Lighthouse 3.2. La version 3.2 inclut un nouvel audit intitulé Bibliothèques JavaScript détectées. Cet audit liste les bibliothèques JS 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 commandes en saisissant Lighthouse ou PWA.

Saisie de "lighthouse" dans le menu de commandes

Figure 5. Saisir lighthouse dans le menu de commandes

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe Chrome DevTools

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 sujets abordés dans la série Nouveautés de DevTools.