Cela vous rappelle quelque chose ? Vous déboguez un problème de performances dans les outils pour les développeurs Chrome, mais la quantité incroyable d'informations dans le panneau "Performances" vous empêche de vous concentrer uniquement sur les parties les plus pertinentes et les plus exploitables. Entre la longueur de la chronologie, la profondeur du graphique de flammes et l'étendue de nombreuses pistes de données différentes, la navigation peut s'avérer 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 performances de Chrome, nous avons récemment lancé trois nouvelles fonctionnalités destinées à réduire la densité d'informations et à aider les développeurs à personnaliser leurs workflows:
- Masquer les parties non pertinentes de la chronologie
- Masquer les parties non pertinentes du graphique de type "flamme"
- Masquer les titres non pertinents
Dans cet article, nous allons examiner en détail chacune de ces fonctionnalités et vous montrer comment les utiliser pour vous concentrer uniquement sur les informations les plus importantes.
Masquer les parties non pertinentes de la chronologie
Les performances Web s'effectuent en millisecondes. Par conséquent, même si l'enregistrement de vos performances ne dure que quelques secondes, vous risquez de perdre votre place.
Dans Chrome 122, nous avons ajouté la possibilité de créer des fils d'Ariane. Cette fonctionnalité vous permet de restreindre les limites de la timeline de sorte que vous ne puissiez effectuer un zoom ou un panoramique que sur une zone d'intérêt que vous avez définie. Limiter la timeline 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 vous concentrer sur une seule interaction ou une longue tâche problématique.
La capture d'écran précédente montre un gros plan de la vue d'ensemble de la chronologie, qui illustre l'activité du thread principal, comme l'exécution du script et le travail de présentation. Lorsque vous maintenez le pointeur de la souris dessus, un nouveau bouton s'affiche pour définir les limites de la timeline sur la fenêtre actuelle. Le nom du bouton correspond à la largeur de la fenêtre temporelle (en millisecondes) et à l'icône . Les fils d'Ariane sont situés au-dessus de l'aperçu de la chronologie et chacun d'eux est étiqueté en fonction de la taille de sa fenêtre temporelle.
Pour utiliser cette fonctionnalité :
- Effectuez un zoom et un panoramique sur une zone qui vous intéresse.
- Cliquez sur l'icône en forme de loupe dans l'aperçu 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 le fil d'Ariane pour revenir aux zones d'intérêt précédentes ou à la plage complète de la chronologie.
Cette opération permet d'éviter de dépasser accidentellement les limites de la chronologie et d'entrer dans une partie non pertinente de la timeline. Toutefois, lorsque cela est nécessaire, vous pouvez cliquer sur le fil d'Ariane pour effectuer un zoom arrière. Un autre avantage est que la vue d'ensemble de la chronologie restera alignée sur les pistes suivantes. Il est ainsi beaucoup plus facile de repérer les opportunités d'amélioration des performances telles que les ajustements de la mise en page forcés et d'identifier leur origine dans le graphique de type "flamme".
Masquer les parties non pertinentes du graphique de type "flamme"
L'analyse de l'activité du thread principal n'est pas une mince affaire. Cette partie du panneau "Performances" est connue sous le nom de graphique de type "flamme", en raison de la durée et de l'axe des piles d'appels. Dans certains cas extrêmes, ces piles peuvent être si gênantes qu'il est difficile de tout comprendre et de se concentrer sur ce que vous essayez d'optimiser.
À partir de Chrome 124, vous pouvez personnaliser précisément les entrées du graphique de type "flamme" à masquer, afin de pouvoir vous concentrer sur les informations les plus exploitables.
Lorsque vous effectuez un clic droit sur une fonction dans le graphique de type "flamme", un menu contextuel s'affiche avec plusieurs options permettant de masquer des entrées:
- Masquer la fonction: supprime la fonction sélectionnée du graphique de type "flamme". Ses éléments enfants remontent pour apparaître immédiatement après sa fonction parent.
- Masquer les enfants: éliminez le graphique de type "flamme" au niveau de la fonction sélectionnée, en masquant tous ses enfants.
- Masquer les éléments enfants répétés: supprime toutes les instances de la fonction sélectionnée du reste du graphique de type "flamme".
Plusieurs raccourcis clavier utiles sont également à votre disposition lorsque vous sélectionnez une fonction:
- H: masquer la fonction sélectionnée
- C: masquer les enfants de la fonction sélectionnée
- R: masquer les instances de la fonction sélectionnée plus tard 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 un script à la liste des éléments à ignorer masque la fonction sélectionnée dans le graphique de type "flamme", ainsi que dans 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 contourner les fonctions et ignorer les exceptions provenant du script.
Les scripts ajoutés à la liste des éléments à ignorer sont conservés. Ils resteront donc masqués dans le graphique de type "flamme" dans les nouvelles traces. Les scripts que vous ne contrôlez pas sont de bons candidats pour la liste des éléments à ignorer. En revanche, le masquage de fonctions individuelles est temporaire dans la trace actuelle et dépend davantage 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 type "flamme", vous pouvez utiliser le menu contextuel afin de réinitialiser les enfants de la fonction sélectionnée ou toutes les fonctions masquées de la trace. Les fonctions avec des enfants masqués sont annotées avec l'icône ▼, qui réinitialise également les enfants lorsque l'utilisateur clique dessus.
Toute profondeur et complexité superflue que vous pouvez retirer du graphique de type "flamme" le rendra d'autant plus facile à utiliser. Si nécessaire, la possibilité de personnaliser les entrées que vous voyez est une amélioration de l'ergonomie pour vous aider à concentrer votre attention sur les informations les plus importantes pour la tâche à accomplir.
Masquez les pistes non pertinentes
L'activité du thread principal ne constitue qu'un titre du panneau "Performances". Les canaux du panneau "Performances" permettent de visualiser l'activité d'un processus. Ils sont tous alignés sur une chronologie commune afin de faciliter le débogage. En plus de la piste Main, il existe des pistes individuelles pour les autres sous-frames, threads et workers utilisés par la page, ainsi que les pistes Network, Frames, Animations et Interactions. D'autres pistes illustrent 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 processus liés aux performances, vous ne vous préoccuperez que des informations de quelques pistes à la fois.
Depuis Chrome 125, il existe un nouveau mode de configuration qui 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 tout masquer, à l'exception des pistes Interactions, Principal et GPU.
Pour modifier les canaux, 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 les pistes individuelles. Cliquez sur le bouton Terminer la configuration des canaux pour enregistrer vos préférences.
La configuration des canaux vous permet de contrôler la manière dont le panneau "Performances" présente les informations critiques pour 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 à faciliter l'accès aux données dont vous avez besoin.
Conclusion
Ces trois fonctionnalités vous offrent de nouvelles commandes ergonomiques qui vous permettent de personnaliser vos workflows de performances. En utilisant ces fonctionnalités et en réduisant la quantité de bruit, vous serez mieux placé pour trouver ce que vous cherchez et pour donner un sens aux données.
Nous aimerions savoir ce qui fonctionne bien ou comment nous pourrions améliorer votre expérience. 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 des suggestions de fonctionnalités, n'hésitez pas à laisser un commentaire sur ce problème en cours.
Ce n'est que le début de notre initiative visant à améliorer les outils d'amélioration des performances de Chrome. Nous sommes heureux de vous présenter tout ce que nous avons préparé pour rendre le panneau "Performances" plus facile à utiliser et plus performant que jamais. Le prochain article présentant les prochaines fonctionnalités sera publié 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.