Documentation de référence sur les fonctionnalités de performances

Cette page est une documentation de référence complète sur les fonctionnalités des outils pour les développeurs Chrome liées à l'analyse des performances.

Consultez Analyser les performances d'exécution pour suivre un tutoriel guidé sur l'analyse des performances d'une page à l'aide des Outils pour les développeurs Chrome.

Écran des métriques en direct

Lorsque vous ouvrez le panneau Performances pour la première fois, l'écran "Statistiques en direct" s'affiche. Il vous donne un aperçu instantané des performances de la page actuelle à l'aide des trois Core Web Vitals.

Les métriques sont mises à jour lorsque vous interagissez avec la page et accédez à de nouvelles pages, y compris les navigations douces côté client dans les applications monopages, indiquées par le badge NAVIGATION DOUCE. C'est un bon moyen d'identifier les problèmes de performances, en particulier pour l'INP et le CLS s'ils n'apparaissent que dans certaines circonstances. Une fois qu'un problème de performances se répète de manière constante, vous pouvez enregistrer une trace pour obtenir plus de détails et déboguer le problème sous-jacent.

Fonctionnalités de l'écran des statistiques en direct

L'écran Statistiques en direct comporte les fonctionnalités suivantes, en plus des métriques :

• Métriques de champ de CrUX lorsqu'elles sont activées dans le panneau Métriques de champ.
• Un résumé des différences notables entre les métriques locales et celles de terrain.
• L'élément LCP, que vous pouvez survoler pour le mettre en surbrillance sur la page.
• Détails du cluster CLS et du type INP
• Plus de détails sur le survol des métriques (par exemple, les sous-parties LCP et INP, et les histogrammes de champ)
• Les panneaux Interactions et Décalages de mise en page enregistrent l'historique des interactions et des décalages de mise en page.
• Un panneau Métriques de champ dans lequel les données CrUX peuvent être activées, des détails sur la période de ces données, la possibilité de basculer entre les données d'origine et d'URL (si disponibles) et entre les données pour ordinateur et les données mobiles.
• Un panneau Paramètres de l'environnement avec des conseils sur l'appareil, le processeur et la limitation de bande passante réseau à utiliser, en fonction des données CrUX.

Pour en savoir plus, consultez l'article de blog Surveiller les performances Core Web Vitals locales et des utilisateurs réels dans les outils de développement.

Enregistrer les performances

Vous pouvez enregistrer les performances d'exécution ou de chargement à l'aide des boutons situés en haut à gauche ou en bas à droite de l'écran :

Enregistrer les performances d'exécution

Enregistrez les performances d'exécution lorsque vous souhaitez analyser les performances d'une page en cours d'exécution, et non lors de son chargement.

1. Accédez à la page que vous souhaitez analyser.
2. Cliquez sur l'onglet Performance (Performances) dans les outils de développement.
3. Cliquez sur Enregistrer .
4. Interagissez avec la page. Les outils de développement enregistrent toute l'activité de la page qui résulte de vos interactions.
5. Cliquez de nouveau sur Enregistrer ou sur Arrêter pour arrêter l'enregistrement.

Enregistrer les performances de chargement

Enregistrez les performances de chargement lorsque vous souhaitez analyser les performances d'une page pendant son chargement, et non pendant son exécution.

1. Accédez à la page que vous souhaitez analyser.
2. Ouvrez le panneau Performances des outils pour les développeurs.
3. Cliquez sur Enregistrer et actualiser . Les outils de développement accèdent d'abord à about:blank pour effacer les captures d'écran et les traces restantes. Les Outils de développement enregistrent ensuite les métriques de performances pendant l'actualisation de la page, puis arrêtent automatiquement l'enregistrement quelques secondes après la fin du chargement.

Les outils de développement effectuent automatiquement un zoom avant sur la partie de l'enregistrement où l'activité est la plus importante.

Dans cet exemple, le panneau Performances affiche l'activité pendant le chargement d'une page.

Effectuer des captures d'écran pendant l'enregistrement

Cochez la case Captures d'écran pour capturer une capture d'écran de chaque frame pendant l'enregistrement.

Pour personnaliser la fidélité de l'enregistrement visuel dans les limites de la mémoire, ouvrez Paramètres de capture , puis sélectionnez une taille d'image et un préréglage de limite de nombre dans le menu déroulant Capture d'écran.

Consultez Afficher une capture d'écran pour savoir comment interagir avec les captures d'écran.

Forcer la récupération de mémoire pendant l'enregistrement

Pendant l'enregistrement d'une page, cliquez sur Collect garbage (Récupérer la mémoire) mop pour forcer la récupération de mémoire.

Afficher les paramètres d'enregistrement

Cliquez sur Capture settings (Paramètres de capture)  pour afficher d'autres paramètres liés à la façon dont les outils de développement capturent les enregistrements de performances.

Désactiver les exemples JavaScript

Par défaut, la piste Main (Principale) d'un enregistrement affiche les piles d'appels détaillées des fonctions JavaScript appelées pendant l'enregistrement. Pour désactiver ces piles d'appel :

1. Ouvrez le menu Paramètres de capture . Consultez Afficher les paramètres d'enregistrement.
2. Cochez la case Désactiver les exemples JavaScript.
3. Enregistrez la page.

Les captures d'écran suivantes montrent la différence entre la désactivation et l'activation des exemples JavaScript. La trace Main de l'enregistrement est beaucoup plus courte lorsque l'échantillonnage est désactivé, car elle omet toutes les piles d'appels JavaScript.

Cet exemple montre un enregistrement avec des exemples JS désactivés.

Cet exemple montre un enregistrement avec des exemples JS activés.

Limiter le réseau pendant l'enregistrement

Pour limiter le réseau pendant l'enregistrement :

1. Ouvrez le menu Paramètres de capture . Consultez Afficher les paramètres d'enregistrement.
2. Définissez Réseau sur le niveau de limitation de la bande passante choisi.

Dans le menu déroulant, le panneau Performances peut également recommander un préréglage de limitation par défaut ou un préréglage qui se rapproche de l'expérience de votre base d'utilisateurs en fonction des données de terrain.

Limiter la consommation de ressources processeur pendant l'enregistrement

Pour limiter la consommation de ressources processeur pendant l'enregistrement :

1. Ouvrez le menu Paramètres de capture . Consultez Afficher les paramètres d'enregistrement.
2. Définissez CPU (Processeur) sur le niveau de limitation choisi.

La limitation dépend des capacités de votre ordinateur. Par exemple, l'option Ralentissement x2 fait fonctionner votre processeur deux fois plus lentement que d'habitude. Les outils de développement ne peuvent pas simuler réellement les processeurs des appareils mobiles, car leur architecture est très différente de celle des ordinateurs de bureau et portables.

Dans le menu déroulant, le panneau Performances peut également recommander un préréglage de limitation par défaut ou un préréglage qui se rapproche de l'expérience de votre base d'utilisateurs en fonction des données de terrain.

Activer les statistiques du sélecteur CSS

Pour afficher les statistiques des sélecteurs de vos règles CSS lors d'événements Recalculer le style de longue durée :

1. Ouvrez le menu Paramètres de capture . Consultez Afficher les paramètres d'enregistrement.
2. Cochez la case Activer les statistiques du sélecteur CSS.

Pour en savoir plus, découvrez comment analyser les performances des sélecteurs CSS lors des événements de recalcul de style.

Activer l'instrumentation avancée de la peinture

Pour afficher l'instrumentation détaillée de l'affichage :

1. Ouvrez le menu Paramètres de capture . Consultez Afficher les paramètres d'enregistrement.
2. Cochez la case Activer l'instrumentation avancée de l'affichage.

Pour savoir comment interagir avec les informations de peinture, consultez Afficher les calques et Afficher le profileur de peinture.

Afficher les titres personnalisés

Active les résumés des pistes personnalisées et des groupes de pistes personnalisés dans le résumé de la trace, qui peut être personnalisé à l'aide de l'API d'extensibilité des outils de développement.

Effacer l'enregistrement précédent

Après avoir effectué un enregistrement, appuyez sur Effacer l'enregistrement pour l'effacer du panneau Performances.

Analyser un enregistrement des performances

Après avoir enregistré les performances d'exécution ou enregistré les performances de chargement, le panneau Performances fournit de nombreuses données pour analyser les performances de ce qui vient de se passer.

Annoter un enregistrement et le partager

Consultez Annoter et partager vos résultats de performances.

Obtenez des insights pratiques

Le panneau Performances inclut des insights sur les performances qui apparaissent également dans les rapports Lighthouse. Ces insights peuvent suggérer des moyens d'améliorer les performances et fournir une analyse guidée des problèmes de performances suivants : sous-parties LCP et INP, problèmes de découverte des requêtes LCP, tiers, ainsi que ressources JavaScript anciennes et dupliquées. Pour obtenir la liste complète, consultez la documentation sur les insights sur les performances.

Les insights sont validés lorsqu'aucun problème n'est détecté. L'onglet Insights les liste dans la section Insights réussis réduite en bas de la page. Les insights qui n'ont pas été validés sont listés dans des sections dédiées.

Pour exploiter les insights :

1. Enregistrez les performances.
2. Dans la barre latérale gauche du panneau Performances, ouvrez l'onglet Insights, développez différentes sections, puis pointez sur les éléments et cliquez dessus. Le panneau Performances met en évidence les événements correspondants dans la trace.

Parcourir l'enregistrement

Pour vous aider à naviguer, lorsque vous pointez sur la trace de performances, le panneau Performances effectue les actions suivantes :

• Affiche un repère vertical qui s'étend sur l'ensemble de la trace de performances lorsque vous pointez sur la vue d'ensemble de la chronologie.
• Met en surbrillance une plage dans la vue d'ensemble de la timeline lorsque vous pointez sur des éléments de la piste Principale.

Pour examiner de près l'enregistrement de vos performances, vous pouvez sélectionner une partie d'un enregistrement, faire défiler un long graphique de flammes, faire un zoom avant et arrière, et utiliser des fils d'Ariane pour passer d'un niveau de zoom à un autre.

Utiliser des raccourcis clavier pour la navigation

Pour utiliser des raccourcis clavier afin de parcourir rapidement l'enregistrement, commencez par choisir le style de navigation au clavier de votre choix.

En haut à droite du panneau, cliquez sur Aide Afficher les raccourcis, puis sélectionnez l'une des options suivantes :

• Classique : zoomez avec la molette de la souris (pavé tactile vers le haut ou vers le bas) et faites défiler verticalement avec Maj+molette de la souris.
• Moderne : défilement vertical avec la molette de la souris, défilement horizontal avec Maj + molette de la souris et zoom avec Commande/Ctrl + molette de la souris.

La boîte de dialogue des raccourcis fournit également un aide-mémoire des raccourcis disponibles.

Sélectionnez une partie de l'enregistrement.

Sous la barre d'action du panneau Performances et en haut de l'enregistrement, vous pouvez voir la section Aperçu de la chronologie avec les graphiques CPU et NET.

Pour sélectionner une partie d'un enregistrement, cliquez de manière prolongée, puis faites glisser le curseur vers la gauche ou la droite dans la vue d'ensemble de la chronologie.

Pour sélectionner une partie à l'aide du clavier :

1. Sélectionnez la piste Principale ou l'une de ses pistes voisines.
2. Utilisez les touches W, A, S et D pour faire un zoom avant, vous déplacer vers la gauche, faire un zoom arrière et vous déplacer vers la droite, respectivement.

Pour sélectionner une partie à l'aide d'un pavé tactile :

1. Pointez sur la section Vue d'ensemble de la timeline ou sur l'une des pistes (Principale et ses voisines).
2. Avec deux doigts, balayez l'écran vers le haut pour faire un zoom arrière, vers la gauche pour vous déplacer vers la gauche, vers le bas pour faire un zoom avant et vers la droite pour vous déplacer vers la droite.

Créer des fils d'Ariane et passer d'un niveau de zoom à un autre

L'aperçu de la timeline vous permet de créer plusieurs breadcrumbs imbriqués successivement, d'augmenter les niveaux de zoom, puis de passer librement d'un niveau de zoom à un autre.

Pour créer et utiliser des breadcrumbs :

1. Dans Timeline overview (Présentation de la chronologie), sélectionnez une partie de l'enregistrement.
2. Pointez sur la sélection, puis cliquez sur le bouton N ms zoom_in. La sélection s'étend pour remplir la vue d'ensemble de la chronologie. Une chaîne de fil d'Ariane commence à se créer en haut de la présentation de la chronologie.
3. Répétez les deux étapes précédentes pour créer un autre fil d'Ariane imbriqué. Vous pouvez continuer à imbriquer des fils d'Ariane tant que la plage de sélection est supérieure à 5 millisecondes.
4. Pour accéder à un niveau de zoom choisi, cliquez sur le fil d'Ariane correspondant dans la chaîne en haut de la vue d'ensemble de la chronologie.

Pour supprimer les enfants d'un fil d'Ariane, effectuez un clic droit sur le fil d'Ariane parent, puis sélectionnez Supprimer les fils d'Ariane enfants.

Faire défiler un graphique de flammes long

Pour faire défiler un long graphique de flammes dans la piste Main (Principale) ou l'une des pistes voisines, cliquez de manière prolongée, puis faites glisser dans n'importe quelle direction jusqu'à ce que l'élément que vous recherchez s'affiche.

Ignorer les scripts non pertinents dans le graphique de flammes

Pour mieux vous concentrer sur votre code, vous pouvez ajouter les scripts non pertinents à la liste des éléments à ignorer.

Pour ignorer les scripts, effectuez l'une des opérations suivantes :

• Cliquez sur compress Afficher la boîte de dialogue du paramètre de la liste des éléments à ignorer dans la barre d'action supérieure, puis saisissez une expression régulière dans le champ de saisie. Le graphique de flammes appliquera la nouvelle règle à mesure que vous saisissez du texte.
• Effectuez un clic droit sur un script, puis sélectionnez Ajouter un script à la liste des éléments à ignorer. Le panneau Performances ajoute ce script à la liste dans la boîte de dialogue Afficher les paramètres de la liste des éléments à ignorer de compress.

Le panneau réduit automatiquement l'imbrication excessive de ces scripts et les marque comme On ignore list (REGULAR_EXPRESSION).

Dans la boîte de dialogue Afficher les paramètres de la liste des éléments à ignorer de compress, vous pouvez activer et désactiver les règles de la liste des éléments à ignorer.

Pour supprimer un script de la liste des éléments à ignorer, effectuez un clic droit dessus dans le graphique de flammes, puis sélectionnez Supprimer le script de la liste des éléments à ignorer ou pointez dessus dans la boîte de dialogue compress Afficher les paramètres de la liste des éléments à ignorer, puis cliquez sur delete Supprimer.

Les Outils de développement enregistrent les règles de la liste des éléments à ignorer que vous ajoutez dans Paramètres Paramètres > Liste des éléments à ignorer.

De plus, pour vous concentrer uniquement sur les scripts propriétaires, cochez la case check_box Dim 3rd parties (Masquer les scripts tiers). Le panneau Performances griser les scripts tiers.

Rechercher des activités

Vous pouvez effectuer des recherches dans les activités de la piste Main (Principale) et les requêtes de la piste Network (Réseau).

Pour ouvrir un champ de recherche en bas du panneau Performances, appuyez sur :

• macOS : Commande+F
• Windows, Linux : Ctrl+F

Cet exemple montre une expression régulière dans le champ de recherche en bas qui trouve toute activité commençant par E.

Pour parcourir les activités qui correspondent à votre requête :

• Cliquez sur les boutons expand_less Précédent ou expand_more Suivant.
• Appuyez sur Maj+Entrée pour sélectionner le précédent ou sur Entrée pour sélectionner le suivant.

Le panneau Performances affiche une info-bulle sur l'activité sélectionnée dans le champ de recherche.

Pour modifier les paramètres d'une requête :

• Cliquez sur match_case Respecter la casse pour rendre la requête sensible à la casse.
• Cliquez sur regular_expression Expression régulière pour utiliser une expression régulière dans votre requête.

Pour masquer le champ de recherche, cliquez sur Annuler.

Modifier l'ordre des pistes et les masquer

Pour désencombrer la trace de performances, vous pouvez modifier l'ordre des pistes et masquer celles qui ne sont pas pertinentes en mode de configuration des pistes.

Pour déplacer et masquer des pistes :

1. Pour accéder au mode de configuration, effectuez un clic droit sur le nom d'une piste, puis sélectionnez Configurer les pistes.
2. Cliquez sur arrow_upward vers le haut ou arrow_downward vers le bas pour déplacer une piste vers le haut ou vers le bas. Cliquez sur visibility_off pour le masquer.
3. Lorsque vous avez terminé, cliquez sur Terminer la configuration des pistes en bas de l'écran pour quitter le mode de configuration.

Regardez la vidéo pour voir ce workflow en action.

Le panneau Performances enregistre la configuration des pistes pour les nouvelles traces, mais pas pour les sessions DevTools suivantes.

Afficher l'activité du thread principal

Utilisez la piste Main pour afficher l'activité qui s'est produite sur le thread principal de la page.

Cliquez sur un événement pour afficher plus d'informations à son sujet dans l'onglet Résumé, y compris, mais sans s'y limiter : la durée (et la durée propre), le lien vers la ligne correspondante dans le script source, l'URL d'origine (avec un nom d'entité, s'il est connu), la trace de la pile, le cas échéant, et la répartition des temps dans un graphique à secteurs.

Le panneau Performances met en évidence l'événement sélectionné en bleu.

Cet exemple montre plus d'informations sur l'événement d'appel de fonction get dans l'onglet Résumé.

Distinguer les événements propriétaires et tiers

Une dépendance excessive au code tiers peut avoir un impact négatif sur les performances de chargement. Le panneau Performances peut vous aider à distinguer visuellement les événements propriétaires et tiers dans la trace. Vous pouvez ainsi prendre une décision plus éclairée concernant la réduction ou le report du chargement du code tiers pour donner la priorité au contenu de votre page.

Pour vous concentrer uniquement sur les performances du code propriétaire :

1. Assurez-vous que rien n'est sélectionné dans la trace de performances ni dans l'onglet Insights. Pour ce faire, cliquez sur un espace vide dans la trace.
2. Cochez check_box Atténuer les tiers dans la barre d'action en haut de l'écran. Le panneau Performances grise les événements liés à des tiers dans la trace des performances et ne met en évidence que les événements first party.

Mettre en avant des événements avec le tableau "Propriétaire / Tiers"

Dans une plage sélectionnée de la vue d'ensemble de la chronologie et lorsqu'aucun événement n'est sélectionné, l'onglet Résumé affiche un tableau Propriétaire / Tiers qui liste les tailles de transfert et les temps de thread principal respectifs des éléments suivants :

• Entité first party marquée d'un badge 1st party.
• Toutes les entités tierces détectées dans la plage sélectionnée, non marquées.
• Extensions marquées d'un badge Extension.
• Autres entités [unattributed].

Pour afficher les événements associés mis en surbrillance dans la trace et le reste grisé, pointez sur les entités dans le tableau. Pour laisser les événements d'une entité en surbrillance, sélectionnez-la dans le tableau. Pour supprimer la mise en surbrillance, cliquez sur un espace vide du tracé.

Pour ouvrir les activités regroupées par cette entité dans l'onglet Ascendant, pointez sur l'entité dans le tableau, puis cliquez sur account_tree Ascendant à côté.

Lire le graphique de flammes

Le panneau Performances représente l'activité du thread principal dans un graphique de flammes. L'axe des abscisses représente l'enregistrement au fil du temps. L'axe des ordonnées représente la pile d'appel. Les événements du haut provoquent les événements du bas.

Cet exemple montre un graphique de flammes dans la piste Main. Un événement click a déclenché un appel de fonction anonyme. Cette fonction a ensuite appelé onEndpointClick_, qui a appelé handleClick_, et ainsi de suite.

Le panneau Performances attribue des couleurs aléatoires aux scripts pour diviser le graphique de flammes et le rendre plus lisible. Dans l'exemple précédent, les appels de fonction d'un script sont de couleur bleu clair. Les appels provenant d'un autre script sont de couleur rose clair. Le jaune plus foncé représente l'activité de script, et l'événement violet représente l'activité de rendu. Ces événements jaune foncé et violet sont cohérents dans tous les enregistrements.

Les tâches longues sont également mises en évidence par un triangle rouge, et la partie supérieure à 50 millisecondes est ombrée en rouge :

Dans cet exemple, la tâche a pris plus de 400 millisecondes. La partie représentant les 350 dernières millisecondes est donc ombrée en rouge, tandis que les 50 millisecondes initiales ne le sont pas.

De plus, la piste Main affiche des informations sur les profils de processeur démarrés et arrêtés avec les fonctions de la console profile() et profileEnd(). L'appel de console.profileEnd() dans votre code ou dans la console ouvre automatiquement le panneau Performances et révèle la trace enregistrée.

Pour masquer le graphique de flammes détaillé des appels JavaScript, consultez Désactiver les échantillons JavaScript. Lorsque les exemples JS sont désactivés, vous ne voyez que les événements de haut niveau tels que Event (click) et Function Call.

Suivre les initiateurs d'événements

La piste Main (Principale) peut afficher des flèches qui relient les initiateurs suivants et les événements qu'ils ont provoqués :

• Invalidation du style ou de la mise en page : Recalculer les styles ou Mise en page
• Demander un frame d'animation -> Frame d'animation déclenché
• Demander un rappel à la prochaine période d'inactivité -> Déclencher le rappel à la prochaine période d'inactivité
• Install Timer -> Timer Fired
• Créer un WebSocket > Envoyer… et Recevoir le handshake WebSocket ou Détruire WebSocket
• Programmer postTask > Appeler postTask ou Abandonner postTask

Pour afficher les flèches, recherchez un initiateur ou l'événement qu'il a provoqué dans le graphique de flammes, puis sélectionnez-le.

Lorsqu'il est sélectionné, l'onglet "Résumé" affiche les liens Initiateur pour pour les initiateurs et les liens Initié par pour les événements qu'ils ont provoqués. Cliquez dessus pour passer d'un événement à l'autre.

Masquer les fonctions et leurs enfants dans le graphique de flammes

Pour désencombrer le graphique de flammes dans le thread Main, vous pouvez masquer les fonctions sélectionnées ou leurs enfants :

1. Dans la piste Main, effectuez un clic droit sur une fonction et choisissez l'une des options suivantes ou appuyez sur le raccourci correspondant :

   • Masquer une fonction (H)
   • Masquer les enfants (C)
   • Masquer les enfants récurrents (R)
   • Réinitialiser les enfants (U)
   • Réinitialiser la trace (T)
   • Ajouter un script à la liste des éléments à ignorer (I)

   

   Un bouton déroulant arrow_drop_down s'affiche à côté du nom de la fonction avec des enfants masqués.

2. Pour afficher le nombre d'enfants masqués, pointez sur le bouton de menu déroulant arrow_drop_down.

   

3. Pour réinitialiser une fonction avec des enfants masqués ou l'ensemble du graphique de flammes, sélectionnez la fonction et appuyez sur U, ou effectuez un clic droit sur n'importe quelle fonction et sélectionnez Réinitialiser la trace.

Ignorer les scripts dans le graphique de flammes

Pour ajouter un script à la liste des éléments à ignorer, effectuez un clic droit sur un script dans le graphique, puis sélectionnez Ajouter un script à la liste des éléments à ignorer.

Le graphique réduit les scripts ignorés, les marque comme Dans la liste des éléments à ignorer et les ajoute aux règles d'exclusion personnalisée dans Paramètres > Paramètres > Liste des éléments à ignorer. Les scripts ignorés sont enregistrés jusqu'à ce que vous les supprimiez de la trace ou des règles d'exclusion personnalisées.

Afficher les activités dans un tableau

Après avoir enregistré une page, vous n'avez pas besoin de vous fier uniquement à la piste Principale pour analyser les activités. Les outils de développement fournissent également trois vues tabulaires pour analyser les activités. Chaque vue vous offre une perspective différente sur les activités :

• Lorsque vous souhaitez afficher les activités racines qui génèrent le plus de travail, utilisez l'onglet Arborescence des appels.
• Pour afficher les activités qui ont pris le plus de temps, utilisez l'onglet Bottom-up (De bas en haut).
• Pour afficher les activités dans l'ordre dans lequel elles se sont produites pendant l'enregistrement, utilisez l'onglet Journal des événements.

Vous pouvez cliquer sur un élément dans l'un des trois tableaux (et dans le tableau des données first party / third party de l'onglet Résumé) pour mettre en évidence les événements correspondants dans la trace et atténuer le reste lorsque vous parcourez la trace de performances.

Pour vous aider à trouver plus rapidement ce que vous cherchez, les trois onglets comportent des boutons de filtrage avancé à côté de la barre Filtrer :

• match_case : Respecter la casse.
• regular_expression Expression régulière.
• match_word Correspondre au mot entier.

Chaque vue tabulaire du panneau Performances affiche des liens vers des activités telles que les appels de fonction. Pour vous aider à déboguer, les outils de développement recherchent les déclarations de fonction correspondantes dans les fichiers sources. De plus, si les cartes sources appropriées sont présentes et activées, les outils de développement trouvent automatiquement les fichiers d'origine.

Cliquez sur un lien pour ouvrir un fichier source dans le panneau Sources.

Activités racines

Voici une explication du concept d'activités racines mentionné dans les sections des onglets Arborescence des appels, Bottom-up et Journal des événements.

Les activités racines sont celles qui obligent le navigateur à effectuer un travail. Par exemple, lorsque vous cliquez sur une page, le navigateur déclenche une activité Event en tant qu'activité racine. Ce Event peut alors entraîner l'exécution d'un gestionnaire.

Dans le graphique de flammes de la trace Main, les activités racines se trouvent en haut du graphique. Dans les onglets Arborescence des appels et Journal des événements, les activités racines sont les éléments de niveau supérieur.

Pour obtenir un exemple d'activités racines, consultez Onglet "Arborescence des appels".

Onglet "Arborescence d'appel"

Utilisez l'onglet Arborescence des appels pour identifier les activités racines qui génèrent le plus de travail.

L'onglet Arborescence des appels n'affiche que les activités qui se sont produites pendant la partie sélectionnée de l'enregistrement. Consultez Sélectionner une partie d'un enregistrement pour savoir comment sélectionner des parties.

Dans cet exemple, les éléments de niveau supérieur de la colonne Activity (Activité), tels que Event, Paint et Composite Layers, sont des activités racines. L'imbrication représente la pile d'appels. Dans cet exemple, Event a provoqué Function Call, qui a provoqué button.addEventListener, qui a provoqué b, et ainsi de suite.

Temps propre représente le temps passé directement dans cette activité. Temps total représente le temps passé dans cette activité ou l'un de ses enfants.

Cliquez sur Temps propre, Temps total ou Activité pour trier le tableau en fonction de cette colonne.

Utilisez la zone Filtrer pour filtrer les événements par nom d'activité.

Par défaut, le menu Regroupement est défini sur Aucun regroupement. Utilisez le menu Regroupement pour trier le tableau d'activité en fonction de différents critères.

Onglet "De bas en haut"

Utilisez l'onglet Bottom-up (De bas en haut) pour voir quelles activités ont pris le plus de temps au total.

L'onglet De bas en haut n'affiche que les activités qui se sont produites pendant la partie sélectionnée de l'enregistrement. Consultez Sélectionner une partie d'un enregistrement pour savoir comment sélectionner des parties.

Dans le graphique de flammes de la piste Main de cet exemple, vous pouvez voir que la quasi-totalité du temps a été consacrée à l'exécution des trois appels à wait(). Par conséquent, l'activité la plus fréquente dans l'onglet De bas en haut est wait. Dans le graphique de flammes, la zone jaune sous les appels à wait correspond en fait à des milliers d'appels à Minor GC. Par conséquent, vous pouvez voir que dans l'onglet Bottom-up, l'activité la plus coûteuse après est Minor GC.

La colonne Self Time (Temps d'exécution) représente le temps total passé directement dans cette activité, pour toutes ses occurrences.

La colonne Temps total représente le temps cumulé passé dans cette activité ou l'une de ses activités enfants.

Table de la pile la plus lourde

Sur le côté droit des onglets Arborescence des appels ou Bottom-up, cliquez sur right_panel_open Afficher la pile la plus lourde pour afficher le tableau Pile la plus lourde.

Ce tableau indique les enfants de l'activité sélectionnée qui ont mis le plus de temps à s'exécuter. Pointez sur un élément du tableau pour voir l'événement correspondant mis en surbrillance dans la piste Principale et le reste est atténué.

Vous pouvez ainsi identifier visuellement dans la trace de performances les activités imbriquées de la pile d'appels qui prennent le plus de temps.

Onglet "Journal des événements"

Utilisez l'onglet Journal des événements pour afficher les activités dans l'ordre dans lequel elles se sont produites pendant l'enregistrement.

L'onglet Journal des événements n'affiche que les activités de la partie sélectionnée de l'enregistrement. Consultez Sélectionner une partie d'un enregistrement pour savoir comment sélectionner des parties.

La colonne Heure de début représente le moment où l'activité a commencé, par rapport au début de l'enregistrement. L'heure de début de 1573.0 ms pour l'élément sélectionné dans cet exemple signifie que l'activité a commencé 1 573 ms après le début de l'enregistrement.

La colonne Temps propre représente le temps passé directement dans cette activité.

Les colonnes Durée totale représentent le temps passé directement dans cette activité ou dans l'une de ses activités enfants.

Cliquez sur Heure de début, Temps propre ou Temps total pour trier le tableau par colonne.

Utilisez la zone Filtrer pour filtrer les activités par nom.

Utilisez le menu Durée pour filtrer les activités qui ont duré moins de 1 ms ou 15 ms. Par défaut, le menu Durée est défini sur Toutes, ce qui signifie que toutes les activités sont affichées.

Désactivez les cases à cocher Chargement, Script, Affichage ou Peinture pour filtrer toutes les activités de ces catégories.

Afficher les repères de performances

Dans une superposition avec des lignes verticales sur la trace de performances, vous pouvez voir des repères de performances importants, tels que :

• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• Événement "DOMContentLoaded" (DCL)
• Événement Onload (L)

Pointez sur les noms des repères en bas de la trace pour afficher leur code temporel.

Afficher les timings personnalisés

Sur la piste Timings (Temps), affichez vos repères de performances personnalisés, par exemple :

• performance.mark() appels. Une marque individuelle avec une info-bulle s'affiche ci-dessous à 813,44 ms, avec l'étiquette Starting to run JavaScript (Début de l'exécution du code JavaScript).
• performance.measure() appels. Un segment jaune est affiché ci-dessous, intitulé Interaction lente.

Sélectionnez un repère pour afficher plus de détails dans l'onglet Résumé, y compris son code temporel, sa durée totale, sa durée propre et l'objet detail. Pour les appels performance.mark() et performance.measure(), l'onglet affiche également les traces de la pile.

Afficher les interactions

Affichez les interactions des utilisateurs sur la piste Interactions pour identifier les problèmes de réactivité potentiels.

Pour afficher les interactions :

1. Ouvrez les outils de développement, par exemple sur cette page de démonstration.
2. Ouvrez le panneau Performances et lancez un enregistrement.
3. Cliquez sur un élément (café) et arrêtez l'enregistrement.
4. Recherchez la piste Interactions dans la chronologie.

Dans cet exemple, la piste Interactions affiche l'interaction Pointeur. Les interactions ont des moustaches qui indiquent les délais d'entrée et de présentation aux limites du temps de traitement. Pointez sur l'interaction pour afficher une info-bulle indiquant le délai d'entrée, le temps de traitement et le délai de présentation.

La piste Interactions affiche également des avertissements Interaction to Next Paint (INP) pour les interactions de plus de 200 millisecondes dans l'onglet Résumé et dans une info-bulle au survol :

La piste Interactions marque les interactions de plus de 200 millisecondes d'un triangle rouge en haut à droite.

Afficher les décalages de mise en page

Affichez les changements de mise en page dans la piste Changements de mise en page. Les déplacements sont représentés par des losanges violets et regroupés en clusters (lignes violettes) en fonction de leur proximité sur la chronologie.

Pour mettre en évidence un élément à l'origine d'un décalage de mise en page dans la fenêtre d'affichage, pointez sur le losange correspondant.

Pour en savoir plus sur un ou plusieurs changements de mise en page dans l'onglet Récapitulatif (avec les timings, les scores, les éléments et les causes potentielles), cliquez sur le losange ou le cluster correspondant.

Pour en savoir plus, consultez Cumulative Layout Shift (CLS).

Afficher les animations

Affichez les animations sur la piste Animations. Les animations sont nommées d'après les propriétés ou éléments CSS correspondants, le cas échéant (par exemple, transform ou my-element). Les animations sans composition sont marquées par des triangles rouges en haut à droite.

Sélectionnez une animation pour afficher plus de détails dans l'onglet Résumé, y compris les raisons des échecs de composition.

Afficher l'activité du GPU

Affichez l'activité du GPU dans la section GPU.

Afficher l'activité de trame

Affichez l'activité de pixellisation dans la section Thread Pool (Pool de threads).

Analyser les images par seconde (FPS)

Les outils de développement offrent de nombreuses façons d'analyser les images par seconde :

• Utilisez la section Frames pour voir combien de temps a pris une frame spécifique.
• Utilisez l'indicateur de FPS pour obtenir une estimation en temps réel du nombre de FPS pendant l'exécution de la page. Consultez Afficher les images par seconde en temps réel avec le compteur de FPS.

Section "Frames"

La section Frames (Images) indique la durée exacte d'une image spécifique.

Pointez sur un frame pour afficher une info-bulle contenant plus d'informations à son sujet.

Cet exemple montre une info-bulle lorsque vous pointez sur un frame.

La section Frames peut afficher quatre types de frames :

1. Frame inactif (blanc) Aucune modification.
2. Cadre (vert). Rendu comme prévu et dans les délais.
3. Frame partiellement présenté (jaune avec un motif de ligne discontinue large et clair). Chrome a fait de son mieux pour afficher au moins certaines mises à jour visuelles à temps. Par exemple, si le travail du thread principal du processus de moteur de rendu (animation du canevas) est en retard, mais que le thread du compositeur (défilement) est à l'heure.
4. Frame supprimé (rouge avec un motif de ligne continue dense) : Chrome ne peut pas afficher le frame dans un délai raisonnable.

Cet exemple montre une info-bulle lorsque vous pointez sur un frame partiellement présenté.

Cliquez sur un frame pour afficher encore plus d'informations à son sujet dans l'onglet Résumé. Les outils de développement mettent en évidence le frame sélectionné en bleu.

Afficher les requêtes réseau

Développez la section Réseau pour afficher une cascade des requêtes réseau qui se sont produites pendant l'enregistrement des performances.

À côté du nom de la piste Réseau, une légende indique les types de requêtes avec des codes couleur.

Les requêtes bloquant l'affichage sont marquées d'un triangle rouge en haut à droite.

Pointez sur une demande pour afficher une info-bulle contenant les informations suivantes :

• URL de la requête et temps total nécessaire à son exécution.
• Priorité ou changement de priorité, par exemple Medium -> High.
• Indique si la requête est Render-blocking ou non.
• Une répartition des délais de requête, décrite plus loin.

Lorsque vous cliquez sur une requête, la piste Réseau trace une flèche entre l'initiateur et la requête.

De plus, le panneau Performance affiche l'onglet Résumé avec plus d'informations sur la requête, y compris, mais sans s'y limiter, les champs Priorité initiale et Priorité (finale). Si leurs valeurs diffèrent, cela signifie que la priorité de récupération de la requête a changé pendant l'enregistrement. Pour en savoir plus, consultez Optimiser le chargement des ressources avec l'API Fetch Priority.

L'onglet Résumé affiche également une répartition des temps de la requête.

Dans cet exemple, la requête pour www.google.com est représentée par une ligne à gauche (|–), une barre au milieu avec une partie sombre et une partie claire, et une ligne à droite (–|).

S'il est présent, l'onglet Résumé affiche également une répartition des temps de réponse du serveur pour les requêtes réseau qui implémentent des technologies de rendu côté serveur. Pour ces requêtes, le panneau Performances extrait les données de l'en-tête de réponse Server-Timing.

Vous trouverez une autre répartition des temps dans l'onglet Réseau. Effectuez un clic droit sur la requête dans la piste Réseau ou sur son URL dans l'onglet Résumé, puis cliquez sur Afficher dans le panneau "Réseau". Les outils de développement vous redirigent vers le panneau Réseau et sélectionnent la requête correspondante. Ouvrez l'onglet Timing.

Voici comment ces deux répartitions sont liées :

• La ligne de gauche (|–) inclut tous les événements jusqu'au groupe Connection start. En d'autres termes, il s'agit de tout ce qui précède Request Sent.
• Les parties claires de la barre sont Request sent et Waiting for server response.
• La partie sombre de la barre est Content download.
• La ligne de droite (–|) correspond au temps passé à attendre le thread principal. L'onglet Réseau > Temps ne l'affiche pas.

Afficher les métriques de mémoire

Cochez la case Mémoire pour afficher les métriques de mémoire du dernier enregistrement.

Les outils de développement affichent un nouveau graphique Memory (Mémoire) au-dessus de l'onglet Summary (Récapitulatif). Un nouveau graphique HEAP est également disponible sous le graphique NET. Le graphique HEAP fournit les mêmes informations que la ligne Tas de mémoire JS dans le graphique Mémoire.

Cet exemple montre les métriques de mémoire au-dessus de l'onglet Résumé.

Les lignes de couleur du graphique correspondent aux cases à cocher de couleur situées au-dessus du graphique. Décochez une case pour masquer cette catégorie dans le graphique.

Le graphique n'affiche que la région de l'enregistrement sélectionnée. Dans l'exemple précédent, le graphique Memory (Mémoire) n'affiche que l'utilisation de la mémoire au début de l'enregistrement, jusqu'à environ 1 000 ms.

Afficher la durée d'une partie d'un enregistrement

Lorsque vous analysez une section comme Réseau ou Principal, vous avez parfois besoin d'une estimation plus précise de la durée de certains événements. Maintenez la touche Maj enfoncée, cliquez de manière prolongée, puis faites glisser le curseur vers la gauche ou la droite pour sélectionner une partie de l'enregistrement. En bas de la sélection, les outils de développement indiquent la durée de cette partie.

Dans cet exemple, le code temporel 488.53ms en bas de la partie sélectionnée indique la durée de cette partie.

Afficher une capture d'écran

Consultez Effectuer des captures d'écran pendant l'enregistrement pour savoir comment activer les captures d'écran.

Pointez sur la vue d'ensemble de la chronologie pour afficher une capture d'écran de l'apparence de la page à ce moment de l'enregistrement. La section Vue d'ensemble de la timeline contient les graphiques CPU, FPS et NET.

Vous pouvez également afficher des captures d'écran en cliquant sur une image dans la section Frames. Les outils de développement affichent une petite version de la capture d'écran dans l'onglet Summary (Résumé).

Cet exemple montre la capture d'écran du frame 195.5ms dans l'onglet Récapitulatif lorsque vous cliquez dessus dans la section Frames.

Cliquez sur la vignette dans l'onglet Résumé pour zoomer sur la capture d'écran.

Cet exemple montre une capture d'écran agrandie après avoir cliqué sur sa miniature dans l'onglet Résumé.

Afficher les informations sur les calques

Pour afficher des informations sur les calques avancés d'un frame :

1. Activer l'instrumentation avancée de l'affichage.
2. Sélectionnez un frame dans la section Frames. Les outils de développement affichent des informations sur ses calques dans le nouvel onglet Calques, à côté de l'onglet Journal des événements.

Pointez sur une couche pour la mettre en surbrillance dans le diagramme.

Cet exemple montre la couche #39 mise en surbrillance lorsque vous pointez dessus.

Pour déplacer le diagramme :

• Cliquez sur Mode Panoramique pour vous déplacer le long des axes X et Y.
• Cliquez sur Mode Rotation pour faire pivoter l'objet sur l'axe Z.
• Cliquez sur Réinitialiser la transformation pour rétablir la position d'origine du diagramme.

Découvrez l'analyse des couches en action :

Afficher le profileur de peinture

Pour afficher des informations avancées sur un événement de peinture :

1. Activer l'instrumentation avancée de l'affichage.
2. Sélectionnez un événement Paint dans la piste Main.

Analyser les performances de rendu avec l'onglet "Rendu"

Utilisez les fonctionnalités de l'onglet Rendu pour visualiser les performances de rendu de votre page.

Ouvrez l'onglet Rendering (Rendu).

Afficher les images par seconde en temps réel avec le compteur de FPS

Les statistiques de rendu des frames sont une superposition qui s'affiche en haut à droite de votre fenêtre d'affichage. Il fournit une estimation en temps réel du nombre d'images par seconde pendant l'exécution de la page.

Consultez Statistiques de rendu d'image.

Afficher les événements de peinture en temps réel avec le clignotement de peinture

Utilisez l'option Mise en surbrillance des zones redessinées pour afficher en temps réel tous les événements de peinture sur la page.

Consultez Peinture clignotante.

Afficher une superposition de calques avec les bordures de calque

Utilisez Bordures des calques pour afficher une superposition des bordures et des tuiles des calques en haut de la page.

Consultez Bordures des calques.

Identifier les problèmes de performances de défilement en temps réel

Utilisez Scrolling Performance Issues (Problèmes de performances de défilement) pour identifier les éléments de la page qui comportent des écouteurs d'événements liés au défilement susceptibles de nuire aux performances de la page. Les outils de développement mettent en évidence les éléments potentiellement problématiques en bleu turquoise.

Consultez Problèmes de performances de défilement.