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, comme Request Blocage et Remplacements locaux.

Par exemple, supposons que le rapport du panneau Audits indique que le score de performance de votre page est de 70. L'une des meilleures opportunités pour améliorer vos performances est d'éliminer les ressources bloquant l'affichage.

Figure 1. Score Performance initial.

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 pour les scripts qui bloquent l'affichage:

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

Auditez à nouveau la page:

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 à chacun des scripts. balises, mais « nous allons le laisser comme un exercice pour le lecteur. » Accédez à la démonstration du multicompte pour l'essayer. s'affiche. 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 est désormais compatible avec le gestionnaire de paiement événements.

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

3. Cliquez sur Enregistrer. Les outils de développement enregistrent les événements de gestionnaire de paiement pendant trois jours, même si fermé.

   

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

4. Activez l'option Afficher les événements d'autres domaines si les événements de la page "Gestion des paiements" se produisent à un autre origine.

5. 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. Nouveau diagnostic Utilisation de données tierces l'audit vous indique la quantité de code tiers demandé et la durée pendant laquelle ce code tiers a été bloqué le thread principal pendant le chargement de la page. Pour en savoir plus, consultez Optimiser vos ressources tierces. sur la manière dont le code tiers peut dégrader les performances de chargement.

Figure 7. Audit Utilisation de tiers.

Problème Chromium n° 772558

Largest Contentful Paint dans le panneau "Performances"

Lors de l'analyse des performances de chargement dans le panneau Performances, la section Temps inclut un repère Largest Contentful Paint (LCP). Le LCP indique le délai d'affichage le plus grand élément de contenu visible dans la fenêtre d'affichage.

Figure 8 : Repère LCP dans la section Timings

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

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

2. 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é

3. 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 de la façon Pour améliorer les outils de développement et demander une nouvelle fonctionnalité, accédez au Menu principal > Aide > Signaler un Problème lié aux outils de développement pour signaler un problème dans l'outil de suivi de l'équipe d'ingénieurs des outils de développement. En fournissant un exemple minimal et reproductible sur Glitch augmente considérablement la capacité de l'équipe à corriger votre bug ou mettre en œuvre votre demande de fonctionnalité.

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

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