Cela vous rappelle-t-il quelque chose ? Vous déboguez un problème de performances dans les outils de développement Chrome, mais la quantité pléthorique d'informations dans le panneau "Performances" vous empêche de vous concentrer uniquement sur les éléments les plus pertinents et exploitables. La longueur de la chronologie, la profondeur du graphique en forme de flamme et la largeur de nombreux canaux de données différents peuvent rendre la navigation difficile. Aussi puissant que soit le panneau "Performances", son utilité ne devrait pas se faire au détriment de la facilité d'utilisation.
Dans le cadre de notre initiative visant à améliorer les outils de gestion des performances de Chrome, nous avons récemment lancé trois nouvelles fonctionnalités visant à réduire la densité d'informations et à aider les développeurs à personnaliser leurs workflows:
- Masquer les parties non pertinentes de Vos trajets
- Masquer les parties non pertinentes du graphique de flammes
- Masquer les pistes non pertinentes
Dans cet article, nous allons examiner plus en détail chacune de ces fonctionnalités et vous montrer comment les utiliser pour vous concentrer sur les informations les plus importantes.
Masquer les parties non pertinentes de la chronologie
Les performances Web fonctionnent à l'échelle de quelques millisecondes. Ainsi, même si l'enregistrement de vos performances ne dure que quelques secondes, il y a de nombreuses chances de perdre le fil.
Dans Chrome 122, nous avons ajouté la possibilité de créer des fil d'Ariane. Cette fonctionnalité vous permet de limiter les limites de la timeline afin de pouvoir effectuer un zoom ou un panoramique uniquement à l'intérieur d'une zone que vous avez définie. Limiter la chronologie de cette manière peut être particulièrement utile si vous essayez de déboguer des problèmes de réactivité, par exemple, afin de pouvoir concentrer votre attention sur une seule interaction ou une tâche longue problématique.
<ph type="x-smartling-placeholder">
La capture d'écran précédente montre un gros plan de la vue d'ensemble de la chronologie, qui permet de visualiser l'activité du thread principal, comme l'exécution du script et le travail de présentation. Lorsque vous maintenez le pointeur dessus, un nouveau bouton s'affiche et définit les limites de la chronologie sur la fenêtre actuelle. Le bouton est associé à la largeur de la fenêtre temporelle, en millisecondes, et à l'icône . Le fil d'Ariane se trouve au-dessus de la vue d'ensemble de la chronologie. Chacun d'eux est étiqueté en fonction de la taille de sa période.
Pour utiliser cette fonction :
- Faites un zoom et un panoramique sur la chronologie pour afficher une zone d'intérêt.
- Cliquez sur l'icône en forme de loupe dans la vue d'ensemble de la chronologie pour limiter la timeline et définir un fil d'Ariane.
- Répétez l'opération autant de fois que nécessaire pour zoomer sur une zone imbriquée qui vous intéresse.
- Cliquez sur les éléments du fil d'Ariane pour revenir à des zones d'intérêt précédentes ou à la plage complète de la chronologie.
Couper la timeline vous permet d'éviter que vous ne défiiez accidentellement en dehors des limites dans une partie non pertinente de la timeline. Toutefois, si nécessaire, vous pouvez cliquer sur les éléments du fil d'Ariane pour effectuer un zoom arrière. Autre avantage : l'aperçu de la chronologie reste aligné sur les canaux suivants. Cela peut vous aider à identifier plus facilement les opportunités de performances, comme les reflows forcés, et à en identifier la cause profonde dans le graphique en forme de flamme.
Masquer les parties non pertinentes du graphique de flammes
Analyser l'activité du thread principal n'est pas une mince affaire. Cette partie du panneau "Performances" est appelée graphique de flammes en raison de la longueur et de l'agilité des piles d'appels. Dans certains cas extrêmes, ces piles sont si difficiles à manier qu'il est difficile de les comprendre dans leur intégralité et de vous concentrer sur ce que vous essayez d'optimiser.
À partir de Chrome 124, vous pouvez choisir précisément les entrées du graphique en forme de flamme à masquer afin de vous concentrer sur les informations les plus utiles.
<ph type="x-smartling-placeholder">
Lorsque vous effectuez un clic droit sur une fonction dans le graphique de flammes, un menu contextuel s'affiche avec plusieurs options pour masquer les entrées:
- Masquer la fonction : supprimez la fonction sélectionnée du graphique en forme de flamme. Ses enfants seront déplacés vers le haut pour apparaître immédiatement après sa fonction parente.
- Masquer les enfants : élaguez le graphique en forme de flamme à la fonction sélectionnée, en masquant tous ses enfants.
- Masquer les enfants récurrents: supprimez toutes les instances de la fonction sélectionnée du reste du graphique de type "flamme".
Lorsque vous sélectionnez une fonction, vous pouvez également utiliser plusieurs raccourcis clavier utiles:
- H : masquer la fonction sélectionnée
- C : masquer les enfants de la fonction sélectionnée
- R : masque les instances de la fonction sélectionnée plus loin dans la pile.
- U : affiche les enfants masqués de la fonction sélectionnée
Masquer définitivement les scripts non pertinents
L'option Ajouter le script à la liste d'ignorer masque la fonction sélectionnée dans le graphique de type "flamme", ainsi que toutes les autres fonctions définies dans le même fichier de script. Le script est également ajouté à la liste des éléments à ignorer, que le débogueur des outils de développement utilise pour remplacer les fonctions et ignorer les exceptions provenant du script.
Les scripts ajoutés à la liste des éléments à ignorer sont conservés. Ils continueront donc d'être masqués dans le graphique de flammes dans les nouvelles traces. Les scripts que vous ne contrôlez pas pourraient être ajoutés à la liste des éléments à ignorer. En revanche, le masquage de fonctions individuelles est temporaire pour la trace actuelle et plus dépendant de la situation. Par exemple, vous pouvez masquer une pile fastidieuse d'appels de fonction récursifs pour faciliter l'utilisation de la trace.
Pour rétablir la liste des éléments à ignorer ou toute autre fonction masquée du graphique de flammes, vous pouvez utiliser le menu contextuel afin de réinitialiser les enfants de la fonction sélectionnée ou toutes les fonctions masquées tout au long de la trace. Les fonctions avec des enfants masqués sont annotées avec l'icône ▼, qui réinitialise également les enfants lorsqu'elle est cliquée.
<ph type="x-smartling-placeholder">Toute profondeur et complexité inutiles que vous pouvez supprimer du graphique en forme de flamme le rendront d'autant plus utilisable. Lorsque vous en avez besoin, la possibilité de personnaliser les entrées que vous voyez constitue une amélioration de l'ergonomie pour vous aider à vous concentrer sur les informations les plus importantes pour la tâche à accomplir.
Masquer les canaux non pertinents
L'activité du thread principal ne représente qu'un seul canal du panneau "Performances". Les traces du panneau "Performances" visualisent l'activité d'un processus. Elles sont toutes alignées sur une chronologie commune pour faciliter le débogage. En plus de la piste Main, il existe des pistes individuelles pour les autres sous-cadres, threads et nœuds de calcul utilisés par la page, ainsi que les pistes Network, Frames, Animations et Interactions. D'autres pistes marquent l'activité des processus Chrome de niveau inférieur, tels que les E/S, le GPU et le compositeur. Cela fait beaucoup d'informations ! Pourtant, pour la plupart des workflows de performances, vous ne vous intéressez qu'aux informations de quelques pistes à la fois.
À partir de Chrome 125, un nouveau mode de configuration vous permet de masquer les pistes inutiles ou de les réorganiser à votre guise. Par exemple, si vous optimisez une interaction lente, vous pouvez choisir de masquer tout sauf les pistes Interactions, Principale et GPU.
Pour modifier un canal, effectuez un clic droit sur le nom d'un canal, puis sélectionnez Configurer les canaux. Le mode de configuration s'ouvre. Vous pouvez alors afficher, masquer ou réorganiser des pistes individuelles. Cliquez sur le bouton Terminer la configuration des canaux pour enregistrer vos préférences.
<ph type="x-smartling-placeholder">La configuration des canaux vous permet de contrôler la façon dont le panneau "Performances" présente les informations essentielles à votre flux de travail. Vous pouvez utiliser ces paramètres pour masquer l'activité des processus non liés et déplacer les pistes de manière à vous donner le plus facilement accès aux données dont vous avez besoin.
Conclusion
Ces trois fonctionnalités vous offrent de nouvelles commandes ergonomiques performantes pour personnaliser vos workflows de performances. En utilisant ces fonctionnalités et en réduisant le bruit, vous serez beaucoup plus à même de trouver ce que vous recherchez et de donner du sens aux données.
Nous aimerions connaître les points positifs et les points à améliorer. Si vous avez des questions ou des commentaires d'ordre général, n'hésitez pas à nous contacter à l'adresse @ChromeDevTools. Si quelque chose ne fonctionne pas ou si vous avez une suggestion de nouvelles fonctionnalités, laissez un commentaire sur ce problème ouvert.
Nous sommes heureux de vous annoncer que ce n'est que le début de notre initiative visant à améliorer les outils de performances de Chrome. Nous sommes heureux de partager avec vous toutes nos propositions pour rendre le panneau "Performances" plus facile à utiliser et plus puissant que jamais. Nous publierons un article présentant les prochaines fonctionnalités sur le blog Chrome pour les développeurs. En attendant, consultez la page Nouveautés de Chrome pour vous tenir informé des nouveautés concernant les outils de développement et Chrome.