Analyse des données d'utilisation de la mémoire (JavaScript)

Cette rubrique décrit l'analyseur de mémoire JavaScript. Cet outil est disponible pour les applications du Windows Store générées à l'aide de JavaScript dans Visual Studio 2012 Update 1. Pour obtenir le didacticiel expliquant comment utiliser l'outil, consultez Didacticiel : Recherche d'une fuite de mémoire (JavaScript).

Affichage des données d'utilisation de la mémoire

Vous pouvez utiliser l'analyseur de mémoire JavaScript lorsqu'une application de travail du Windows Store est ouverte dans Visual Studio.

Pour exécuter l'analyseur de mémoire JavaScript

1. Si vous exécutez l'application à partir de Visual Studio, cliquez sur Ordinateur local, Simulateur ou Ordinateur distant dans la liste déroulante Démarrer le débogage de la barre d'outils Déboguer.

   Pour plus d'informations sur ces options, consultez Exécution des applications du Windows Store à partir de Visual Studio.

2. Dans le menu Déboguer, pointez vers Analyse de mémoire JavaScript, puis cliquez sur l'une des options suivantes :

   • Lancer le projet de démarrage. Sélectionnez cette option pour lancer le projet de démarrage en cours. Si vous exécutez l'application sur un ordinateur distant, vous devez cliquer sur cette option.

   • Lancer le package d'application installé. Sélectionnez cette option pour sélectionner une application installée à analyser. Cette option n'est pas prise en charge lorsque l'application est exécutée sur un ordinateur distant.

     Vous pouvez utiliser cette option pour analyser l'utilisation de la mémoire des applications installées sur votre ordinateur lorsque vous n'avez pas accès au code source. Cette option s'avère également utile lorsque vous souhaitez uniquement analyser l'utilisation de la mémoire d'une application, en dehors de votre propre développement d'applications.

   • Attacher à l'application en cours. Sélectionnez cette option pour choisir l'application dans la liste des applications en cours d'exécution. Cette option n'est pas prise en charge lorsque l'application est exécutée sur un ordinateur distant.

     Vous pouvez utiliser cette option pour analyser l'utilisation de la mémoire des applications en cours d'exécution sur votre ordinateur lorsque vous n'avez pas accès au code source.

   Lorsque vous démarrez l'analyseur de mémoire, un message de contrôle de compte d'utilisateur peut demander votre autorisation pour exécuter VsEtwCollector.exe. Cliquez sur Oui.

3. Basculez vers Visual Studio en appuyant sur Alt+Tab.

   Le Vue Résumé pour l'analyseur de mémoire JavaScript s'affiche dans l'onglet Concentrateur de diagnostic.

Vues relatives à l'utilisation de la mémoire

Lorsque vous exécutez l'analyseur de mémoire JavaScript, les vues relatives aux données d'utilisation de la mémoire suivantes sont disponibles :

• Vue Résumé. Fournit un graphique de l'utilisation de la mémoire pour l'application en cours d'exécution et une collection de toutes les mosaïques des résumés des instantanés. Cette vue s'affiche dans l'onglet Concentrateur de diagnostic.

• Affichage des détails d'un instantané. Affiche des données détaillées relatives à l'utilisation de la mémoire pour un instantané unique.

• Affichage de la comparaison des instantanés. Affiche des données détaillées relatives à l'utilisation de la mémoire, sous forme de valeurs comparées pour deux instantanés sélectionnés.

Vue Résumé

Le mode Résumé fournit un graphique de l'utilisation de la mémoire de l'application en cours d'exécution et une collection de toutes les mosaïques des résumés des instantanés. Dans cette vue, vous pouvez effectuer des tâches de base, comme prendre des instantanés, analyser des informations résumées et accéder à d'autres vues.

Le graphique de mémoire affiche une vue active de la mémoire de processus de l'application. Il indique les octets privés, la mémoire native et le tas JavaScript. Le graphique se présente comme suit :

Le graphique de mémoire est une vue déroulante de la mémoire de processus.

Si des marques de profil ont été ajoutées au code de l'application, un triangle Marque utilisateur apparaît dans le graphique d'utilisation de la mémoire pour indiquer le moment où cette section de code est atteinte. Pour plus d'informations, consultez Commandes de la console JavaScript.

Une partie de la mémoire présentée dans le graphique de mémoire est allouée par le runtime JavaScript. Vous ne pouvez pas contrôler l'utilisation de cette mémoire dans votre application. L'utilisation de la mémoire présentée dans le graphique augmente lorsque vous prenez votre premier instantané, puis elle augmente plus de façon plus modérée pour chaque instantané supplémentaire.

Affichage du résumé d'un instantané

Vous pouvez prendre un instantané de l'état actuel de l'utilisation de la mémoire de l'application en cliquant sur Prendre un instantané du tas en mode Résumé. Une mosaïque du résumé d'un instantané, qui s'affiche également en mode Résumé, fournit des informations sur le tas JavaScript et des liens vers des informations plus détaillées. Si vous disposez de plusieurs instantanés, chaque instantané fournit des informations supplémentaires en comparant ses données à celle de l'instantané précédent.

Cette illustration montre l'exemple d'un instantané précédé d'un autre instantané.

Il s'agit des informations qui s'affichent dans le résumé d'un instantané :

• Titre de l'instantané et horodatage.

• Taille du tas (texte bleu, à gauche). Ce nombre comprend les éléments DOM et les objets que le moteur d'exécution JavaScript ajoute au tas JavaScript. La taille du tas est un lien vers la vue Dominators de l'instantané.

• Taille de tas différentielle (texte rouge ou vert, à gauche). Cette valeur indique la différence entre la taille du tas de l'instantané actuel et celle de l'instantané précédent. La valeur est affichée en rouge si la mémoire a augmenté. Sinon, elle est affichée en vert. Si la taille du tas est identique, la valeur est Aucune différence. Pour le premier instantané, la valeur est simplement Ligne de base (texte gris). Cette valeur est un lien vers la vue Dominators de la comparaison des instantanés.

• Nombre d'objets (texte bleu, à droite). Ce nombre indique uniquement les objets créés dans votre application et exclut les objets intégrés créés par le runtime JavaScript. Le nombre d'objets est lié à la vue Types des détails d'un instantané.

• Nombre différentiel d'objets (texte rouge ou vert, à droite). Cette valeur indique la différence entre le nombre d'objets de l'instantané actuel et celui de l'instantané précédent. La valeur est affichée en rouge si le nombre d'objets a augmenté. Sinon, elle est affichée en vert. Si le nombre d'objets est identique, la valeur est Aucun différence. Pour le premier instantané, la valeur est simplement Ligne de base (texte gris). Cette valeur est un lien vers la vue Types de la comparaison des instantanés.

• Capture d'écran lors de la prise de l'instantané.

Affichage des détails d'un instantané

Vous pouvez afficher des informations détaillées sur l'utilisation de la mémoire pour chaque instantané dans la vue du détail d'un instantané.

En mode Résumé, vous pouvez afficher les détails d'un instantané en cliquant sur le lien du résumé d'un instantané. Par exemple, le lien de la taille du tas dans le résumé d'un instantané ouvre les détails de l'instantané, la vue Dominators s'ouvrant par défaut.

Cette illustration montre la vue Types dans les détails d'un instantané.

Dans la vue des détails d'un instantané, les vues supplémentaires suivantes relatives aux données d'utilisation de la mémoire sont disponibles :

• Dominators. Affiche une liste de tous les objets présents dans le tas, triée par taille de retenue.

• Types. Indique le nombre d'instances et la taille totale des objets, regroupés par type d'objet. Par défaut, ceux-ci sont triés par le nombre d'instances.

• Racines. Affiche une arborescence d'objets allant des objets racine aux références enfants. Par défaut, les nœuds enfants sont triés sur la colonne de la taille de retenue, en ordre décroissant.

• DOM. Affiche les objets qui sont des éléments de balisage (DOM), avec leur taille de retenue. Par défaut, ils sont triés par taille de retenue.

• WinRT. Affiche les objets Windows managés et non managés qui sont référencés à partir de votre application JavaScript. Par défaut, ils sont triés par taille de retenue.

La plupart des vues, comme la vue Dominators, indiquent des types de valeurs similaires. Ces valeurs incluent :

• Identificateur(s). Nom qui identifie le mieux l'objet. Par exemple, pour les éléments HTML, si la valeur d'attribut ID est utilisée, elle est affichée.

• Type. Nom de type de l'objet.

• Taille. Taille de l'objet, à l'exclusion de la taille des objets référencés.

• Taille de retenue. Somme de la taille de l'objet et de la taille de tous les objets enfants n'ayant aucun autre objet parent. Pour des raisons pratiques, cette somme est la quantité de mémoire retenue par l'objet. De ce fait, si vous supprimez l'objet, vous libérez la quantité de mémoire spécifiée.

• Nombre. Nombre d'instances de l'objet. Cette valeur s'affiche uniquement dans la vue Types.

Affichage de la comparaison des instantanés

Dans l'analyseur de mémoire JavaScript, vous pouvez comparer un instantané par rapport à un instantané précédent dans la vue de la comparaison des instantanés.

En mode Résumé, vous pouvez afficher les valeurs différentielles d'instantanés en cliquant sur un autre instantané dans la liste déroulante située dans l'angle supérieur droit de la mosaïque du résumé d'un instantané.

La comparaison des instantanés vous permet d'afficher des informations différentielles dans les vues Dominators, Types, Racines, Élément DOM et Objets Windows Runtime.

La comparaison des instantanés affiche tous les objets qui ont été ajoutés au tas entre les deux instantanés. Dans la vue différentielle Racines (et le Graphe de référence), la couleur de texte gris clair indique que l'objet lui-même existait dans l'instantané précédent, mais que l'un de ses enfants n'existait pas.

Cette illustration montre la vue Dominators dans la comparaison des instantanés.

Dans la comparaison des instantanés, les vues, telles que la vue Dominators, sont identiques à celles dans la vue Affichage des détails d'un instantané. Les vues de la comparaison des instantanés affichent les mêmes types de valeur que les vues des détails d'un instantané, mais elles comprennent les valeurs supplémentaires suivantes :

• Diff. taille. Différence entre la taille de l'objet dans l'instantané actuel et sa taille dans l'instantané utilisé pour la comparaison (l'instantané plus ancien), à l'exclusion de la taille des objets référencés.

• Diff. taille de retenue. Différence entre la taille de retenue de l'objet dans l'instantané actuel et sa taille de retenue dans l'instantané utilisé pour la comparaison (l'instantané plus ancien). La taille de retenue inclut la taille de l'objet et la taille de tous les objets enfants n'ayant aucun autre objet parent. Pour des raisons pratiques, la taille de retenue est la quantité de mémoire retenue par l'objet. De ce fait, si vous supprimez l'objet, vous libérez la quantité de mémoire spécifiée.

• Différence de nombre. Différence entre le nombre d'instances de l'objet dans l'instantané actuel et le nombre d'instances dans l'instantané utilisé pour la comparaison. Cette valeur s'affiche uniquement dans la vue Types.

Affichage dans la vue Racines

Dans les vues Dominators, Types, DOM et WinRT, vous pouvez voir la relation entre un objet particulier et l'objet Global. Grâce à cette fonctionnalité, vous pouvez rechercher facilement un objet connu dans la vue Racines, sans avoir besoin d'effectuer une recherche dans l'arborescence d'objets Global.

Pour utiliser la fonctionnalité, cliquez avec le bouton droit sur un identificateur de la vue Dominators, Type, DOM ou WinRT, puis cliquez sur Afficher en vue racine.

Filtrage des données

Dans les vues Dominators, Types, DOM et WinRT, vous pouvez filtrer les données en recherchant des identificateurs spécifiques. Pour rechercher un identificateur, tapez simplement la valeur dans la zone de texte Filtre de l'identificateur. Lorsque vous commencez à taper les caractères, les identificateurs qui ne contiennent pas ces caractères sont exclus.

Chaque vue a son propre filtre, les informations filtrées ne sont donc pas répercutées entre les vues.

Affichage des références

Les volets inférieurs des vues Dominators, Types, DOM et WinRT contiennent un graphe de référence que vous pouvez utiliser pour afficher les références partagées. Si vous sélectionnez un objet dans le volet supérieur, le graphe de référence affiche une liste des références qui pointent vers l'objet sélectionné.

Pour obtenir une aide d'ordre général pour identifier des objets équivalents, cliquez sur Afficher les ID d'objet dans la liste déroulante des paramètres située dans l'angle supérieur droit du volet supérieur. Lorsque vous cliquez sur cette option, les ID d'objet s'affichent en regard des objets dans la liste Identificateur(s). Les objets portant le même ID sont des références partagées.

Affichage des valeurs intégrées

Dans les vues Dominators, Types, DOM et WinRT, vous pouvez afficher les objets intégrés. Par défaut, ces vues affichent uniquement les objets que vous créez dans votre application. Cela permet d'exclure les informations superflues et d'isoler les problèmes liés à l'application. Cependant, il peut parfois être utile d'afficher tous les objets générés pour votre application par le runtime JavaScript. Vous pouvez afficher ces objets dans l'analyseur de mémoire JavaScript.

Pour afficher ces objets, cliquez sur Afficher les éléments intégrés dans la liste déroulante des paramètres située dans l'angle supérieur droit du volet.

Fichiers de session de diagnostic

Les résumés des instantanés de diagnostic, ainsi que les vues de détails associées, sont enregistrés en tant que fichiers .diagsession. L'Explorateur de solutions affiche les sessions de diagnostic précédentes dans le dossier Sessions de diagnostic. Dans l'Explorateur de solutions, vous pouvez ouvrir les sessions précédentes, ou supprimer ou renommer des fichiers.

Commandes de la console JavaScript

L'analyseur de mémoire JavaScript prend en charge les deux Commandes de la console JavaScript suivantes, que vous pouvez utiliser dans votre code pour isoler la section de code où se produit un problème de mémoire. Ces commandes lèvent une exception si vous les ajoutez à l'application et exécutez l'application dans n'importe quel autre contexte que celui de l'analyseur de mémoire (vous pouvez toutefois vérifier si les commandes existent avant de les utiliser. Les commandes n'existent pas au début de la phase de démarrage de la session.)

• console.takeHeapSnapshot prend un instantané du tas qui s'affiche dans l'analyseur de mémoire JavaScript.

• console.profileMark définit une marque de profil (le triangle Marque utilisateur) qui apparaît dans l'arbre visuel du graphique de mémoire dans le mode Résumé. Cette commande accepte un argument de chaîne qui représente une description de l'événement et s'affiche sous la forme d'une info-bulle dans le graphique de mémoire. Cette description ne doit pas dépasser 100 caractères.

L'exemple de code suivant montre comment appeler takeHeapSnapshot en toute sécurité.

    if (console && console.takeHeapSnapshot) { console.takeHeapSnapshot(); }

L'exemple de code suivant montre comment appeler profileMark en toute sécurité.

    if (console && console.profileMark) { console.profileMark("Initialized"); }

Conseils pour identifier les problèmes de mémoire

Ces conseils peuvent vous aider à diagnostiquer les problèmes d'utilisation de la mémoire :

• Utilisez la vue Dominators de la comparaison d'instantanés pour tenter d'identifier rapidement les principaux problèmes de mémoire.

• Utilisez Affichage dans la vue Racines pour identifier l'emplacement du référencement d'un objet dans la hiérarchie générale de la mémoire.

• Lorsqu'il est difficile d'identifier la cause d'un problème de mémoire, utilisez les différentes vues (telles que Dominators et Types) pour rechercher des points communs, comme des objets et des types connexes.

• Déterminez s'il est utile de modifier temporairement le code pour isoler les problèmes. Vous pouvez, par exemple, décider d'effectuer les opérations suivantes :

  • Utiliser les Commandes de la console JavaScript pour l'analyseur de mémoire, console.takeSnapshot et console.profileMark.

    Vous pouvez utiliser ces commandes pour isoler les problèmes que vous ne pouvez pas isoler lorsque vous cliquez manuellement sur Prendre un instantané du tas.

  • Créer un objet de test facile à trouver dans les vues de l'analyseur de mémoire JavaScript, telle que la vue Dominators. Par exemple, vous pouvez attacher un objet très volumineux à un autre objet pour voir si un objet ou un élément particulier a été récupéré par le garbage collector.

• Recherchez les objets qui sont conservés par inadvertance dans la mémoire après une navigation vers une nouvelle page. Il s'agit d'une cause fréquente des problèmes de mémoire. Par exemple, l'utilisation incorrecte de la fonction URL.CreateObjectUrl peut entraîner ce problème.

Voir aussi

Tâches

Didacticiel : Recherche d'une fuite de mémoire (JavaScript)