Publié le 19 mars 2025
Poursuivant notre présentation de l'initiative visant à améliorer les outils de performances de Chrome, nous sommes ravis d'annoncer de nouvelles améliorations de l'interaction avec le panneau "Performances" des outils de développement. Ces améliorations sont conçues pour vous permettre de naviguer plus facilement dans les traces de performances et de réduire le bruit inutile. Vous pouvez ainsi vous concentrer sur la recherche et la résolution rapide des problèmes de performances.
Amélioration de la navigation
De nombreux utilisateurs nous ont signalé que le défilement et le zoom dans le panneau "Performances" pouvaient être peu intuitifs. Bien que de nombreux utilisateurs de longue date y soient habitués, de nombreuses personnes s'attendent à ce qu'un geste de défilement permette de faire défiler l'écran, et non de faire un zoom avant ou arrière sur la trace.
Une nouvelle option sous permet de basculer entre le défilement "classique" existant et la nouvelle approche "moderne".
En mode classique, le défilement (à l'aide du pavé tactile ou de la molette de défilement) permet de faire un zoom avant ou arrière, tandis que le défilement avec la touche Maj enfoncée permet de faire défiler le graphique en forme de flamme vers le haut ou vers le bas.
Dans le nouveau mode moderne, ces actions sont inversées: le défilement fait défiler le graphique en forme de flamme, tandis que la touche Maj et le défilement permettent de faire un zoom avant et arrière.
Les raccourcis clavier (comme l'utilisation des touches WASD pour naviguer dans la trace) continueront de fonctionner sans modification.
Présentation de la bidirectionnalité
En haut du panneau Performances se trouve le graphique CPU, qui fait partie de la vue d'ensemble de la chronologie. Il affiche des estimations de l'utilisation du processeur pendant l'enregistrement de la trace, ventilées par type de travail (par exemple, orange pour l'exécution de script, violet pour les opérations de rendu).
Vous obtenez ainsi une vue d'ensemble (parfois appelée "minicarte") de la trace, qui fournit un résumé global de l'ensemble de la chronologie, même lorsque vous effectuez un zoom avant pour examiner des problèmes spécifiques.
Toutefois, il peut être facile de perdre votre position exacte dans la minicarte lorsque vous regardez principalement la trace (et inversement). Nous avons donc introduit de nouvelles fonctionnalités qui aident à associer la vue d'ensemble à la vue agrandie. Lorsque vous pointez sur la vue d'ensemble, une ligne verticale correspondante s'affiche dans le graphique en forme de flamme, marquant le même point dans le temps dans le graphique en forme de flamme:
De même, lorsque vous pointez sur des entrées du graphique en forme de flamme, la partie correspondante du graphique CPU est mise en surbrillance. Cela permet de voir exactement quelles tâches provoquent ces pics de CPU.
Filtrer la trace
Le débogage des problèmes de performances implique généralement d'examiner une grande quantité de données. Pour vous aider à vous concentrer sur les informations les plus pertinentes, nous avons amélioré la capacité à filtrer le bruit.
L'année dernière, nous avons ajouté la possibilité d'ajouter des scripts dans le panneau "Performances" à la liste d'ignorer de DevTools, ce qui permet de filtrer les entrées moins pertinentes dans le graphique en forme de flamme. Par exemple, si vous déboguez les performances d'un composant de votre page, il peut être gênant si la pile d'appels de votre framework est suffisamment profonde pour que vous deviez faire défiler le panneau des performances vers le haut et vers le bas. Vous souhaitez souvent réduire une grande partie de cette pile d'appels pour vous concentrer sur les parties importantes.
Vous pouvez effectuer un clic droit sur une entrée dans le graphique en forme de flamme, puis sélectionner Add script to ignore list (Ajouter le script à la liste d'ignorer). Le script est alors ajouté à la liste d'ignorer de DevTools et toutes les entrées qui en découlent sont réduites dans le graphique en forme de flamme.
Vous pouvez désormais également modifier manuellement la liste d'ignorement directement depuis l'option en haut du panneau Performances. Les expressions régulières de la liste d'ignorement sont partagées entre les outils de développement. Les scripts correspondants seront donc ignorés lors du débogage dans le panneau "Sources" et regroupés en une seule entrée dans le graphique en forme de flamme. La liste est également conservée entre les sessions des outils de développement.
Vous pouvez ainsi contrôler précisément les fichiers à ignorer et activer ou désactiver des règles au fur et à mesure de votre travail.
Afficher les scripts tiers en gris
Les scripts tiers sont courants sur les sites Web, mais ils peuvent souvent être hors de notre contrôle ou non pertinents pour une session de débogage particulière. La nouvelle Atténuer les tiers en haut du panneau "Performances" permet d'afficher en gris le script et l'activité réseau tiers dans la chronologie. Cela réduit l'encombrement visuel et vous permet de vous concentrer sur les performances des propriétaires.
Mais parfois, vous souhaitez avoir encore plus de contrôle, par exemple en vous concentrant sur un tiers particulier ou en n'acceptant que les contributions de votre propre API ou de votre propre CDN. En bas du panneau de l'onglet Résumé, vous trouverez une répartition des éléments propriétaires et tiers que les outils de développement peuvent détecter sur la page. Si vous pointez sur une entité de la liste, toutes les activités qui ne lui sont pas associées s'affichent en gris.
Conclusion
Ces nouvelles fonctionnalités devraient vous aider à mieux naviguer dans le panneau "Performances" et à filtrer le bruit pour vous concentrer sur les parties de la trace qui vous intéressent. Essayez ces fonctionnalités et dites-nous comment elles pourraient être améliorées ou quelles autres améliorations vous aimeriez voir.