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

Kayce Basques
Kayce Basques
X GitHub

Compatibilité multicompte dans le panneau "Audits"

Vous pouvez désormais utiliser le panneau Audits en combinaison avec d'autres fonctionnalités DevTools 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 de vos principales opportunités d'amélioration des performances consiste à éliminer les ressources bloquant le rendu.

Le score de performances initial est de 70.

Figure 1. Score de Performances 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 le panneau Audits peut être utilisé en combinaison 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 bloquant l'affichage :

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

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

Ensuite, réessayez d'auditer la page :

Le score de performances est passé à 97 après l'activation du blocage des requêtes.

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

Vous pouvez également utiliser les remplacements locaux pour ajouter des attributs async à chacune des balises de script, mais "nous laisserons cela comme exercice pour le lecteur". Pour voir une démonstration, consultez ce tweet.

Problème Chromium 991906

Débogage du gestionnaire de paiements

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

  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 Payment Handler pendant trois jours, même lorsqu'ils sont fermés.

    Enregistrement des événements du gestionnaire de paiement.

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

  4. Activez l'option Afficher les événements d'autres domaines si vos événements Payment Handler se produisent sur une autre origine.

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

    Afficher un événement Payment Handler.

    Figure 6. Afficher un événement Payment Handler.

Problème Chromium 980291

Lighthouse 5.2 dans le panneau "Audits"

Le panneau Audits exécute désormais Lighthouse 5.2. Le nouvel audit de diagnostic Utilisation de code tiers vous indique la quantité de code tiers demandée 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 façon dont le code tiers peut dégrader les performances de chargement, consultez Optimiser vos ressources tierces.

Capture d'écran de l'audit "Utilisation de ressources tierces" dans l'interface utilisateur du rapport Lighthouse.

Figure 7. L'audit 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 Timing inclut désormais un repère pour le 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.

Repère LCP dans la section "Timing".

Figure 8 : Le repère LCP dans la section Timing.

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

  1. Cliquez sur le repère LCP dans la section Timing.

  2. Pointez sur Nœud associé dans l'onglet Résumé pour mettre en surbrillance le nœud dans la fenêtre d'affichage.

    Section "Nœud associé" de l'onglet "Récapitulatif".

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

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

Signaler des problèmes liés aux outils de développement depuis le 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 pour améliorer les outils de développement et que vous souhaitez demander une nouvelle fonctionnalité, accédez à Menu principal > Aide > Signaler un problème lié aux 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. Fournir un exemple minimal et reproductible augmente considérablement la capacité de l'équipe à corriger votre bug ou à implémenter votre demande de fonctionnalité.

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 Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe 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.

Nouveautés des outils pour les développeurs

Liste de tous les sujets abordés dans la série Nouveautés des outils pour les développeurs.