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

Kayce Basques

Compatibilité multiclient dans le panneau "Audits" (Audits)

Vous pouvez désormais utiliser le panneau Audits en combinaison avec d'autres fonctionnalités DevTools, comme le blocage des requêtes et les forcements locaux.

Par exemple, supposons que le rapport du panneau Audits indique que le score de performances de votre page est de 70 % et que l'une de vos plus grandes opportunités d'amélioration des performances consiste à éliminer les ressources bloquant le rendu.

Figure 1. Score Performances initial.

Figure 2. Le rapport initial indique que trois scripts bloquant le rendu sont un problème.

Maintenant que le panneau Audits peut être utilisé en combinaison avec le blocage des requêtes, vous pouvez rapidement mesurer l'impact des scripts bloquant le rendu sur vos performances de chargement en bloquant d'abord les requêtes pour les scripts bloquant le rendu:

Figure 3. Utilisez l'onglet Blocage des requêtes pour bloquer les scripts problématiques.

puis en effectuant un nouvel audit de la page:

Figure 4. Le score Performances est passé à 97 après le blocage des scripts problématiques.

Vous pouvez également utiliser les Forcements locaux pour ajouter des attributs async à chacune des balises de script, mais nous laissons cela au lecteur comme exercice. Accédez à la démonstration multi-client pour l'essayer. Vous pouvez également regarder ce tweet pour une démonstration vidéo.

Problème 991906 dans Chromium

Débuggage du gestionnaire de paiements

La section Services d'arrière-plan du panneau Application est désormais compatible avec les événements Gestionnaire de paiement.

1. Accédez au panneau Application.
2. Ouvrez le volet Gestionnaire de paiement.

3. Cliquez sur Enregistrer. DevTools enregistre les événements du gestionnaire de paiement pendant trois jours, même lorsqu'il est fermé.

   

   Figure 5. Enregistrer des événements du gestionnaire de paiement

4. Activez Afficher les événements d'autres domaines si vos événements de gestionnaire de paiement se produisent sur une autre origine.

5. Après avoir déclenché un événement de gestionnaire de paiement, cliquez sur la ligne de l'événement pour en savoir plus.

   

   Figure 6. Affichage d'un événement du gestionnaire de paiement.

Problème Chromium 980291

Lighthouse 5.2 dans le panneau "Audits"

Le panneau Audits exécute désormais Lighthouse 5.2. L'audit de diagnostic Utilisation de tiers vous indique la quantité de code tiers demandée et la durée pendant laquelle ce code tiers a bloqué le thread principal lors du chargement de la page. Consultez Optimiser vos ressources tierces pour en savoir plus sur la façon dont le code tiers peut dégrader les performances de chargement.

Figure 7. L'audit Utilisation de code tiers.

Problème Chromium 772558

Largest Contentful Paint dans le panneau "Performances"

Lorsque vous analysez les performances de chargement dans le panneau Performances, la section Timings inclut désormais un repère pour le LCP (Largest Contentful Paint). Le LCP indique le délai d'affichage du plus grand élément de contenu visible dans la fenêtre d'affichage.

Figure 8 : Repère LCP dans la section Timings (Délais).

Pour mettre en surbrillance le nœud DOM associé au LCP:

1. Cliquez sur le repère LCP dans la section Durée.

2. Pointez sur Nœud associé dans l'onglet Summary (Résumé) pour mettre en surbrillance le nœud dans le viewport.

   

   Figure 9. Section Nœud associé de l'onglet Résumé.

3. Cliquez sur le nœud associé pour le sélectionner dans l'arborescence DOM.

Signaler des problèmes dans les outils de développement depuis le menu principal

Si vous rencontrez un bug dans DevTools et que vous souhaitez signaler un problème, ou si vous avez une idée pour améliorer DevTools et que vous souhaitez demander une nouvelle fonctionnalité, accédez à Menu principal > Aide > Signaler un problème dans DevTools pour créer un problème dans le suivi de l'équipe d'ingénieurs DevTools. Fournir un exemple minimal et reproductible sur Glitch permet à l'équipe de corriger votre bug ou d'implémenter votre demande de fonctionnalité beaucoup plus facilement.

Aide > Signaler un problème dans les outils de développement." width="800" height="604">

Figure 10 : Menu principal > Aide > Signaler un problème dans les outils de développement.

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.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement à l'aide de l'icône more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube sur les nouveautés des outils pour les développeurs ou sur les vidéos YouTube sur les conseils concernant les 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.