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

Prise en charge multicompte dans le panneau "Audits"

Vous pouvez désormais utiliser le panneau Audits 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 performance de votre page est de 70 et que l'une de vos meilleures opportunités d'amélioration des performances est 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 bloquent l'affichage.

Figure 2. Le rapport initial indique que trois scripts bloquent l'affichage.

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 liées aux scripts bloquant l'affichage:

Utiliser l'onglet de blocage des requêtes pour bloquer les scripts problématiques.

Figure 3. Utilisez l'onglet Request Blocking (Demander le blocage) pour bloquer les scripts problématiques.

Ensuite, procédez à un nouvel audit de la page:

Une fois le blocage des requêtes activé, le score de performances est passé à 97.

Figure 4. Le score de performances 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 laisserons cette étape à l'ordre du 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 est désormais compatible avec les événements de gestionnaire de paiement.

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

    Enregistrement des événements du gestionnaire de paiements

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

  4. Activez l'option Afficher les événements d'autres domaines si les événements de votre gestionnaire de paiements se produisent sur une origine différente.

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

    Afficher un événement du gestionnaire de paiements.

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

Problème Chromium n° 980291

Lighthouse 5.2 dans le panneau "Audits"

Le panneau Audits fonctionne désormais avec Lighthouse 5.2. Le nouvel audit de diagnostic de l'utilisation tierce 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. Consultez la section Optimiser vos ressources tierces pour en savoir plus sur la manière dont le code tiers peut dégrader les performances de charge.

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

Figure 7. Audit de l'utilisation tierce.

Problème Chromium n° 772558

Largest Contentful Paint dans le panneau "Performances"

Lors de l'analyse des performances de chargement dans le panneau Performance, la section Timings inclut désormais un repère pour 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 "Durées"

Figure 8. Repère LCP dans la section Durées

Pour mettre en surbrillance le nœud DOM associé au LCP, procédez comme suit:

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

    Section Nœud associé de l'onglet Synthèse

    Figure 9. La 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 sur la façon d'améliorer les outils de développement et 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. Fournir un exemple minimal et reproductible sur Glitch augmente considérablement la capacité de l'é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 lié aux outils de développement.

Télécharger les canaux de prévisualisation

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

  • Envoyez-nous une suggestion ou des commentaires via crbug.com.
  • Signalez un problème dans les outils de développement via Plus d'options   More > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
  • Envoyez un tweet à @ChromeDevTools.
  • Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.

Nouveautés des outils de développement

Liste des points abordés dans la série Nouveautés des outils de développement.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 a été résilié.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59