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

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

Kayce Basques

Voici quelques-unes des nouvelles fonctionnalités et des modifications majeures à venir dans les outils pour les développeurs Chrome dans Chrome 72:

Affichez les métriques de performances dans le panneau "Performances".
Mettez en surbrillance les nœuds de texte dans l'arborescence DOM.
Copiez le chemin 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 permettant d'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é le chargement d'une 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 "Durée"

Figure 1 : "First Meaningful Paint" dans la section "Durée"

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 souhaitez obtenir rapidement une référence à ce nœud DOM. Le workflow habituel consiste à accéder au panneau "Elements" (Éléments), à 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 chemin à partir de l'arborescence Shadow.

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 utilisez Shadow DOM, mais vous pouvez l'utiliser pour n'importe quel nœud DOM.

Copier le chemin JS

Image 3. Copier le chemin 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)')

Mises à jour du panneau "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 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.

Tapez "phare" dans le menu de commandes.

Figure 5. en saisissant lighthouse dans le menu de commandes.

Télécharger les canaux de prévisualisation

Vous pouvez utiliser Chrome Canary, Dev ou Bêta 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 plates-formes Web de pointe et de 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 et des modifications dans l'article, ou de tout autre sujet lié aux outils de développement.

Envoyez-nous une suggestion ou un commentaire via crbug.com.
Signalez un problème dans les outils de développement en sélectionnant Autres options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
Tweetez à l'adresse @ChromeDevTools.
Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.