Publié le 13 novembre 2024
Imaginez que vous examiniez une trace de performances et que vous souhaitiez mettre en surbrillance une zone spécifique, comme la tâche la plus longue ou une partie de travail inutile. Vous avez peut-être voulu prendre des notes pour référence ou partager vos résultats avec un collègue. Quelle est la meilleure façon de procéder ?
Bien sûr, il s'agit d'imprimer la trace sur une immense feuille de papier, puis de dessiner et d'écrire manuellement vos notes, ou d'utiliser un logiciel tiers pour dessiner des notes sur une capture d'écran d'une trace. (bien que ce fût la meilleure méthode jusqu'à présent).
Notre équipe s'efforce de simplifier les workflows des développeurs. Nous sommes donc ravis de vous présenter une alternative à ces options: la possibilité d'ajouter des annotations directement à la trace dans le panneau Performances.
Vous pouvez désormais annoter les traces en place, parcourir facilement ces annotations et même les enregistrer directement dans le fichier de trace. Le partage des insights mis en évidence est ainsi aussi simple que l'envoi d'un fichier, sans avoir besoin d'outils ou de solutions externes. Les annotations peuvent vous aider à déboguer les performances, mais aussi à vous mettre rapidement sur la même longueur d'onde avec votre collègue ou à améliorer sa compréhension de ce qui se passe sans trop d'allers-retours.
Il existe trois types d'annotations:
Périodes temporelles annotées: ajoutez un libellé à une période temporelle du graphique chronologique.
Entrées annotées: ajoutez un libellé à n'importe quelle entrée de la chronologie.
Connexions entre les entrées: connectez deux entrées à l'aide d'une flèche pour indiquer leur relation.
Examinons chaque type d'annotation et les scénarios dans lesquels vous pouvez les utiliser.
Périodes annotées
Un workflow courant dans DevTools consiste à enregistrer une trace pour déboguer une interaction lente. La vue de la trace peut sembler intimidante au premier abord, mais elle commence à prendre tout son sens lorsque vous vous intéressez à des gestionnaires d'événements et des piles d'appels spécifiques. Pour faciliter l'utilisation de la vue de trace, vous pouvez créer une annotation pour indiquer comment un bloc de temps est généralement utilisé. Par exemple, il peut être utile d'annoter la plage temporelle pour que l'UI se mette à jour de manière significative après une interaction utilisateur.
Pour annoter une plage temporelle: maintenez la touche Maj enfoncée et faites glisser le curseur du début de l'interaction jusqu'à la mise à jour de l'UI. Saisissez ensuite un libellé pour créer l'annotation. Si la plage sélectionnée n'est pas correcte, annulez-la en cliquant ailleurs avant de saisir du texte. Pour modifier le libellé d'une annotation, double-cliquez dessus. Pour le moment, vous ne pouvez pas ajuster la période d'une annotation existante. Si la période n'est pas correcte, supprimez l'annotation et créez-en une autre.
Grâce à cette annotation, vous pouvez examiner plus clairement tout le travail qui doit être effectué avant le changement visible par l'utilisateur. Vous pouvez ainsi concentrer votre débogage en conséquence.
Entrées annotées
Pour rendre la modification visible par l'utilisateur plus évidente, vous pouvez également annoter la tâche responsable de la transition avec un libellé d'entrée.
Pour créer un libellé pour l'entrée: double-cliquez sur l'entrée sélectionnée et saisissez votre libellé, ou effectuez un clic droit sur l'entrée et sélectionnez "Libeller l'entrée" dans le menu contextuel. Pour modifier le libellé d'une annotation, double-cliquez sur l'entrée ou sur le libellé. Vous pouvez également sélectionner l'option "Entrée de libellé" dans le menu contextuel.
Grâce à ces annotations, vous pouvez plus facilement identifier le travail qui est (ou non) essentiel à l'interaction et le temps qu'il prend.
Connexions d'entrée
La troisième façon d'annoter la trace consiste à établir la connexion entre l'interaction et la tâche longue responsable de la transition.
Pour créer une connexion entre des entrées: double-cliquez sur l'entrée que vous souhaitez associer à une autre, puis cliquez sur la flèche qui s'affiche à droite de cette entrée. Cliquez ensuite sur l'entrée à laquelle vous souhaitez l'associer. Vous pouvez également effectuer un clic droit sur l'entrée, puis sélectionner "Associer les entrées" dans le menu contextuel.
Même si l'interaction elle-même est terminée, vous pouvez utiliser ce type d'annotation pour montrer plus clairement comment elle est liée aux tâches longues ultérieures qui bloquent finalement l'UI.
Supprimer et masquer des annotations
Vous pouvez supprimer rapidement toutes les annotations depuis la vue de liste des annotations dans la barre latérale. Lorsque vous pointez sur une annotation, une icône en forme de corbeille s'affiche. Cliquez sur cette icône pour supprimer l'annotation.
Pour supprimer les libellés des entrées et les annotations de connexion des entrées associées à un événement spécifique, effectuez un clic droit sur l'événement, puis sélectionnez "Supprimer les annotations". Vous pouvez également supprimer les annotations avec des libellés en supprimant le libellé et en enregistrant les annotations.
Si vous souhaitez masquer les annotations sans les supprimer pour qu'elles ne vous empêchent pas d'explorer la trace, cochez simplement la case "Masquer les annotations" située en bas de la barre latérale des annotations. Cette préférence sera enregistrée. Lorsque vous chargez une trace avec des annotations lorsque ce paramètre est activé, les annotations restent masquées jusqu'à ce que vous décochez la case.
Enregistrer ou charger des traces annotées
Parfait. Vous avez ajouté toutes ces annotations pour vous aider, vous et les autres, à comprendre la trace. Étape suivante
Il n'est plus nécessaire de prendre des captures d'écran de la trace pour les envoyer à un collègue comme avant, avant les annotations. Il vous suffit d'enregistrer votre fichier annoté et de l'envoyer. Il peut ensuite importer le fichier dans le panneau Performances et voir toutes les annotations que vous avez ajoutées dans le contexte de la trace. Il peut même ajouter d'autres annotations et vous les renvoyer.
Les outils de développement enregistrent également d'autres types de personnalisations dans la vue de la trace. Par exemple, vous pouvez isoler une zone d'intérêt en zoomant et en définissant un fil d'Ariane, ou masquer les entrées dans des piles d'appels non pertinentes. Tous ces paramètres seront conservés par le fichier de trace, ce qui facilite encore plus la collaboration sur le débogage des performances. Grâce à toutes ces personnalisations, vous pouvez attirer l'attention sur ce qui compte le plus tout en fournissant le contexte de l'ensemble de la trace interactive, contrairement à une capture d'écran.
Pour conserver les annotations et autres personnalisations, cliquez sur l'option Enregistrer la trace sous l'icône Télécharger . Lorsqu'une trace est chargée, elle contient toutes ces personnalisations. L'option par défaut est l'enregistrement avec annotations, mais si vous souhaitez enregistrer uniquement le fichier de trace brut, sélectionnez l'option Enregistrer la trace sans annotations.
Conclusion
Cela peut sembler beaucoup d'informations à assimiler, mais ne vous inquiétez pas. Vous trouverez toujours des instructions pour créer des annotations dans l'onglet "Annotations" de la barre latérale du panneau Performances. Cet onglet fournit des instructions lorsqu'aucune annotation n'existe et affiche une vue liste des annotations une fois qu'elles sont créées.
Les annotations du panneau Performances permettent aux développeurs de repérer les moments cruciaux d'une trace, en ajoutant du contexte et des insights personnalisés. Cela simplifie le processus d'analyse, ce qui facilite le partage et la collaboration sur l'optimisation des performances. Essayez les annotations dans le panneau "Performances" et donnez-nous votre avis. Si vous avez des commentaires à nous faire, n'hésitez pas à les partager dans le problème public.
Dites adieu aux outils externes et profitez d'un workflow plus efficace.