Noms de fonctions dévalorisés des profils de performance DevTools

By Matthieu CHARRIER

La version 99 de Microsoft Edge dispose désormais d’un bouton « Unminify profil ». Il vous permet de télécharger un profil non minifié à l’aide de vos cartes sources publiées. L’outil Performance vous permet d’ouvrir ce fichier et de voir des piles d’appels plus faciles à utiliser, avec de meilleurs noms de fonctions.

DevTools propose un outil de performance qui permet aux développeurs de capturer des événements, des requêtes réseau, des piles d’appels et autres sur une période donnée. Les profils sont utilisés pour diagnostiquer les problèmes de performance dans des scénarios particuliers. Ces profils peuvent également être exportés au format JSON. Cela permet aux pairs de contribuer facilement aux enquêtes.

Les grandes applications web réduisent souvent le code en production pour réduire la taille des scripts et améliorer les performances. Cela peut conduire à ce que les noms de fonctions soient réduits en taille et renommés à quelques caractères seulement. Cela peut rendre très difficile l’interprétation des piles d’appels par les utilisateurs.

Animation des noms de fonctions réduites dans l’outil de performance

C’est un problème auquel sont confrontés de nombreux développeurs web chez Microsoft. Nous voulons les aider. Une nouvelle fonctionnalité de l’outil de performance nous permet de créer des profils non minifiés. Cela nous aidera à déchiffrer les noms de fonctions minifiés. Cette fonctionnalité sera disponible dans Microsoft Edge 99.

Pour aller plus loin : DevTools pour Retainers, Améliorations de l’outil mémoire

A lire également :   Comment supprimer l'horodatage sur WhatsApp

Elle fonctionne en récupérant les cartes sources pour le code qui se trouve dans un profil. Ensuite, elle résout les noms de fonctions appropriés. Cette fonctionnalité fonctionne mieux si vos cartes sources sont déjà publiées avec votre code source. Prenez une photo de profil et cliquez sur le bouton « Unminify profil » dans la barre d’outils. Cela vous invitera à enregistrer un nouveau document sur votre machine.

Comparons un profil de performance avant et après pour mieux comprendre les avantages. Comme vous pouvez le voir dans la version rouge après, les noms des fonctions ont été déminifiés.

Cela permet à l’utilisateur de comprendre plus facilement l’enregistrement.

Avant

Image « avant » de l’instrument de performance, montrant les noms de fonctions minifiés

Après

L’image « après » de l’outil de performance, qui montre les noms de fonctions non minifiés

Nous vous encourageons à le tester et à me faire savoir s’il vous facilite la vie. DevTools vous permet de soumettre vos commentaires. Cela nous aidera à améliorer cet outil !

Cette fonctionnalité en est à ses débuts et nous sommes conscients de certains problèmes. L’heuristique pour résoudre les noms de fonctions n’est pas encore parfaite. L’outil peut ne pas être capable de trouver des cartes de source qui n’existent pas à côté des fichiers JavaScript. Nous travaillons actuellement à l’amélioration de cette fonctionnalité dans les prochaines versions.