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

Kayce Basques

Sofia Emelianova

Cette page offre une documentation de référence complète sur les fonctionnalités des outils pour les développeurs Chrome permettant d'analyser les performances.

Consultez la section Premiers pas avec l'analyse des 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.

Enregistrer les 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, et non lors de son chargement.

1. Accédez à la page que vous souhaitez analyser.
2. Cliquez sur l'onglet Performances dans les outils de développement.

3. Cliquez sur Record (Enregistrer) .

   

4. Interagissez avec la page. Les outils de développement enregistrent toutes les activités sur la page résultant de vos interactions.

5. Cliquez à nouveau sur Record (Enregistrer) ou sur Stop (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 et non pas en cours d'exécution.

1. Accédez à la page que vous souhaitez analyser.
2. Ouvrez le panneau Performances des outils de développement.

3. Cliquez sur Start profiling and reload 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. Ensuite, les outils de développement enregistrent 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 zooment automatiquement sur la partie de l'enregistrement où la majeure partie de l'activité a eu lieu.

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 effectuer une capture d'écran de chaque image pendant l'enregistrement.

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

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

Lorsque vous enregistrez une page, cliquez sur 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 exposer d'autres paramètres liés à la manière 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 lors de l'enregistrement. Pour désactiver ces piles d'appels:

1. Ouvrez le menu Paramètres de capture . Consultez Afficher les paramètres d'enregistrement.
2. Cochez la case Disable JavaScript Samples (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 de JavaScript par exemple. La piste Main de l'enregistrement est beaucoup plus courte lorsque l'échantillonnage est désactivé, car il omet toutes les piles d'appels JavaScript.

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

Cet exemple présente 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 choisi.

Limiter le processeur pendant l'enregistrement

Pour limiter le processeur pendant l'enregistrement:

1. Ouvrez le menu Paramètres de capture . Consultez Afficher les paramètres d'enregistrement.
2. 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 ralentit permet au processeur de fonctionner deux fois plus lentement que ses capacités habituelles. Les outils de développement ne peuvent pas réellement simuler les processeurs des appareils mobiles, car l'architecture des appareils mobiles est très différente de celle des ordinateurs de bureau et portables.

Activer l'instrumentation de peinture avancée

Pour afficher une instrumentation de peinture détaillée:

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

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

Émuler la simultanéité matérielle

Pour tester les performances de l'application avec un nombre différent de cœurs de processeur, vous pouvez configurer la valeur indiqué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:

1. Ouvrez le menu Paramètres de capture . Consultez Afficher les paramètres d'enregistrement.
2. Cochez 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 Performances pour vous rappeler que l'émulation de la 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 Clear record (Effacer l'enregistrement) pour l'effacer du panneau Performance.

Analyser un enregistrement des performances

Une fois que vous avez enregistré les performances d'exécution ou enregistré les performances de chargement, le panneau Performances fournit de nombreuses données permettant d'analyser les performances de ce qui s'est passé.

Parcourir l'enregistrement

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

Sélectionnez une partie de l'enregistrement

Sous la barre d'action du panneau Performances, en haut de l'enregistrement, vous pouvez consulter la section Vue d'ensemble 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 sur la vue d'ensemble de la chronologie.

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

1. Sélectionnez la piste Main (Principale) ou toute autre piste voisine.
2. Utilisez respectivement les touches W, A, S et D pour effectuer un zoom avant, vous déplacer vers la gauche, faire un zoom arrière et vous déplacer vers la droite.

Pour sélectionner une portion à l'aide du pavé tactile:

1. Pointez sur la section Vue d'ensemble de la chronologie 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 effectuer un zoom avant et vers la droite pour le déplacer vers la droite.

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

L'aperçu de la timeline vous permet de créer plusieurs fils d'Ariane imbriqués à la suite, d'augmenter les niveaux de zoom, puis d'accéder au niveau choisi.

Pour créer et utiliser un fil d'Ariane:

1. Dans Vue d'ensemble de la chronologie, sélectionnez une partie de l'enregistrement.
2. Passez la souris sur la sélection et cliquez sur le bouton zoom_in N ms. La sélection est élargie et s'affiche dans la vue d'ensemble de la chronologie. Une chaîne de fils d'Ariane commence à se créer en haut de la vue d'ensemble 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 directement au niveau de zoom souhaité, 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 graphique de flammes long

Pour faire défiler un long graphique de flammes dans la piste principale ou dans l'un de ses graphiques voisins, cliquez de manière prolongée, puis faites-le glisser dans n'importe quelle direction jusqu'à ce que les éléments que vous recherchez s'affichent à l'écran.

Activités de recherche

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

• macOS: Cmd+F
• Windows et 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 correspondant à votre requête, procédez comme suit:

• 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 par-dessus 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.

Afficher l'activité du thread principal

Utilisez le canal Principal pour afficher l'activité survenue sur le fil de discussion 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é du thread principal dans un graphique de type "flamme". L'axe des abscisses représente l'évolution de la période d'enregistrement. L'axe des ordonnées représente la pile d'appel. Les événements du haut provoquent les événements ci-dessous.

Cet exemple présente un graphique de flammes dans le canal Main (Principal). Un événement click a provoqué un appel de fonction anonyme. Cette fonction, à son tour, a appelé onEndpointClick_, handleClick_, et ainsi de suite.

Le panneau Performances attribue aux scripts des couleurs aléatoires pour diviser le graphique de type "flamme" et le rendre plus lisible. Dans l'exemple précédent, les appels de fonction provenant d'un script apparaissent en bleu clair. Les appels provenant d'un autre script apparaissent en rose clair. Le jaune foncé représente l'activité de script, et le violet l'activité d'affichage. Ces événements en 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 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 en rouge, contrairement aux 50 premières millisecondes.

De plus, le canal Principal affiche des informations sur les profils de processeur démarrés et arrêtés avec les fonctions de la 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 JavaScript sont désactivés, seuls les événements de haut niveau tels que Event (click) et Function Call s'affichent.

Suivre les lanceurs d'événements

La piste Main peut afficher des flèches reliant les déclencheurs suivants et les événements qu'ils ont causé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é -> Fire Idle Callback (Demander un rappel à la prochaine période d'inactivité)
• Minuteur d'installation -> Minuteur déclenché
• Create WebSocket -> Send... and Receive WebSocket Handshake (Créer le handshake WebSocket ou Destroy WebSocket).

Pour voir les flèches, recherchez l'un des initiateurs dans le graphique de type "flamme" et cliquez dessus.

Afficher les activités dans un tableau

Après avoir enregistré une page, vous n'avez pas besoin de vous fier uniquement au 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 donne une perspective différente sur les activités:

• Lorsque vous souhaitez afficher les activités racines générant le plus de tâches, utilisez l'onglet Arborescence d'appel.
• Lorsque vous souhaitez afficher les activités pour lesquelles le plus de temps a été directement consacré, utilisez l'onglet Ascendant.
• Lorsque vous souhaitez afficher les activités dans l'ordre dans lequel elles se sont produites lors de l'enregistrement, utilisez l'onglet Journal des événements.

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

• match_case Respectez la casse.
• regular_expression Expression régulière.
• match_word et correspond au mot entier.

Chaque vue tabulaire du panneau Performances affiche des liens vers des activités telles que les appels de fonctions. Pour faciliter le débogage, les outils de développement trouvent les déclarations de fonction correspondantes dans les fichiers sources. De plus, si les mappages sources appropriés sont présents et activés, les outils de développement trouvent automatiquement les fichiers d'origine.

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

Remarque:Les trois sections suivantes font toutes référence à la même démonstration. Vous pouvez exécuter la démonstration vous-même sur la page Démonstration des onglets d'activité et consulter la source sur GoogleChrome/devtools-samples/perf/activitytabs.html.

Activités racines

Voici une explication du concept des activités racine mentionné dans les onglets Call Tree (Arborescence d'appel), Bottom-Up (Ascendant) et Event Log (Journal des événements).

Les activités racine sont celles qui permettent au navigateur d'effectuer une certaine action. Par exemple, lorsque vous cliquez sur une page, le navigateur déclenche une activité Event en tant qu'activité racine. Ce Event peut ensuite entraîner l'exécution d'un gestionnaire.

Dans le graphique de type "flamme" du titre Principal, les activités racines figurent en haut du graphique. Dans les onglets Call Tree (Arborescence d'appels) et Event Log (Journal des événements), les activités racine sont les éléments de niveau supérieur.

Consultez l'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 que les activités pendant la partie sélectionnée de l'enregistrement. Pour savoir comment sélectionner des parties, consultez la section Sélectionner une partie d'un enregistrement.

Dans cet exemple, les éléments de premier niveau de la colonne Activity, tels que Event, Paint et Composite Layers, sont des activités racines. L'imbrication représente la pile d'appel. Dans cet exemple, Event a généré une erreur Function Call, ce qui a entraîné button.addEventListener, ce qui a entraîné b, et ainsi de suite.

Le temps perso correspond au temps passé directement dans cette activité. La durée totale 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 le champ 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és en fonction de différents critères.

Cliquez sur Afficher la pile la plus lourde pour afficher une autre table à droite de la table Activité. Cliquez sur une activité pour remplir la table Haviest Stack (Pile la plus lourde). Le tableau Pile la plus lourde indique les enfants de l'activité sélectionnée qui ont mis le plus de temps à s'exécuter.

Onglet "De bas en haut"

Utilisez l'onglet Ascendant pour voir quelles activités ont directement pris le plus de temps cumulé.

L'onglet Bottom-Up (Ascendant) n'affiche que les activités pendant la partie sélectionnée de l'enregistrement. Pour savoir comment sélectionner des parties, consultez la section Sélectionner une partie d'un enregistrement.

Dans le graphique de flamme de suivi Main (Principal) de cet exemple, vous pouvez constater que presque tout le temps a été consacré à l'exécution des trois appels à wait(). Par conséquent, l'activité principale dans l'onglet Bottom-Up est wait. Dans le graphique de type "flamme", le jaune situé sous les appels à wait correspond en réalité à des milliers d'appels Minor GC. En conséquence, vous pouvez constater que dans l'onglet Bottom-Up (Ascendant), l'activité suivante la plus chère est Minor GC.

La colonne Temps propre représente le temps agrégé passé directement dans cette activité, pour toutes ses occurrences.

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

Onglet "Event Log" (Journal des événements)

L'onglet Journal des événements vous permet d'afficher les activités dans l'ordre dans lequel elles se sont produites lors de l'enregistrement.

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

La colonne Start Time (Heure de début) représente le moment auquel cette 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 Temps total représentent le temps passé directement dans cette activité ou dans ses activités enfants.

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

Le champ Filtre permet de 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 Tout, ce qui signifie que toutes les activités sont affichées.

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

Afficher les codes temporels

Le parcours Durée affiche les repères importants, par exemple:

• 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 est affichée ci-dessous à 813, 44 ms et intitulée Starting to run JavaScript (Démarrage de l'exécution de JavaScript).
• Vos appels performance.measure() personnalisés. Un span jaune est illustré en dessous, avec le libellé Interaction lente.

Pour en savoir plus dans l'onglet Résumé, sélectionnez un repère. Pour afficher le code temporel du repère, pointez dessus dans le canal Durée.

Afficher les interactions

Affichez les interactions des utilisateurs dans le suivi Interactions pour identifier les éventuels problèmes de réactivité.

Pour afficher les interactions:

1. Ouvrez les outils de développement, par exemple, sur cette page de démonstration.
2. Ouvrez le panneau Performances, puis démarrez 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 comportent des moustaches qui indiquent les retards d'entrée et de présentation au niveau des limites de 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 Summary (Résumé) et dans une info-bulle lorsque l'utilisateur pointe dessus:

La piste Interactions indique les interactions d'une durée supérieure à 200 millisecondes à l'aide d'un triangle rouge dans l'angle supérieur droit.

Afficher l'activité du GPU

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

Afficher l'activité matricielle

Affichez l'activité matricielle dans la section Matriciel.

Analyser le nombre d'images par seconde (FPS)

Les outils de développement proposent plusieurs façons d'analyser les frames par seconde:

• Utilisez la section Images pour afficher la durée d'une image donnée.
• Utilisez le mètre FPS pour obtenir une estimation en temps réel du FPS pendant que la page s’exécute. Consultez la section Afficher le nombre d'images par seconde en temps réel avec le compteur de FPS.

Section Cadres

La section Images vous indique exactement la durée d'une image donnée.

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 Images peut afficher quatre types de cadres:

1. Cadre inactif (blanc). Aucune modification.
2. Cadre (vert) : Rendu conforme aux attentes et à temps.
3. Trame partiellement présentée (jaune avec un motif de tirets larges creux). Chrome a fait de son mieux pour afficher au moins quelques mises à jour visuelles à temps. Par exemple, si le thread principal du processus de rendu (animation de canevas) est en retard, mais que le thread compositeur (défilement) est à temps.
4. Trame supprimée (rouge avec un motif de lignes continues denses). 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 davantage d'informations le concernant dans l'onglet Résumé. Le cadre sélectionné est affiché en bleu dans les outils de développement.

Afficher les requêtes réseau

Développez la section Réseau pour afficher la cascade des requêtes réseau survenues pendant l'enregistrement.

Les requêtes sont codées par couleur comme suit:

• HTML: bleu
• CSS: violet
• JS: jaune
• Images: vert

Cliquez sur une demande pour afficher plus d'informations à son sujet dans l'onglet Récapitulatif. Dans l'exemple précédent, l'onglet Summary (Résumé) affiche des informations sur la requête verte sélectionnée.

Un carré bleu foncé en haut à gauche d'une requête signifie qu'il s'agit d'une requête de priorité supérieure. Un carré bleu clair signifie une priorité inférieure. Dans l'exemple précédent, la requête sélectionnée a une priorité élevée, et la requête bleue située au-dessus d'elle a la priorité la plus élevée.

La section Résumé comprend les champs Priorité initiale et Priorité (finale). 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.

Dans l'exemple précédent, la requête de 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. La capture d'écran suivante montre la représentation correspondante de la même requête dans l'onglet Timing du panneau Network (Réseau). Voici comment ces deux représentations sont mappées l'une avec l'autre:

• La ligne de gauche contient tous les événements jusqu'au groupe d'événements Connection Start (inclus). En d'autres termes, tout ce qui précède Request Sent est exclusif.
• La partie claire de la barre est Request Sent et Waiting (TTFB).
• La partie sombre de la barre correspond à Content Download.
• La ligne de droite correspond essentiellement au temps passé à attendre le thread principal. Ceci n'est pas représenté dans l'onglet Timing.

Cet exemple montre la représentation sous forme de barre de lignes de la requête www.google.com.

Cet exemple montre la représentation de l'onglet Timing de la requête www.google.com.

Afficher les métriques de mémoire

Cochez la case Memory (Mémoire) pour afficher les métriques sur la mémoire du dernier enregistrement.

Les outils de développement affichent un nouveau graphique Memory (Mémoire) au-dessus de l'onglet Summary (Résumé). Il existe aussi un nouveau graphique sous le graphique NET, appelé HEAP. Le graphique HEAP fournit les mêmes informations que la ligne Segment de mémoire JS du graphique Memory (Mémoire).

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

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

Le graphique n'affiche que la zone 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 et faites glisser la souris vers la gauche ou 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 phase.

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

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 afficher une capture d'écran de la page à ce moment de l'enregistrement. La présentation de la chronologie est la section qui contient les graphiques CPU, FPS et NET.

Vous pouvez également afficher des captures d'écran en cliquant sur un cadre dans la section Images. 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 cadre 195.5ms dans l'onglet Summary (Résumé) lorsque vous cliquez dessus dans la section Frames (Images).

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

Cet exemple montre une capture d'écran agrandie une fois que vous avez cliqué sur sa vignette dans l'onglet Summary (Résumé).

Afficher les informations des calques

Pour afficher les informations des calques avancés d'une image:

1. Activer l'instrumentation avancée de peinture
2. Sélectionnez un cadre dans la section Images. 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 un calque pour le mettre en surbrillance dans le diagramme.

Dans cet exemple, le calque #39 est mis en évidence lorsque vous le survolez.

Pour déplacer le diagramme:

• Cliquez sur Pan Mode (Mode panoramique) pour vous déplacer le long des axes X et Y.
• Cliquez sur Rotation Mode (Mode de rotation) pour effectuer une rotation sur l'axe Z.
• Cliquez sur Reset Transform (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 peinture
2. Sélectionnez un événement Paint dans le canal Principal.

Analyser les performances d'affichage dans l'onglet "Rendu"

Les fonctionnalités de l'onglet Affichage vous permettent de visualiser les performances d'affichage de votre page.

Ouvrez l'onglet Rendu.

Afficher le nombre d'images par seconde en temps réel avec le compteur FPS

Les statistiques de rendu des frames sont une superposition qui apparaît dans l'angle supérieur droit de la fenêtre d'affichage. Il fournit une estimation en temps réel du FPS pendant l'exécution de la page.

Consultez les statistiques de rendu des frames.

Consultez les événements de peinture en temps réel avec Paint Flashing

Utilisez le clignotement du 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 de calques

L'option Bordures du calque permet d'afficher une superposition de bordures et de tuiles des calques en haut de la page.

Consultez la section Bordures des calques.

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

Utilisez les problèmes de performances de défilement pour identifier les éléments de la page qui ont des écouteurs d'événements liés au défilement qui peuvent nuire aux performances de la page. Les outils de développement décrivent les éléments potentiellement problématiques en turquoise.

Consultez Problèmes de performances de défilement.