Afficher les noms des fonctions d’origine dans les profils de performances

Si votre processus de génération compile et minifie votre code et le combine dans un fichier unique, les noms des fonctions affichées dans un profil de performances peuvent être difficiles à comprendre. La source mappe votre code compilé et minifié à vos fichiers de code source d’origine. L’outil Performance peut utiliser des mappages sources pour mapper des noms de fonction minifiés après l’enregistrement, en les renvoyant à leurs noms d’origine trouvés dans votre code d’origine.

Pour en savoir plus sur la façon dont DevTools utilise les mappages sources, consultez Mapper le code traité à votre code source d’origine, pour le débogage.

Pour afficher les noms de vos fonctions d’origine dans le graphique à flammes de l’outil Performance , utilisez le bouton Unminify ().

Le mappage source est utilisé dans DevTools pour que votre code côté client reste lisible et débogué. En cliquant sur le bouton Unminifier dans l’outil Performances, vous pouvez utiliser des mappages de sources pour créer une version nonminifiée du profil de performance que vous avez enregistré.

Exemple de graphique de flammes de profil de performances, avec des noms de fonctions difficiles à lire :

Exemple de graphique de flammes de profil de performances, avec des noms de fonction plus significatifs restaurés :

Lors de l’enregistrement d’un profil de performances dans l’outil Performance , la section Main du profil affiche des graphiques de flamme détaillés des fonctions JavaScript appelées pendant l’enregistrement.

Dans l’idéal, dans cette vue de graphique à flammes, vous souhaitez voir les noms de fonctions explicites affichés dans votre code source d’origine. Toutefois, si votre code de production est compilé, minifié ou groupé, l’outil Performance affiche initialement les noms des fonctions extraites de votre code de production transformé. Ces noms de fonction de production peuvent être obscurs et peuvent ne pas être facilement mappés aux noms de fonction dans votre code source d’origine.

Pour déminifier un profil de performances, afin que des noms de fonction plus explicites s’affichent en plus des identificateurs minifiés, suivez les étapes ci-dessous.

Étape 1 : Configurer les mappages sources

Hébergez vos mappages sources côte à côte avec votre code de production. Lors de l’unminification, l’outil Performance s’attend à trouver vos mappages sources avec votre code de production.

Pour plus d’informations, consultez Mapper le code traité à votre code source d’origine, pour le débogage.

Étape 2 : Enregistrer un profil de performance

1. Dans l’outil Performances , cliquez sur le bouton Enregistrer pour enregistrer un profil de performances pour la page que vous souhaitez analyser. Pour plus d’informations, consultez Enregistrer les performances du runtime.

   

   Un profil de performances est enregistré dans l’outil Performances .

2. Dans l’outil Performances, cliquez sur la zone main (graphique de flammes), puis utilisez la roulette de la souris pour effectuer un zoom avant. Cliquez et faites glisser vers la gauche et la droite. Examinez les noms des fonctions dans le graphique de flammes.

   Le graphique de flammes dans l’outil Performances affiche des noms de fonction minifiés, tels que XI, Gi, d, o, an, c, co et a à partir de votre code de production :

   

Étape 3 : Déminifier le code

1. Cliquez sur le bouton Unminify () :

   

   Dans DevTools, une fenêtre contextuelle s’affiche brièvement et indique : État : création d’un fichier non miné. La boîte de dialogue Enregistrer sous s’ouvre . Le nom de fichier par défaut est un modèle commençant par la date et l’heure, par yymmddThhmmssexemple : Profile-20220307T164948-unminified.json. Le répertoire par défaut est le répertoire Downloads .

2. Sélectionnez un nom de fichier et un répertoire, puis cliquez sur le bouton Enregistrer .

   L’outil Performances crée une nouvelle version du profil de performances enregistré, avec certains noms de fonctions du graphique de flammes remplacés par des noms de fonction plus explicites à l’aide de vos mappages sources. Certains noms de production minifiés peuvent toujours apparaître, car les mappages sources ne fournissent pas toujours les informations nécessaires pour que l’outil Performance mappe tous les noms de fonction.

Étape 4 : charger le profil nonminifié

1. Dans l’outil Performance , cliquez sur le bouton Charger le profil (). Vous pouvez également cliquer avec le bouton droit sur une zone vide de l’outil Performances , puis sélectionner Charger le profil.

   

2. Dans la boîte de dialogue Ouvrir , sélectionnez le fichier de profil .json de performances non déminifié que vous venez de télécharger. Si nécessaire, pour plus d’informations, consultez Charger un enregistrement dans Référence des fonctionnalités de performances, puis continuez ci-dessous.

   Certains noms de fonction sont désormais déminifiés. Le graphique à flammes nonminifiée dans l’outil Performance affiche désormais les fonctions étiquetées avec des noms plus explicites provenant de vos mappages sources, comme useObserver (d),useQueuedForceUpdateBlock (o),trackDerivedFunction (an),initializeIconColorMap (c),getExtraToolControls (co), et isToggleEnabled (a).

   

Voir aussi

• Présentation de l’outil Performance : présentation de l’analyse des performances du runtime dans DevTools.
• Informations de référence sur les fonctionnalités de performance : référence pour la plupart des fonctionnalités proposées dans l’outil Performance.