Cette page constitue une référence complète des fonctionnalités des outils pour les développeurs Chrome liées à l'analyse des performances.
Consultez Premiers pas avec l'analyse des performances d'exécution pour suivre un tutoriel guidé sur l'analyse d'un les performances de votre page à l'aide des outils pour les développeurs Chrome.
Enregistrer vos performances
Vous pouvez enregistrer les performances d'exécution ou de chargement.
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, car plutôt qu'au chargement.
- Accédez à la page que vous souhaitez analyser.
- Cliquez sur l'onglet Performances dans les outils de développement.
Cliquez sur Record (Enregistrer)
.
Interagissez avec la page. Les outils de développement enregistrent toute l'activité sur la page résultant de votre des interactions.
Cliquez à 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 en cours de chargement, plutôt que de courir.
- Accédez à la page que vous souhaitez analyser.
- Ouvrez le panneau Performances des outils de développement.
Cliquez sur Start profiling and refresh page (Démarrer le profilage et actualiser la page).
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 enregistre les métriques de performances pendant l'actualisation de la page, puis arrête automatiquement l'enregistrement quelques secondes après la fin du chargement.
Les outils de développement zooment automatiquement sur la partie de l'enregistrement où la majeure partie de l'activité s'est produite.
Dans cet exemple, le panneau Performances affiche l'activité lors du chargement d'une page.
Effectuer des captures d'écran pendant l'enregistrement
Cochez la case Captures d'écran pour faire une capture d'écran de chaque image pendant l'enregistrement.
Pour savoir comment interagir avec les captures d'écran, consultez Afficher une capture d'écran.
Forcer la récupération de mémoire pendant l'enregistrement
Lorsque vous enregistrez une page, cliquez sur Récupérer la corbeille mop pour forcer la récupération de mémoire.
Afficher les paramètres d'enregistrement
Cliquez sur Paramètres de capture.
jusqu'à
d'autres paramètres liés à la façon dont les outils de développement enregistrent les performances.
Désactiver les exemples JavaScript
Par défaut, la piste Main d'un enregistrement affiche des piles d'appels détaillées de JavaScript. appelées pendant l'enregistrement. Pour désactiver ces piles d'appels:
- Ouvrez le menu Paramètres de capture
. Consultez Afficher les paramètres d'enregistrement.
- Cochez la case Disable JavaScript Samples.
- Enregistrez la page.
Les captures d'écran suivantes montrent la différence entre la désactivation et l'activation des exemples JavaScript. La La piste principale de l'enregistrement est beaucoup plus courte lorsque l'échantillonnage est désactivé, car il omet tous les les piles d'appels JavaScript.
Cet exemple présente un enregistrement avec des échantillons JS désactivés.
Cet exemple présente un enregistrement avec des échantillons JavaScript activés.
Limiter la connexion réseau pendant l'enregistrement
Pour limiter la connexion réseau pendant l'enregistrement:
- Ouvrez le menu Paramètres de capture
. Consultez Afficher les paramètres d'enregistrement.
- Définissez le réseau sur le niveau de limitation choisi.
Limiter le processeur pendant l'enregistrement
Pour limiter la capacité du processeur pendant l'enregistrement:
- Ouvrez le menu Paramètres de capture
. Consultez Afficher les paramètres d'enregistrement.
- Définissez le processeur sur le niveau de limitation choisi.
La limitation dépend des capacités de votre ordinateur. Par exemple, l'option 2x Ralentissement fait fonctionner votre processeur deux fois plus lentement que sa capacité habituelle. Les outils de développement ne peuvent pas vraiment simuler les processeurs des appareils mobiles, car leur architecture est très différente de celle ordinateurs de bureau et portables.
Activer les statistiques du sélecteur CSS
Pour afficher les statistiques de vos sélecteurs de règles CSS lors d'événements de longue durée Recalculate Style (Recalculer le style), procédez comme suit:
- Ouvrez le menu Paramètres de capture
. Consultez Afficher les paramètres d'enregistrement.
- Cochez la case Activer les statistiques du sélecteur CSS.
Pour en savoir plus, découvrez comment analyser les performances du sélecteur CSS lors de la modification des événements de style.
Activer l'instrumentation de peinture avancée
Pour afficher une instrumentation de peinture détaillée:
- Ouvrez le menu Paramètres de capture
. Consultez Afficher les paramètres d'enregistrement.
- Cochez la case Activer l'instrumentation avancée de peinture.
Pour savoir comment interagir avec les informations sur les peintures, consultez les sections Afficher les calques et Afficher les images représentant des peintures. profileur.
Émuler la simultanéité matérielle
Pour tester les performances de l'application avec différents nombres de cœurs de processeur, vous pouvez configurer la valeur signalée par la propriété navigator.hardwareConcurrency
. Certaines applications utilisent cette propriété pour contrôler le degré de parallélisme de leur application, par exemple pour contrôler la taille du pool pthread Emscripten.
Pour émuler la simultanéité matérielle:
- Ouvrez le menu Paramètres de capture
. Consultez Afficher les paramètres d'enregistrement.
- Cochez la case Simultanéité matérielle et définissez le nombre de cœurs dans la zone de saisie.
Les outils de développement affichent une icône d'avertissement à côté de l'onglet Performance pour vous rappeler que l'émulation de simultanéité matérielle est activée.
Pour rétablir la valeur par défaut de 10
, cliquez sur le bouton Rétablir .
Sauvegarder un enregistrement
Pour sauvegarder un enregistrement, effectuez un clic droit et sélectionnez Save Profile (Enregistrer le profil).
Charger un enregistrement
Pour charger un enregistrement, effectuez un clic droit et sélectionnez Load Profile (Charger le profil).
Effacer l'enregistrement précédent
Après avoir effectué un enregistrement, appuyez sur Effacer l'enregistrement.
pour effacer cet enregistrement du panneau Performances.
Analyser un enregistrement de performances
Une fois que vous avez enregistré les performances d'exécution ou les performances de chargement, la section Performance fournit beaucoup de données pour analyser les performances de ce qui s'est passé.
Parcourir l'enregistrement
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.
Sélectionnez une partie de l'enregistrement
Sous la barre d'actions du panneau Performances et en haut de l'enregistrement, vous pouvez consulter la section Vue d'ensemble de la chronologie avec les graphiques Processeur et NET.
Pour sélectionner une partie d'un enregistrement, cliquez de manière prolongée, puis faites glisser votre doigt vers la gauche ou vers la droite dans la vue d'ensemble de la chronologie.
Pour sélectionner une partie à l'aide du clavier:
- Sélectionnez la piste principale ou les pistes voisines.
- Utilisez respectivement les touches W, A, S et D pour faire un zoom avant, un déplacement vers la gauche, un zoom arrière et un déplacement vers la droite.
Pour sélectionner une partie à l'aide d'un pavé tactile:
- Pointez sur la section Vue d'ensemble de la chronologie ou sur l'une des pistes (Principale et les pistes voisines).
- Avec deux doigts, balayez l'écran vers le haut pour faire un zoom arrière, balayez l'écran vers la gauche pour vous déplacer vers la gauche, balayez l'écran vers le bas pour faire un zoom avant et balayez l'écran vers la droite pour vous déplacer vers la droite.
Créer un fil d'Ariane et passer d'un niveau de zoom à un autre
La page Vue d'ensemble de la chronologie vous permet de créer plusieurs fils d'Ariane imbriqués les unes après les autres, d'augmenter les niveaux de zoom, puis de passer au niveau choisi.
Pour créer et utiliser un fil d'Ariane:
- Dans Vue d'ensemble de la chronologie, sélectionnez une partie de l'enregistrement.
- Pointez sur la sélection et cliquez sur le bouton N ms zoom_in. La sélection se développe pour remplir l'aperçu de la chronologie. Une chaîne de fils d'Ariane commence à être créée en haut de la vue d'ensemble de la chronologie.
- 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.
- Pour accéder au niveau de zoom de votre choix, cliquez sur le fil d'Ariane correspondant dans la chaîne en haut de la vue d'ensemble de la chronologie.
Faire défiler un long graphique de flammes
Pour faire défiler un graphique de type "flammes" long dans le canal Principal ou sur l'une des pistes voisines, cliquez de manière prolongée, puis faites-le glisser dans n'importe quelle direction jusqu'à ce que vous voyiez ce que vous cherchez.
Activités de recherche
Pour ouvrir un champ de recherche en bas du panneau Performances, appuyez sur:
- macOS: Commande+F
- Windows et Linux: Ctrl+F
Dans cet exemple, une expression régulière affichée dans le champ de recherche situé en bas de l'écran permet de rechercher 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_less Suivant.
- Appuyez sur Maj+Entrée pour sélectionner l'élément précédent ou sur Entrée pour sélectionner le suivant.
Le panneau Performances affiche une info-bulle concernant 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 des performances, vous pouvez modifier l'ordre des pistes et masquer celles qui ne sont pas pertinentes dans le mode de configuration du canal.
Pour déplacer et masquer des pistes:
- Pour passer en mode de configuration, effectuez un clic droit sur le nom d'un canal, puis sélectionnez Configurer les canaux.
- Cliquez sur arrow_upward vers le haut ou arrow_downward pour déplacer un titre vers le haut ou vers le bas. Cliquez sur visibility_off pour la masquer.
- Lorsque vous avez terminé, cliquez sur Terminer la configuration des canaux en bas pour quitter le mode de configuration.
Regardez la vidéo pour découvrir ce processus en action.
Le panneau Performance enregistre la configuration des canaux pour les nouvelles traces, mais pas dans les prochaines sessions des outils de développement.
Afficher l'activité du thread principal
Utilisez le canal Main (Principal) pour afficher l'activité survenue sur le thread principal de la page.
Cliquez sur un événement pour afficher plus d'informations à son sujet dans l'onglet Récapitulatif. Le panneau Performances présente 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 Summary (Résumé).
Lire le graphique de type "flamme"
Le panneau Performance représente l'activité principale des threads dans un graphique de type "flamme". L'axe des x représente l'enregistrement au fil du temps. L'axe des ordonnées représente la pile d'appels. Les événements en haut de la page sont à l'origine de ceux en dessous.
Cet exemple illustre un graphique de flammes dans le canal Main (Principal). Un événement click
a provoqué un appel de fonction anonyme. Cette fonction, à son tour, appelée onEndpointClick_
, appelée handleClick_
, et ainsi de suite.
Le panneau Performances attribue des couleurs aléatoires aux scripts afin de diviser le graphique de flammes et de 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 apparaissent en rose pâle. Le jaune foncé représente l'activité de script, et l'événement violet l'activité d'affichage. Les événements jaunes et violets plus foncés sont les mêmes pour tous les enregistrements.
Les tâches longues sont également mises en évidence par un triangle rouge, et la partie supérieure à 50 millisecondes est grisée:
Dans cet exemple, la tâche a pris plus de 400 millisecondes. La partie représentant les 350 dernières millisecondes apparaît donc dans une zone rouge, mais pas les 50 premières millisecondes.
De plus, le canal Main (Principal) affiche des informations sur les profils de processeur démarrés et arrêtés avec les fonctions de console profile()
et profileEnd()
.
Pour masquer le graphique de type "flamme" détaillé des appels JavaScript, consultez Désactiver les exemples JavaScript. Lorsque les exemples JS sont désactivés, seuls les événements de haut niveau tels que Event (click)
et Function Call
s'affichent.
Suivre les auteurs d'événements
La piste Main peut comporter des flèches reliant les déclencheurs suivants et les événements qu'ils ont causés:
- Invalidation de style ou de mise en page -> Recalculer les styles ou la mise en page
- Request Animation Frame (Demander un frame d'animation) -> Frame d'animation déclenché
- Demander un rappel à la prochaine période d'inactivité -> Rappel d'inactivité
- Minuteur d'installation -> Minuteur déclenché
- Créer un WebSocket -> Send... (Envoyer...) et receive WebSocket Handshake (Envoyer le handshake WebSocket) ou Destroy WebSocket (Détruire WebSocket)
Pour voir les flèches, recherchez dans le graphique de type "flamme" un déclencheur ou l'événement qu'il a généré, puis sélectionnez-le.
Lorsque cette option est sélectionnée, l'onglet "Summary" (Résumé) affiche les liens Initiator for (Initiateur pour) pour les initiés et Initié par pour les événements qu'ils ont causés. Cliquez dessus pour passer d'un événement à un autre.
Masquer les fonctions et leurs enfants dans le graphique de type "flamme"
Pour désencombrer le graphique de flammes dans le thread principal, vous pouvez masquer les fonctions sélectionnées ou leurs enfants:
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 la 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.
- Masquer la fonction (
Pour afficher le nombre d'enfants masqués, passez la souris sur le bouton déroulant arrow_drop_down.
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, respectivement.
Ignorer les scripts dans le graphique de type "flamme"
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 Sur la liste des éléments à ignorer, puis les ajoute aux règles d'exclusion personnalisée dans Paramètres > Paramètres > Liste d'é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 appuyer uniquement sur le canal Principal pour analyser les activités. Les outils de développement proposent également trois vues tabulaires pour l'analyse des activités. Chaque vue vous offre une du point de vue des activités:
- Pour afficher les activités racine qui entraînent le plus de tâches, utilisez l'arborescence d'appels. .
- Lorsque vous souhaitez afficher les activités pour lesquelles vous avez directement passé le plus de temps, utilisez les Onglet Ascendant.
- Pour afficher les activités dans l'ordre dans lequel elles se sont produites pendant l'enregistrement, utilisez l'onglet Journal des événements.
Pour vous aider à trouver plus rapidement ce que vous cherchez, les trois onglets comportent des boutons de filtrage avancé à côté de la barre Filtre:
- match_case Respecte la casse.
- regular_expression Expression régulière.
- match_word Mot entier.
Chaque vue tabulaire du panneau Performances affiche des liens vers des activités telles que les appels de fonction. Pour vous aider au débogage, les outils de développement trouvent 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 racine
Voici une explication du concept des activités racine mentionné dans l'onglet Arborescence d'appel. l'onglet Ascendant et les sections Journal des événements.
Les activités racine sont celles qui font travailler le navigateur. Par exemple, lorsque vous cliquez sur
le navigateur déclenche une activité Event
en tant qu'activité racine. Ce Event
peut alors entraîner un gestionnaire
à exécuter.
Dans le graphique de type "flamme" du canal principal, les activités racine se trouvent en haut du graphique. Pendant l'appel Arborescence et Journal des événements, les activités racine sont les éléments de premier niveau.
Consultez la section Onglet Arborescence d'appel pour obtenir un exemple d'activités racine.
Onglet "Arborescence d'appel"
Utilisez l'onglet Arborescence d'appel pour afficher les activités racine qui génèrent le plus de travail.
L'onglet Arborescence d'appel n'affiche les activités que pendant la partie sélectionnée de l'enregistrement. Voir Sélectionnez une partie d'un enregistrement pour apprendre à en choisir une.
Dans cet exemple, le premier niveau des éléments de la colonne Activité, tels que Event
, Paint
et
Les Composite Layers
sont des activités racine. L'imbrication représente la pile d'appel. Dans
Dans cet exemple, Event
a généré Function Call
, qui a provoqué button.addEventListener
, qui a causé b
,
et ainsi de suite.
Le temps propre représente le temps directement passé dans cette activité. La durée totale représente du temps passé dans cette activité ou dans l'un de ses enfants.
Cliquez sur Temps propre, Temps total ou Activité pour trier le tableau en fonction de cette colonne.
Utilisez le champ Filtre 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 les tableau d'activité en fonction de différents critères.
Cliquez sur Afficher la pile la plus lourde.
pour afficher un autre tableau à droite du tableau Activité. Cliquez sur une activité pour remplir la
Pile la plus lourde. Le tableau Pile la plus lourde indique les enfants des éléments sélectionnés
l'exécution de l'activité a pris
le plus de temps.
L'onglet Ascendant
Utilisez l'onglet Ascendant pour voir quelles activités ont pris directement le plus de temps dans leur ensemble.
L'onglet De bas en haut n'affiche les activités que pendant la partie sélectionnée de l'enregistrement. Voir Sélectionnez une partie d'un enregistrement pour apprendre à en choisir une.
Dans le graphique de type "flamme" du canal principal de cet exemple, vous pouvez constater que la quasi-totalité
du temps a été consacré à l'exécution des trois appels à wait()
. En conséquence, la plus forte activité
L'onglet Ascendant est wait
. Dans le graphique de flammes, le jaune sous le
les appels à wait
sont en réalité des milliers d'appels Minor GC
. En conséquence, vous pouvez constater
Ascendant, l'activité suivante la plus chère est Minor GC
.
La colonne Self Time (Temps propre) représente le temps cumulé passé directement dans cette activité sur l'ensemble de ses occurrences.
La colonne Total Time (Temps total) représente le temps total passé dans cette activité ou dans l'un de ses enfants.
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 au cours de la l'enregistrement.
L'onglet Journal des événements n'affiche les activités que pendant la partie sélectionnée de l'enregistrement. Voir Sélectionnez une partie d'un enregistrement pour apprendre à en choisir une.
La colonne Heure de début représente le point de début de l'activité par rapport au début
de l'enregistrement. 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 Self Time (Temps propre) représente le temps passé directement dans cette activité.
Les colonnes Temps total 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 en fonction de cette colonne.
Utilisez le champ Filtre pour filtrer les activités par nom.
Utilisez le menu Durée pour filtrer les activités qui ont pris 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écochez les cases Chargement, Script, Rendu ou Peinture pour exclure toutes les créations les activités de ces catégories.
Afficher les codes temporels
Sur le suivi des temps, vous pouvez afficher les repères importants, tels que:
- First Paint (FP)
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
- Événement DOMContentLoaded (DCL)
- Événement de chargement (L)
- Vos appels
performance.mark()
personnalisés. Une marque individuelle avec une info-bulle s'affiche en dessous au bout de 813,44 ms, avec le libellé Démarrage de l'exécution de JavaScript. - Vos appels
performance.measure()
personnalisés. Un segment jaune, intitulé Interaction lente, est affiché en jaune ci-dessous.
Sélectionnez un repère pour afficher plus de détails dans l'onglet Résumé, y compris l'horodatage, l'heure totale, le temps propre et l'objet detail
.
Afficher les interactions
Affichez les interactions des utilisateurs dans le suivi Interactions pour détecter d'éventuels problèmes de réactivité.
Pour afficher les interactions:
- Accédez aux outils de développement, par exemple, sur cette page de démonstration.
- Ouvrez le panneau Performances, puis démarrez un enregistrement.
- Cliquez sur un élément (café) et arrêtez l'enregistrement.
- Recherchez la piste Interactions dans la timeline.
Dans cet exemple, la piste Interactions montre l'interaction Pointeur. Les interactions comportent des moustaches qui indiquent les retards d'entrée et de présentation au moment du traitement. Pointez sur l'interaction pour afficher une info-bulle indiquant le délai d'entrée, de traitement et de présentation.
Le canal Interactions affiche également des avertissements Interaction to Next Paint (INP) pour des interactions de plus de 200 millisecondes dans l'onglet Summary (Résumé) et dans une info-bulle lorsque l'utilisateur pointe sur l'élément:
Le suivi des interactions marque les interactions de plus de 200 millisecondes avec un triangle rouge en haut à droite.
Afficher l'activité GPU
Affichez l'activité GPU dans la section GPU.
Afficher l'activité matricielle
Affichez l'activité matricielle dans la section Pool de threads.
Analyser le nombre d'images par seconde (FPS)
Les outils de développement proposent de nombreuses façons d'analyser le nombre d'images par seconde:
- Consultez la section Images pour connaître la durée d'une image spécifique.
- Utilisez le mètre FPS pour obtenir une estimation en temps réel du nombre d'images par seconde pendant l'exécution de la page. Voir Afficher le nombre d'images par seconde en temps réel à l'aide de l'outil de mesure du FPS.
La section Cadres
La section Images vous indique exactement la durée d'une image spécifique.
Pointez sur un cadre pour afficher une info-bulle contenant plus d'informations à son sujet.
Cet exemple montre une info-bulle lorsque vous pointez sur un cadre.
La section Cadres peut afficher quatre types de cadres:
- Cadre inactif (blanc) : Aucune modification.
- Cadre (vert) : Elles sont affichées comme prévu et à temps.
- Cadre partiellement présenté (jaune avec un motif en pointillés larges et creux) : Chrome a fait de son mieux pour afficher au moins quelques mises à jour visuelles à temps. Par exemple, dans le cas où le thread principal du processus de rendu (animation du canevas) est en retard, mais que le thread du compositeur (défilement) est arrivé à temps.
- Image supprimée (rouge avec un motif dense à lignes continues) : Chrome ne peut pas afficher le cadre dans un délai raisonnable.
Cet exemple montre une info-bulle lorsque vous pointez sur un cadre partiellement présenté.
Cliquez sur un cadre pour afficher encore plus d'informations sur celui-ci dans l'onglet Résumé. DevTools présente le cadre 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 survenues pendant l'enregistrement des performances.
À côté du nom du canal Réseau, une légende indique les types de requêtes codés par couleur.
Les requêtes bloquant l'affichage sont signalées par un triangle rouge en haut à droite.
Pointez sur une demande pour afficher une info-bulle contenant les éléments suivants:
- l'URL de la requête et le 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 Network affiche une flèche à partir de son lanceur de requête.
De plus, le panneau Performances affiche l'onglet Récapitulatif qui contient des informations supplémentaires sur la demande, y compris, mais sans s'y limiter, les champs Priorité initiale et (final) Priorité. Si leurs valeurs diffèrent, 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 le détail des délais de la requête.
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 (–|
).
Vous trouverez une autre répartition temporelle dans l'onglet Network (Réseau). Effectuez un clic droit sur la requête dans le canal Réseau ou 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 Network (Réseau) et sélectionne la requête correspondante. Ouvrez l'onglet Durée.
Voici comment ces deux répartitions sont associées:
- La ligne de gauche (
|–
) représente tous les éléments situés jusqu'au groupe d'événementsConnection start
inclus. En d'autres termes, il s'agit de tout ce qui précèdeRequest Sent
. - La partie claire de la barre correspond à
Request sent
etWaiting for server response
. - La partie sombre de la barre est
Content download
. - La ligne de droite (
–|
) correspond au temps passé à attendre le thread principal. La page Réseau > L'onglet Durée ne l'affiche pas.
Afficher les métriques de mémoire
Cochez la case Memory (Mémoire) pour afficher les métriques de mémoire du dernier enregistrement.
Les outils de développement affichent un nouveau graphique Mémoire au-dessus de l'onglet Résumé. Vous trouverez également un nouveau graphique sous le graphique NET, appelé HEAP. Le graphique HEAP fournit les mêmes informations que le graphique JS Ligne de tas dans le graphique Mémoire.
Cet exemple affiche les métriques de mémoire au-dessus de l'onglet Summary (Résumé).
Les lignes de couleur du graphique correspondent aux cases à cocher colorées situées au-dessus du graphique. Désactivez une case à cocher pour masquer cette catégorie du graphique.
Le graphique n'affiche que la région de l'enregistrement sélectionné. 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 Principale, vous avez parfois besoin d'une estimation plus précise combien de temps ont duré certains événements. Maintenez la touche Maj enfoncée, cliquez de manière prolongée, puis faites glisser votre doigt vers la gauche ou vers la droite pour sélectionner une partie de l'enregistrement. En bas de votre sélection, les outils de développement indiquent la durée de cette opération.
Dans cet exemple, le code temporel 488.53ms
au bas de la partie sélectionnée indique la durée
de cette partie.
Afficher une capture d'écran
Pour savoir comment activer les captures d'écran, consultez Effectuer des captures d'écran pendant l'enregistrement.
Pointez sur Vue d'ensemble de la chronologie pour voir une capture d'écran de la page à ce moment-là. l'enregistrement. La section Vue d'ensemble de la chronologie contient les graphiques Processeur, FPS et NET.
Vous pouvez également afficher des captures d'écran en cliquant sur un cadre de la section Images. Les outils de développement affichent une version réduite 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 Summary (Résumé) 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 zoomée lorsque vous cliquez sur sa vignette dans l'onglet Summary (Résumé).
Afficher les informations sur les calques
Pour afficher les informations des calques avancés d'un cadre:
- Activez l'instrumentation de peinture avancée.
- Sélectionnez un cadre dans la section Cadres. Les outils de développement affichent des informations sur leurs couches dans la Nouvel onglet Calques à côté de l'onglet Journal des événements
Pointez sur un calque pour le mettre en surbrillance dans le diagramme.
Dans cet exemple, le calque #39 est mis en surbrillance lorsque vous pointez dessus.
Pour déplacer le diagramme:
- Cliquez sur Mode panoramique
. pour se déplacer le long des axes X et Y.
- Cliquez sur Mode rotation.
pour faire pivoter le long de l’axe Z.
- Cliquez sur Reset Transform (Réinitialiser la transformation)
. pour rétablir la position d'origine du diagramme.
Voir l'analyse des calques en action:
Afficher le profileur de peinture
Pour afficher des informations avancées sur un événement de peinture:
- Activez l'instrumentation de peinture avancée.
- Sélectionnez un événement Paint sur le canal Main (Principal).
Analyser les performances d'affichage à l'aide de l'onglet "Affichage"
Utilisez les fonctionnalités de l'onglet Affichage pour visualiser les performances d'affichage de votre page.
Afficher le nombre d'images par seconde en temps réel avec le compteur de FPS
Les statistiques sur le rendu des images s'affichent en superposition dans l'angle supérieur droit de votre fenêtre d'affichage. Il fournit une estimation en temps réel du FPS lors de l'exécution de la page.
Consultez la section Statistiques sur le rendu des images.
Afficher les événements de peinture en temps réel avec Paint Flashing
Utilisez Clignotement de peinture pour obtenir une vue en temps réel de tous les événements de peinture sur la page.
Consultez la section Clignotement de la peinture.
Afficher une superposition de calques avec des bordures
Utilisez l'option Bordures des calques pour afficher une superposition des bordures et des tuiles des calques en haut de la page.
Consultez la section Bordures des calques.
Identifier les problèmes de performances de défilement en temps réel
Utilisez l'outil Problèmes de performances de défilement pour identifier les éléments de la page dont les écouteurs d'événements sont liés au défilement et qui sont susceptibles de nuire aux performances de la page. Les outils de développement les éléments potentiellement problématiques en bleu canard.
Consultez la section Problèmes de performances du défilement.