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

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

Kayce Basques

Prise en charge multicompte dans le panneau "Audits"

Vous pouvez désormais utiliser le panneau Audits en combinaison avec d'autres fonctionnalités des outils de développement, telles que le blocage des requêtes et les remplacements 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 des meilleures opportunités d'amélioration des performances soit d'éliminer les ressources qui bloquent l'affichage.

Le score de performance initial est de 70.

Figure 1. Score Performance initial.

Le rapport initial indique que trois scripts bloquant l'affichage posent problème.

Figure 2. Le rapport initial indique que trois scripts bloquant l'affichage posent problème.

Maintenant que vous pouvez utiliser le panneau Audits avec le blocage des requêtes, vous pouvez rapidement mesurer l'impact des scripts bloquant l'affichage sur vos performances de chargement en bloquant d'abord les requêtes pour les scripts qui bloquent l'affichage:

Utiliser l'onglet "Request Blocking" (Blocage des requêtes) pour bloquer les scripts problématiques.

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

Auditez à nouveau la page:

Le score de performance est passé à 97 après avoir activé le blocage des requêtes.

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

Vous pouvez également utiliser des remplacements locaux pour ajouter des attributs async à chacune des balises de script, mais "nous allons le laisser comme un exercice pour le lecteur". Accédez à la démonstration du multicompte pour l'essayer. Vous pouvez également consulter ce tweet pour découvrir une vidéo de démonstration.

Problème Chromium n° 991906

Débogage du gestionnaire de paiement

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

Accédez au panneau Application.
Ouvrez le volet Gestionnaire de paiement.
Cliquez sur Enregistrer. Les outils de développement enregistrent les événements du gestionnaire de paiement pendant trois jours, même lorsque les outils de développement sont fermés.

Figure 5. Enregistrement des événements du gestionnaire de paiement.
Activez l'option Afficher les événements d'autres domaines si vos événements de gestionnaire de paiement se produisent à une autre origine.
Après avoir déclenché un événement de type "Gestionnaire de paiements", cliquez sur la ligne correspondante pour en savoir plus sur l'événement.

Figure 6. Afficher un événement de gestionnaire de paiements.

Problème Chromium n° 980291

Lighthouse 5.2 dans le panneau "Audits"

Le panneau Audits utilise désormais Lighthouse 5.2. Le nouvel audit de diagnostic d'utilisation tierce vous indique la quantité de code tiers demandé et la durée pendant laquelle ce code tiers a bloqué le thread principal pendant le chargement de la page. Pour en savoir plus sur la manière dont le code tiers peut dégrader les performances de chargement, consultez Optimiser vos ressources tierces.

Capture d'écran de l'audit "Utilisation tierce" dans l'UI des rapports Lighthouse

Figure 7. Audit Utilisation de tiers.

Problème Chromium n° 772558

Largest Contentful Paint dans le panneau "Performances"

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

Marqueur LCP dans la section "Timings".

Figure 8. Repère LCP dans la section Timings

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

Cliquez sur le repère LCP dans la section Durées.
Pointez sur Nœud associé dans l'onglet Résumé pour mettre en surbrillance le nœud dans la fenêtre d'affichage.

Figure 9. Section Nœud associé de l'onglet Résumé
Cliquez sur le nœud associé pour le sélectionner dans l'arborescence DOM.

Problèmes liés aux outils de développement de fichiers à partir du menu principal

Si vous rencontrez un bug dans les outils de développement et que vous souhaitez signaler un problème, ou si vous avez une idée sur la façon d'améliorer les outils de développement et que vous souhaitez demander une nouvelle fonctionnalité, accédez à Menu principal > Aide > Signaler un problème dans les outils de développement pour créer un problème dans l'outil de suivi de l'équipe d'ingénierie des outils de développement. En fournissant un exemple minimal et reproductible sur Glitch, vous augmentez considérablement la capacité de votre équipe à corriger votre bug ou à implémenter votre demande de fonctionnalité.

Aide > Signaler un problème lié aux 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

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.