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

Sofia Emelianova
Sofia Emelianova

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.

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

    Enregistrer.

  4. Interagissez avec la page. Les outils de développement enregistrent toute l'activité sur la page résultant de votre des 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, plutôt que de courir.

  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 refresh page (Démarrer le profilage et actualiser la page). Démarrez le profilage et actualisez 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.

    Rechargez la page.

Les outils de développement zooment automatiquement sur la partie de l'enregistrement où la majeure partie de l'activité s'est produite.

Un enregistrement de chargement de page.

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.

La case à cocher "Captures d'écran"

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.

Récupérez la mémoire.

Afficher les paramètres d'enregistrement

Cliquez sur Paramètres de capture. Paramètres de capture. jusqu'à d'autres paramètres liés à la façon dont les outils de développement enregistrent les performances.

Section "Capture Settings" (Paramètres de capture)

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:

  1. Ouvrez le menu Paramètres de capture Paramètres.. 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 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.

Exemple d'enregistrement lorsque les échantillons JavaScript sont désactivés.

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

Exemple d'enregistrement lorsque les échantillons JavaScript sont activé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 Paramètres.. 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 Paramètres.. 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 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:

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

Pour en savoir plus, découvrez comment analyser les performances 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:

  1. Ouvrez le menu Paramètres de capture Paramètres.. 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 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:

  1. Ouvrez le menu Paramètres de capture Paramètres.. 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. Simultanéité matérielle.

Les outils de développement affichent une icône d'avertissement 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 Rétablir..

Sauvegarder un enregistrement

Pour sauvegarder un enregistrement, effectuez un clic droit et sélectionnez Save Profile (Enregistrer le profil).

Enregistrer le profil.

Charger un enregistrement

Pour charger un enregistrement, effectuez un clic droit et sélectionnez Load Profile (Charger le profil).

Charger le profil.

Effacer l'enregistrement précédent

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

Effacer l'enregistrement.

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

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.

Vue d'ensemble de la chronologie sous la barre d'action

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, 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.

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.

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

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

Le champ de recherche

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:

  1. Pour passer en mode de configuration, effectuez un clic droit sur le nom d'un canal, puis sélectionnez Configurer les canaux.
  2. 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.
  3. 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.

La piste principale.

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.

Vous trouverez plus d'informations sur un événement de thread principal dans l'onglet "Résumé".

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.

Graphique de flammes.

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:

Une tâche longue.

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.

Flèche reliant la requête au déclenchement d'un rappel inactif.

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.

L'initiateur de dans l'onglet "Synthèse".

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 (T)
    • Ajouter un script à la liste des éléments à ignorer (I)

    Menu contextuel avec des options permettant de masquer la fonction sélectionnée ou ses enfants.

    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.

    Info-bulle sur le bouton déroulant avec le nombre d'enfants masqués.

  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.

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.

Menu contextuel avec l'option "Ignorer le script" sélectionnée.

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.

Onglet "Ignorer la liste des scripts" dans les paramètres

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.

Le bouton trois pour le filtrage avancé

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.

Lien vers un fichier source dans l'onglet "Journal des événements".

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.

Onglet "Arborescence d'appel"

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

L'onglet Ascendant.

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.

Onglet "Journal des événements".

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:

Repères dans la piste des temps

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:

  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.

La piste "Interactions".

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:

L'avertissement INP.

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.

Section "GPU".

Afficher l'activité matricielle

Affichez l'activité matricielle dans la section Pool de threads.

Activité de trame dans le "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:

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.

Pointer sur un cadre

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.

Pointer sur un cadre partiellement présenté.

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.

Affichage d'un frame dans l'onglet Résumé.

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.

Requête sélectionnée dans le canal réseau, avec l'onglet "Synthèse" ouvert.

À 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.

Détail des durées des demandes dans l'onglet "Synthèse".

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.

Onglet "Durée" d'une requête dans le panneau "Réseau".

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énements Connection start inclus. En d'autres termes, il s'agit de tout ce qui précède Request Sent.
  • La partie claire de la barre correspond à Request sent et Waiting for server response.
  • La partie sombre de la barre est Content download.
  • La ligne de droite (–|) correspond au temps passé à attendre le thread principal. 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.

Case à cocher "Mémoire".

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.

Métriques de 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.

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

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.

Affichage d'une capture d'écran.

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

Affichage d'une capture d'écran dans l'onglet "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.

Zoom sur une capture d'écran à partir de l'onglet "Synthèse"

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 la Nouvel onglet Calques à côté de l'onglet Journal des événements

L'onglet Calques

Pointez sur un calque pour le mettre en surbrillance dans le diagramme.

Mettre en surbrillance un calque

Dans cet exemple, le calque #39 est mis en surbrillance lorsque vous pointez dessus.

Pour déplacer le diagramme:

  • Cliquez sur Mode panoramique Mode panoramique.. pour se déplacer le long des axes X et Y.
  • Cliquez sur Mode rotation. Mode rotation. pour faire pivoter le long de l’axe Z.
  • Cliquez sur Reset Transform (Réinitialiser la transformation) Transformation "Reset".. 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).

Onglet "Profileur de peinture".

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

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