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

Cette page est une référence complète des fonctionnalités de Chrome DevTools liées à l'analyse des performances.

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

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 pendant son exécution, par opposition 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 Enregistrer .

   

4. Interagissez avec la page. DevTools enregistre toute activité de page qui se produit en raison 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 pendant son chargement, et non pendant son exécution.

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

3. Cliquez sur Start profiling and reload page (Démarrer le profilage et actualiser la page) . DevTools accède 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é pendant le chargement d'une page.

Effectuer des captures d'écran pendant l'enregistrement

Cochez la case Captures d'écran pour prendre une capture d'écran de chaque frame 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 l'icône Collect garbage (Collecter les déchets) 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 la section 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 Principale 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 échantillons JS désactivés.

Cet exemple présente un enregistrement avec des échantillons JavaScript activés.

Limiter le débit 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 la consommation de ressources processeur pendant l'enregistrement

Pour limiter la capacité du processeur pendant l'enregistrement:

1. Ouvrez le menu Paramètres de capture . Consultez la section 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 les statistiques du sélecteur CSS

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

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

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

Activer l'instrumentation de peinture avancée

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

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

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 Cohérence 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 le supprimer 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 votre enregistrement de performances, vous pouvez sélectionner une partie de l'enregistrement, faire défiler un graphique en forme de flamme long, faire un zoom avant et arrière, et utiliser les repères pour passer d'un niveau de zoom à un autre.

Sélectionner 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 le curseur vers la gauche ou la droite dans la Vue d'ensemble de la chronologie.

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

1. Sélectionnez la piste principale ou 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 vue d'ensemble de la chronologie vous permet de créer plusieurs fil d'Ariane imbriqués à la suite, d'augmenter les niveaux de zoom, puis de passer librement d'un niveau de zoom à un autre.

Pour créer et utiliser des fils d'Ariane :

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

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

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

Vous pouvez rechercher dans les activités du canal Principal et les requêtes du canal Réseau.

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

• macOS : Cmd+F
• Windows, 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 faire défiler les activités qui correspondent à votre requête :

• Cliquez sur les boutons expand_less Précédent ou expand_more Suivant.
• Appuyez sur Maj+Entrée pour sélectionner 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 des requêtes :

• 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 canaux 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 accéder au 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 vers le bas pour déplacer un canal 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 voir ce workflow en action.

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

Afficher l'activité du thread principal

Utilisez le canal Main (Principal) pour afficher l'activité survenue sur le thread principal de la page.

Cliquez sur un événement pour afficher plus d'informations à son sujet dans l'onglet Récapitulatif. Le panneau Performances présente l'événement sélectionné en bleu.

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

Lire le graphique de type "flamme"

Le panneau Performances représente l'activité du thread principal dans un graphique en forme de flamme. L'axe des abscisses 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 montre un graphique en forme de flamme dans le canal 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 pour fractionner le graphique en forme de flamme et le rendre plus lisible. Dans l'exemple précédent, les appels de fonction d'un script sont de couleur bleu clair. Les appels provenant d'un autre script sont de couleur rose clair. Le jaune plus foncé représente l'activité de script, et l'événement violet représente l'activité de rendu. 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 mise en surbrillance en rouge :

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

De plus, le canal Principal affiche des informations sur les profils de processeur démarrés et arrêtés à l'aide des 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 initiateurs d'événements

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

• Invalidation du style ou de la mise en page -> Recalculer les styles ou Mise en page
• Demander un frame d'animation -> Frame d'animation déclenché
• Request Idle Callback (Demander un rappel à la prochaine période d'inactivité) -> Fire Idle Callback (Déclencher le rappel à la prochaine période d'inactivité)
• Installer un 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 l'onglet "Récapitulatif" est sélectionné, les liens Initiateur de s'affichent pour les initiateurs et les liens Déclenché par pour les événements qu'ils ont causés. Cliquez dessus pour passer d'un événement à un autre.

Masquer les fonctions et leurs enfants dans le graphique de type "flamme"

Pour désencombrer le graphique de type "flamme" dans le thread Principal, vous pouvez masquer des 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)

   

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

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

   

3. Pour réinitialiser une fonction avec des enfants masqués ou l'ensemble du graphique de type "flamme", sélectionnez la fonction, puis appuyez sur U ou effectuez un clic droit sur une fonction, puis sélectionnez Réinitialiser la trace.

Ignorer les scripts dans le graphique en forme de flamme

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

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

Afficher les activités dans un tableau

Une fois une page enregistrée, vous n'avez pas besoin de vous fier uniquement à la piste Principale 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 recherchez, les trois onglets comportent des boutons de filtrage avancé à côté de la barre Filtrer :

• match_case Respecter la casse
• regular_expression Expression régulière.
• mot_à_faire_correspondre Correspondre au mot entier

Chaque vue tabulaire du panneau Performances affiche des liens vers des activités telles que les appels de fonction. Pour vous aider 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 en forme de flamme du canal Principal, les activités racine se trouvent en haut du graphique. Dans les onglets Arborescence d'appels et Journal des événements, les activités racine sont les éléments de niveau supérieur.

Pour voir un exemple d'activités racine, consultez l'onglet Arbre d'appels.

Onglet "Arborescence d'appels"

Utilisez l'onglet Arborescence des appels pour voir quelles activités racine génèrent le plus de travail.

L'onglet Arborescence des appels n'affiche que les activités 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'appels. Dans cet exemple, Event a provoqué Function Call, qui a provoqué button.addEventListener, qui a provoqué b, et ainsi de suite.

Le temps propre représente le temps passé directement dans cette activité. Durée totale : représente le temps passé dans cette activité ou dans l'une de ses activités enfants.

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

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

Par défaut, le menu Regroupement est défini sur Aucun regroupement. Utilisez le menu 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 renseigner le tableau 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.

Onglet "Bas en haut"

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 en forme de flamme de la piste Principale de cet exemple, vous pouvez voir que presque tout le temps a été consacré à l'exécution des trois appels à wait(). Par conséquent, l'activité la plus importante dans l'onglet De bas en haut 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é la plus coûteuse suivante est Minor GC.

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

La colonne Durée totale représente le temps cumulé passé dans cette activité ou dans l'une de ses activités 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 une partie d'un enregistrement, 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 Durée totale représentent le temps passé directement dans cette activité ou dans l'une de ses activités enfants.

Cliquez sur Heure de début, Temps de l'utilisateur ou Durée totale pour trier le tableau par 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 Tout, 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 ci-dessous à 813,44 ms, avec la mention Début de l'exécution de JavaScript.
• Vos appels performance.measure() personnalisés. Un segment jaune, intitulé Interaction lente, est affiché en jaune ci-dessous.

Sélectionnez un repère pour afficher plus de détails dans l'onglet Résumé, y compris l'horodatage, l'heure totale, le temps propre et l'objet detail. Pour les appels performance.mark() et performance.measure(), l'onglet affiche également des traces de pile.

Afficher les interactions

Examinez les interactions des utilisateurs dans le canal Interactions pour identifier les problèmes de réactivité potentiels.

Pour afficher les interactions :

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

Dans cet exemple, le canal Interactions affiche 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 tracé Interactions marque les interactions de plus de 200 millisecondes avec un triangle rouge en haut à droite.

Afficher l'activité du GPU

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

Afficher l'activité raster

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 les images par seconde :

• Utilisez la section Frames (Cadres) pour afficher la durée d'un frame 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.

Section "Frames" (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. Frame supprimé (rouge avec un motif de ligne continue dense) Chrome ne peut pas afficher le cadre dans un délai raisonnable.

Cet exemple affiche une info-bulle lorsque vous pointez sur un frame 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 de requêtes réseau qui ont eu lieu pendant l'enregistrement des performances.

À côté du nom du canal Network (Réseau), une légende indique les types de requêtes par code couleur.

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

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

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

Lorsque vous cliquez sur une requête, la piste Network affiche une flèche à partir de son lanceur de requête.

De plus, le panneau Performances affiche l'onglet Récapitulatif qui contient des informations supplémentaires sur la demande, y compris, mais sans s'y limiter, les champs Priorité initiale et (final) Priorité. Si leurs valeurs diffèrent, la priorité de récupération de la requête a changé pendant l'enregistrement. Pour en savoir plus, consultez Optimiser le chargement des ressources avec l'API Fetch Priority.

L'onglet Résumé affiche également le détail des délais de la requête.

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

Vous trouverez une autre répartition temporelle dans l'onglet Network (Réseau). Effectuez un clic droit sur la requête dans le canal Réseau ou son URL dans l'onglet Résumé, puis cliquez sur Afficher dans le panneau "Réseau". DevTools vous redirige vers le panneau Network (Réseau) et sélectionne la requête correspondante. Ouvrez l'onglet Durée.

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

• La ligne de gauche (|–) correspond à tout ce qui se trouve jusqu'au groupe d'événements Connection start, y compris. En d'autres termes, il s'agit de tout ce qui précède Request Sent.
• La partie claire de la barre est 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. Elle n'est pas affichée dans l'onglet Réseau > Durée.

Afficher les métriques de mémoire

Activez la case 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 Récapitulatif.

Les lignes colorées du graphique correspondent aux cases à cocher coloré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ée. Dans l'exemple précédent, le graphique 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 partie.

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

Afficher une capture d'écran

Pour savoir comment activer les captures d'écran, consultez Faire des captures d'écran pendant l'enregistrement.

Pointez sur l'aperçu de la chronologie pour afficher une capture d'écran de l'état 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. DevTools affiche une petite version de la capture d'écran dans l'onglet Summary (Récapitulatif).

Cet exemple montre la capture d'écran de la trame 195.5ms dans l'onglet Récapitulatif lorsque vous cliquez dessus dans la section Frames (Cadres).

Cliquez sur la vignette dans l'onglet Récapitulatif pour faire un zoom avant sur la capture d'écran.

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

Afficher les informations sur les calques

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

1. Activez l'instrumentation de peinture avancée.
2. Sélectionnez un cadre dans la section Cadres. DevTools affiche 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.

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

Pour déplacer le diagramme :

• Cliquez sur Mode panoramique pour vous déplacer le long des axes X et Y.
• Cliquez sur Lifecycle Mode (Mode de rotation) pour effectuer une rotation le long de l'axe Z.
• Cliquez sur Réinitialiser la transformation  pour rétablir le diagramme à sa position d'origine.

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 dans la piste Principale.

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 les images par seconde en temps réel avec le compteur de FPS

Les statistiques de rendu des frames sont une superposition qui s'affiche en haut à droite de votre vue. Il fournit une estimation en temps réel du FPS lors de l'exécution de la page.

Consultez la section Statistiques de rendu d'image.

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

Utilisez Flashing de peinture pour obtenir une vue en temps réel de tous les événements de peinture sur la page.

Voir Flashing de la peinture.

Afficher une superposition de calques avec les bordures de calque

Utilisez Bordures de calque pour afficher une superposition des bordures et des tuiles de calque au-dessus de la page.

Consultez Bordures de calque.

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

Utilisez Problèmes de performances de défilement pour identifier les éléments de la page qui comportent des écouteurs d'événements liés au défilement susceptibles de nuire aux performances de la page. Les outils de développement soulignent les éléments potentiellement problématiques en vert clair.

Consultez Problèmes de performances du défilement.