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:

Version vidéo de ces notes de version

Visualiser les métriques de performances

Après l'enregistrement du chargement d'une page, les outils de développement marquent désormais des métriques de performances telles que DOMContentLoaded et First Meaningful Paint dans la section Durée.

"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 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 méthode page.click(), par exemple) et que vous souhaitez obtenir rapidement une référence à ce nœud DOM. La accédez au panneau "Éléments", effectuez un clic droit sur le nœud dans l'arborescence DOM, Copier > Copier le sélecteur, puis transmettez ce sélecteur CSS à document.querySelector(). Mais 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 dans 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 code JS chemin. Les outils de développement copient dans votre presse-papiers une expression document.querySelector() qui pointe vers la d'un nœud. Comme indiqué ci-dessus, cela est particulièrement utile lorsque vous travaillez avec Shadow DOM, mais vous pouvez utiliser pour n'importe quel nœud DOM.

Copier le chemin JS

Figure 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 comprend un nouvel audit appelé Bibliothèques JavaScript détectées. Cet audit présente les bibliothèques JS détectées par Lighthouse 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.

Taper "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 vos suggestions ou vos commentaires via crbug.com.
  • Signalez un problème lié aux outils de développement en cliquant sur Autres options   Plus > Aide > Signalez un problème 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.

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement