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

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 des performances d'une 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 plutôt que de la charger.

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 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 et non 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. 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 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 Collect ordage (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 plus de paramètres liés à la façon dont les outils de développement capturent les enregistrements des performances.

Désactiver les exemples JavaScript

Par défaut, la piste Main d'un enregistrement affiche des piles d'appels détaillées pour les fonctions JavaScript appelées pendant 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.
3. Enregistrez la page.

Les captures d'écran suivantes montrent la différence entre la désactivation et l'activation des exemples JavaScript. La piste 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 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:

1. Ouvrez le menu Paramètres de capture . Consultez Afficher les paramètres d'enregistrement.
2. 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:

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 ralentissement fait que votre processeur fonctionne deux fois plus lentement que sa capacité habituelle. 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 de peinture.

Pour savoir comment interagir avec les informations sur les peintures, consultez les sections Afficher les couches et Afficher le profileur de peinture.

É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:

1. Ouvrez le menu Paramètres de capture . Consultez Afficher les paramètres d'enregistrement.
2. 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 l'effacer du panneau Performances.

Analyser un enregistrement de performances

Une fois que vous avez enregistré les performances d'exécution ou enregistré les performances de chargement, le panneau Performance fournit de nombreuses données permettant d'analyser les performances de l'événement qui vient de se produire.

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:

1. Sélectionnez la piste principale ou les pistes voisines.
2. 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:

1. Pointez sur la section Vue d'ensemble de la chronologie ou sur l'une des pistes (Principale et les pistes 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 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:

1. Dans Vue d'ensemble de la chronologie, sélectionnez une partie de l'enregistrement.
2. 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.
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 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.

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é).

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:

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 la fonction (H)
   • Masquer les enfants (C)
   • Masquer les enfants récurrents (R)
   • Réinitialiser les enfants (U)
   • Réinitialiser la trace

   

   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, passez la souris sur le bouton 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, respectivement.

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 Mise en page
• Demander un frame d'animation -> Frame d'animation déclenché
• Demander un rappel à la prochaine période d'inactivité -> Rappel d'inactivité
• Installer le minuteur -> Minuteur déclenché
• Créer un WebSocket -> Envoyer... et Recevoir le handshake WebSocket ou 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.

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 donne une perspective différente sur les activités:

• Lorsque vous souhaitez afficher les activités racine qui entraînent le plus de tâches, utilisez l'onglet Arborescence d'appel.
• Lorsque vous souhaitez afficher les activités pour lesquelles vous avez directement passé le plus de temps, utilisez l'onglet Ascendant.
• Si vous souhaitez 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 les onglets Arborescence d'appel, Ascendant et Journal des événements.

Les activités racine sont celles qui font travailler le navigateur. 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 canal principal, les activités racine se trouvent 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 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. Pour savoir comment sélectionner des parties, consultez Sélectionner une partie d'un enregistrement.

Dans cet exemple, les éléments de premier niveau de la colonne Activité, tels que Event, Paint et Composite Layers, sont des activités racine. L'imbrication représente la pile d'appel. Dans cet exemple, Event a provoqué l'erreur Function Call, qui a provoqué button.addEventListener, b, etc.

Le temps propre représente le temps passé directement dans cette activité. Total Time (Temps total) représente le 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 Grouping (Regroupement) pour trier le 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 table Pile la plus lourde. Le tableau Pile la plus lourde indique les enfants de l'activité sélectionnée ayant mis le plus de temps à s'exécuter.

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. Pour savoir comment sélectionner des parties, consultez Sélectionner une partie d'un enregistrement.

Dans le graphique de type "flamme" du canal principal de cet exemple, vous pouvez constater que la quasi-totalité du temps a été consacrée à 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", les éléments jaunes situés sous les appels à wait correspondent en réalité à des milliers d'appels Minor GC. Par conséquent, vous pouvez voir que dans l'onglet 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é, pour toutes 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 pendant 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 Sélectionner une partie d'un enregistrement.

La colonne Start Time (Heure de début) représente le moment où 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 Self Time (Temps propre) représente le temps passé directement dans cette activité.

Les colonnes Total Time (Temps total) représentent le temps passé directement dans cette activité ou dans l'un de ses 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ésactivez les cases à cocher Chargement, Script, Rendu ou Painting pour filtrer toutes 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.

Pour afficher plus de détails 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 détecter d'éventuels problèmes de réactivité.

Pour afficher les interactions:

1. Accédez aux 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 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. Consultez la section Afficher le nombre d'images par seconde en temps réel avec le compteur de 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:

1. Cadre inactif (blanc) : Aucune modification.
2. Cadre (vert) : Elles sont affichées comme prévu et à temps.
3. 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.
4. 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é. Les outils de développement présentent 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.

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 indique qu'il s'agit d'une requête de priorité plus élevée. Un carré bleu clair correspond à une priorité plus faible. Dans l'exemple précédent, la requête sélectionnée a une priorité élevée et la requête bleue au-dessus d'elle a la priorité la plus élevée.

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

Dans l'exemple précédent, la requête pour www.google.com est représentée par une ligne à gauche, une barre centrale 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 Durée du panneau Réseau. Voici comment ces deux représentations sont mappées entre elles:

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

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

Cet exemple illustre la représentation de la requête www.google.com dans l'onglet Durée.

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é. Il existe également un nouveau graphique sous le graphique NET, appelé HEAP. Le graphique HEAP fournit les mêmes informations que la ligne de tas de mémoire JS du graphique Memory (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 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 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 afficher une capture d'écran de la page à ce moment de 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:

1. Activez l'instrumentation de peinture avancée.
2. Sélectionnez un cadre dans la section Cadres. Les outils de développement affichent des informations sur leurs couches dans le nouvel onglet Layers (Couches) situé à côté de l'onglet Event Log (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 vous déplacer le long des axes X et Y.
• Cliquez sur Lifecycle Mode (Mode de rotation) pour effectuer une rotation 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:

1. Activez l'instrumentation de peinture avancée.
2. 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.

Ouvrez l'onglet Rendu.

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 présentent les éléments potentiellement problématiques en bleu canard.

Consultez la section Problèmes de performances du défilement.