Analyser l’utilisation de mémoire JavaScript dans les applications UWPAnalyze JavaScript Memory Usage in UWP Apps

L’analyseur de mémoire JavaScript est disponible dans Visual Studio pour vous aider à comprendre l’utilisation de la mémoire et à rechercher les fuites de mémoire dans vos applications UWP générées pour Windows en JavaScript.The JavaScript memory analyzer is available in Visual Studio to help you understand memory usage and find memory leaks in your UWP apps built for Windows using JavaScript. Les applications dédiées aux applications Windows universelles sont prises en charge.Supported apps include apps for Universal Windows Apps.

L'analyseur de mémoire JavaScript peut effectuer les opérations suivantes :The JavaScript memory analyzer can do these things for you:

  • Vous aider à détecter rapidement les problèmes d'utilisation de la mémoire dans votre application en mettant en évidence les données les plus pertinentes.Help you quickly find memory usage issues in your app by emphasizing the most relevant data.

    Ces données sont disponibles dans des résumés d'instantanés qui montrent les différences entre deux instantanés et fournissent des liens vers des vues plus détaillées.You get this data in snapshot summaries that show the differences between two snapshots and provide links to more detailed views.

  • Fournir des vues des dominateurs, des types et des racines pour aider à isoler les problèmes.Provide views of dominators, types, and roots to help isolate issues.

  • Réduire les informations ne pouvant pas être exploitées dans les données de tas JavaScript.Reduce non-actionable info in the JavaScript heap data.

    Les objets qui ne sont pas créés directement dans votre code d'application sont automatiquement exclus. Vous pouvez également filtrer les données par nom d'objet.Objects that aren't created directly in your app code are automatically filtered out. You can also filter data by object name.

Exécuter l'analyseur de mémoire JavaScriptRun the JavaScript memory analyzer

Vous pouvez utiliser l'analyseur de mémoire lorsqu'une application UWP est ouverte dans Visual Studio.You can use the memory analyzer when you have a working UWP app open in Visual Studio.

Pour exécuter l'analyseur de mémoireTo run the memory analyzer

  1. Ouvrez Visual Studio.Open Visual Studio.

  2. Si vous exécutez l’application à partir de Visual Studio, dans la barre d’outils Standard, dans la liste Démarrer le débogage, choisissez la cible de débogage de votre projet : Ordinateur local ou Appareil.If you're running the app from Visual Studio, in the Start Debugging list on the Standard toolbar, choose the debug target for your project: either Local Machine or Device.

  3. Dans la barre de menus, choisissez DéboguerProfileur de performances...On the menu bar, choose Debug, Performance Profiler....

    Par défaut, le projet de démarrage actif est analysé.By default, the current startup project is analyzed. Si vous souhaitez modifier la cible d'analyse, sélectionnez Modifier la cible.If you want to change the analysis target, choose Change Target.

    Modifier la cible de l’analyseChange analysis target

    Les options suivantes sont disponibles pour la cible d'analyse :The following options are available for the analysis target:

    • Projet de démarrage.Startup Project. Analyse le projet de démarrage en cours.Analyzes the current startup project. Si vous exécutez l'application sur un ordinateur distant, vous devez sélectionner cette option, qui est l'option par défaut.If you're running the app on a remote machine, you must choose this option, which is the default.

    • Application en cours d'exécution.Running App. Permet de sélectionner une application UWP dans la liste des applications en cours d’exécution.Lets you select a UWP app from a list of running apps. Vous ne pouvez pas utiliser cette option lorsque vous exécutez l'application sur un ordinateur distant.You can't use this option when you're running your app on a remote machine.

      Utilisez 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.Use this option to analyze memory usage of apps that are running on your computer when you don't have access to source code.

    • Application installée.Installed App. Permet de sélectionner une application UWP installée que vous voulez analyser.Lets you select an installed UWP app that you want to analyze. Vous ne pouvez pas utiliser cette option lorsque vous exécutez l'application sur un ordinateur distant.You can't use this option when you're running your app on a remote machine.

      Utilisez 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.Use this option to analyze the memory usage of apps that you have installed on your computer when you don't have access to source code. Cette option s'avère également utile lorsque vous voulez uniquement analyser l'utilisation de la mémoire d'une application en dehors de votre propre développement d'applications.This option can also be useful when you just want to analyze the memory usage of any app outside your own app development.

  4. Dans Outils disponibles, cochez la case Mémoire JavaScript , puis sélectionnez Démarrer.From Available Tools, select the JavaScript Memory check box, and then choose Start.

  5. Lorsque vous démarrez l'analyseur de mémoire, une fenêtre Contrôle de compte d'utilisateur peut vous demander l'autorisation d'exécuter Visual Studio ETW Collector.exe.When you start the memory analyzer, a User Account Control window might request your permission to run Visual Studio ETW Collector.exe. Cliquez sur Oui.Choose Yes.

    Interagissez avec l'application pour tester les scénarios appropriés d'utilisation de la mémoire et examinez le graphique de mémoire, comme décrit dans les sections suivantes.Interact with the app to test the relevant memory usage scenarios and view the memory graph, as discussed in the following sections.

  6. Basculez vers Visual Studio en appuyant sur Alt+Tab.Switch to Visual Studio by pressing Alt+Tab.

  7. Pour afficher les données que l'analyseur de mémoire rassemble, sélectionnez Prendre un instantané du tas.To view data that the memory analyzer is gathering, choose Take Heap Snapshot. Consultez View a snapshot summary plus loin dans cette rubrique.See View a snapshot summary later in this topic.

Vérifier l'utilisation de la mémoireCheck memory usage

Vous pouvez essayer d'identifier les fuites de mémoire grâce à différentes vues de l'analyseur de mémoire JavaScript.You can try to identify memory leaks by using different views in the JavaScript memory analyzer. Si vous pensez que votre application rencontre des fuites de mémoire, consultez Isolate a memory leak pour une suggestion de flux de travail.If you already suspect that your app is leaking memory, see Isolate a memory leak for a suggested workflow.

Utilisez les vues suivantes pour aider à identifier les fuites de mémoire dans une application :Use the following views to help identify memory leaks in an app:

  • Visualiser le résumé dynamique d'utilisation de la mémoire.View live memory usage summary. Utilisez le graphique d'utilisation de la mémoire pour rechercher des augmentations soudaines de l'utilisation de la mémoire ou une utilisation de la mémoire en constante augmentation résultant d'actions particulières.Use the memory usage graph to look for sudden increases in memory usage or continually increasing memory usage that results from particular actions. Utilisez la vue du résumé dynamique d'utilisation de la mémoire pour prendre des instantanés du tas.Use the live memory usage summary view to take snapshots of the heap. Les instantanés apparaissent sous forme de collection sous le graphique d'utilisation de la mémoire.The snapshots appear as a collection under the memory usage graph.

    Conseil

    Vous verrez un pic d'activité dans l'utilisation de la mémoire en prenant un instantané.You will see a spike in memory usage when you take a snapshot. Utilisez les résumés des instantanés pour obtenir une indication plus exacte de l'évolution.Use the snapshot summaries for a more accurate indication of growth.

  • View a snapshot summary.View a snapshot summary. Vous pouvez consulter les informations résumées relatives aux instantanés pendant ou après une session de profilage de mémoire.You can view snapshot summary info during or after a memory profiling session. Utilisez les résumés des instantanés pour les lier aux détails d'un instantané et aux vues comparées des instantanés.Use the snapshot summaries to link to snapshot details and snapshot diff views.

    Conseil

    En général, les vues comparées des instantanés fournissent les informations les plus utiles sur les fuites de mémoire.Typically, the snapshot diff views will provide the most useful information about memory leaks.

  • Visualiser les détails de l'instantané.View snapshot details. Affiche des données détaillées relatives à l'utilisation de la mémoire pour un instantané unique.Shows detailed memory usage data for a single snapshot.

  • Visualiser une comparaison d'instantanés. Affiche les valeurs comparées pour différents instantanés.View a snapshot diff. Shows differential values between snapshots. Ces vues affichent les différences de taille d'objets et de nombre d'objets.These views show differences in object size and object counts.

Isolate a memory leakIsolate a memory leak

La procédure suivante présente un flux de travail qui peut vous aider à utiliser l'analyseur de mémoire JavaScript plus efficacement.These steps provide a workflow that might help you use the JavaScript memory analyzer more effectively. Ces étapes peuvent s'avérer utiles si vous pensez que votre application rencontre une fuite de mémoire.These steps can be useful if you suspect that your app has a memory leak. Pour obtenir un didacticiel qui vous guide dans le processus d’identification d’une fuite de mémoire dans une application active, consultez Procédure pas à pas : rechercher une fuite de mémoire (JavaScript).For a tutorial that leads you through the process of identifying a memory leak in a working app, see Walkthrough: Find a memory leak (JavaScript).

  1. Ouvrez votre application dans Visual Studio.Open your app in Visual Studio.

  2. Exécutez l'analyseur de mémoire JavaScript.Run the JavaScript Memory Analyzer. Pour plus d'informations, consultez Exécuter l'analyseur de mémoire JavaScript.For more info, see Run the JavaScript memory analyzer.

  3. Exécutez votre application via le scénario que vous souhaitez tester.Run your app through the scenario that you want to test. Par exemple, le scénario peut impliquer une mutation DOM importante, durant le chargement d'une page spécifique ou au démarrage de l'application.For example, the scenario might involve a large DOM mutation, when a particular page loads, or when the app starts.

  4. Répétez le scénario 1 à 4 fois de plus.Repeat the scenario 1-4 additional times.

    Conseil

    En répétant le scénario de test plusieurs fois, vous contribuez à garantir le filtrage du travail d'initialisation dans les résultats.By repeating the test scenario several times, you can help make sure that initialization work can be filtered out of the results.

  5. Basculez vers Visual Studio (appuyez sur Alt+Tab).Switch to Visual Studio (press Alt+Tab).

  6. Prenez un instantané du tas de base en sélectionnant Prendre un instantané du tas.Take a baseline heap snapshot by choosing Take Heap Snapshot.

    L'illustration suivante montre un exemple d'instantané de ligne de base :The following illustration shows an example of a baseline snapshot.

    Instantané de ligne baseBaseline snapshot

    Conseil

    Pour exercer un contrôle plus précis de la synchronisation des instantanés, utilisez la commande Associate source code with memory usage data dans votre code.For more precise control over the timing of snapshots, you can use the Associate source code with memory usage data command in your code.

  7. Revenez à votre application et répétez le scénario que vous testez (une seule fois).Switch to your app and repeat the scenario that you are testing (repeat once only).

  8. Basculez vers Visual Studio et prenez un deuxième instantané.Switch to Visual Studio and take a second snapshot.

  9. Revenez à votre application et répétez le scénario que vous testez (une seule fois).Switch to your app and repeat the scenario that you are testing (repeat once only).

  10. Basculez vers Visual Studio et prenez un troisième instantané.Switch to Visual Studio and take a third snapshot.

    L'illustration suivante montre l'exemple d'un deuxième et d'un troisième instantané.The following illustration shows an example of a second and third snapshot.

    Deuxième et troisième instantanésSecond and third snapshot

    En prenant un instantané de référence, un deuxième instantané, puis un troisième dans ce flux de travail, vous pouvez filtrer plus facilement les changements qui ne sont pas associés à des fuites de mémoire.By taking a baseline, second, and third snapshot in this workflow, you can filter out changes that aren't associated with memory leaks more easily. Par exemple, certains changements peuvent être prévus, comme la mise à jour des en-têtes et des pieds de page sur une page, ce qui génère des changements dans l'utilisation de la mémoire sans que cela soit lié à des fuites de mémoire.For example, there might be expected changes such as updating headers and footers on a page, which will generate some changes in memory usage but might be unrelated to memory leaks.

  11. À partir du troisième instantané, choisissez un lien vers l'une des vues comparées :From the third snapshot, choose a link to one of the differential views:

    • Taille différentielle de tas (lien de gauche sous la taille du tas).Differential heap size (left link beneath the heap size). Le texte du lien indique la différence entre la taille du tas de l'instantané actuel et la taille du tas de l'instantané précédent.The link text shows the difference between the heap size of the current snapshot and the heap size of the previous snapshot.

    • Nombre différentiel d'objets (lien de droite sous le nombre d'objets).Differential object count (right link beneath the object count). Le texte du lien indique deux valeurs (par exemple +1858 / -1765) : la première valeur est le nombre de nouveaux objets ajoutés depuis l'instantané précédent. La deuxième valeur est le nombre d'objets supprimés depuis l'instantané précédent.The link text shows two values (for example, +1858 / -1765): The first value is the number of new objects added since the previous snapshot, and the second value is the number of objects removed since the previous snapshot.

      Ces liens ouvrent une vue comparée des détails d'instantané pour les types du tas, par ordre de taille retenue ou de nombre d'objets, selon le lien que vous avez ouvert.These links open a differential snapshot details view of types on the heap, sorted either by retained size or object count, depending on which link you opened.

  12. Choisissez l'une des options suivantes relatives au filtre Portée pour faciliter l'identification des problèmes d'utilisation de la mémoire :Choose one of the following Scope filter options to help identify memory usage issues:

    • Objets créés à partir de l'instantané #2.Objects left over from Snapshot #2.

    • Objets ajoutés entre les instantanés n° 2 et n° 3Objects added between Snapshot #2 and #3

    Conseil

    Utilisez la vue filtrée des objets restants du précédent instantané pour analyser les fuites de mémoire.Use the filtered view of objects left over from the previous snapshot to investigate memory leaks. Par exemple, si le nombre différentiel d'objets est 205 / -195, cette vue montre les 10 objets restants. Ces derniers peuvent correspondre à des fuites de mémoire.For example, if the differential object count is +205 / -195, this view will show the 10 objects left over, and these are likely candidates for memory leaks.

    L'illustration suivante montre une vue comparée des objets restants de l'instantané n° 2.The following illustration shows a differential view of objects left over from Snapshot #2.

    Vue de la comparaison des instantanés affichant les typesSnapshot diff view showing types

    Dans l'illustration précédente, nous voyons qu'il reste deux objets de l'instantané précédent.In the preceding illustration, we see that two objects are left over from the previous snapshot. Cherchez à savoir si ce comportement est attendu pour votre application.Investigate whether this is expected behavior for your particular app. Si ce n'est pas le cas, il peut s'agir d'une fuite de mémoire.If not, it might indicate a memory leak.

  13. Pour voir à quel endroit les objets des vues comparées sont enracinés à l'objet global, ce qui les empêche de faire l'objet d'un garbage collection, ouvrez le menu contextuel d'un objet, puis choisissez Afficher en vue racine.To see where objects in the diff views are rooted to the global object, which prevents them from being garbage-collected, open the shortcut menu for an object, and then choose Show in roots view. Un grand nombre d'objets peuvent être conservés en mémoire dans la mesure où ils sont référencés par un objet unique (ou quelques objets) enracinés à l'objet global.A large number of objects might be retained in memory because they are referenced by a single object (or a few objects) that are rooted to the global object.

  14. S'il existe trop d'objets dans la vue des objets restants, essayez d'isoler davantage la période pendant laquelle la fuite de mémoire se produit, puis prenez à nouveau trois instantanés.If there are too many objects in the view of objects left over, try to further isolate the period in which the memory leak is occurring, and then retake the three snapshots. Pour isoler davantage la fuite de mémoire, utilisez Associate source code with memory usage data, un Associate source code with memory usage data, et les autres données d'utilisation de la mémoire disponibles dans l'analyseur de mémoire.To further isolate the memory leak, use Associate source code with memory usage data, Associate source code with memory usage data, and other memory usage data available in the memory analyzer.

Visualiser le résumé dynamique d'utilisation de la mémoireView live memory usage summary

La vue Résumé dynamique d'utilisation de la mémoire fournit un graphique d'utilisation de la mémoire pour l'application en cours d'exécution et la collection de toutes les vignettes de résumé des instantanés.The live memory usage summary view provides a memory usage graph for the running app and a collection of all the snapshot summary tiles. Dans cette vue, vous pouvez effectuer des tâches de base, comme effectuer des instantanés, analyser des informations de résumé et accéder à d'autres vues.In this view, you can perform basic tasks like taking snapshots, analyzing summary info, and navigating to other views. Quand vous arrêtez de collecter des données, le graphique de la mémoire disparaît et vous voyez uniquement la vue View a snapshot summary .When you stop collecting data, the memory graph goes away and you see only the View a snapshot summary view.

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.The memory graph shows you a live view of the app's process memory, which includes private bytes, native memory, and the JavaScript heap. Le graphique de mémoire est une vue déroulante de la mémoire de processus.The memory graph is a scrollable view of the process memory. Voici à quoi elle ressemble :Here's what it looks like:

Graphique de mémoire Analyseur de mémoire JavaScriptJavaScript Memory Analyzer memory graph

Si vous avez ajouté des marques utilisateur au code de l'application (consultez Associate source code with memory usage data), un triangle inversé apparaît dans le graphique d'utilisation de la mémoire pour indiquer quand cette section de code est atteinte.If you've added user marks to your app code (see Associate source code with memory usage data), an inverted triangle appears in the memory usage graph to indicate when that section of code is reached.

Une partie de la mémoire présentée dans le graphique de la mémoire est allouée par le runtime JavaScript.Some of the memory shown in the memory graph is allocated by the JavaScript runtime. Vous ne pouvez pas contrôler l'utilisation de cette mémoire dans votre application.You can't control this memory usage in your app. L'utilisation de la mémoire représentée dans le graphique augmente lorsque vous effectuez votre premier instantané, puis augmente de façon minimale à chaque instantané suivant.The memory usage shown in the graph increases when you take your first snapshot, and then increases minimally for each additional snapshot.

View a snapshot summaryView a snapshot summary

Pour effectuer un instantané de l'état actuel de l'utilisation de la mémoire de votre application, sélectionnez Prendre un instantané du tas dans le graphique de la mémoire.To take a snapshot of the current state of your app's memory usage, choose Take Heap Snapshot from the memory graph. Une vignette de résumé de l'instantané, qui apparaît à la fois dans le résumé dynamique d'utilisation de la mémoire (pendant l'exécution de l'application) et dans le résumé de l'instantané (une fois l'application arrêtée), fournit des informations sur le tas JavaScript et des liens vers des informations plus détaillées.A snapshot summary tile, which appears in both the live memory usage summary (while the app is running) and the snapshot summary (when the app is stopped), provides info about the JavaScript heap and links to more detailed info. Si vous effectuez deux instantanés ou plus, un instantané fournit des informations supplémentaires par comparaison de ses données avec celles de l'instantané précédent.If you take two or more snapshots, a snapshot provides additional info comparing its data to that of the previous snapshot.

Note

L'analyseur de mémoire JavaScript force un garbage collection avant chaque instantané.The JavaScript memory analyzer forces a garbage collection before each snapshot. Cela permet de garantir une meilleure cohérence des résultats entre les différentes exécutions.This helps ensure more consistent results among runs.

Voici un exemple de résumé de l'instantané lorsque vous effectuez plusieurs instantanés.Here's an example of a snapshot summary when you take multiple snapshots.

Résumé de l’instantanéSnapshot summary

Le résumé de l'instantané inclut :The snapshot summary includes:

  • Titre et horodatage de l'instantané.Snapshot title and time stamp.

  • Nombre de problèmes potentiels (marqués par une icône bleue d'informations).Potential issues count (marked by a blue info icon). Ce nombre, le cas échéant, identifie les problèmes potentiels de mémoire, tels que des nœuds qui ne sont pas joints au DOM.This number, if present, identifies potential memory issues such as nodes that aren't attached to the DOM. Ce nombre est lié à la vue Types de l'instantané, qui est triée par type de problème pour mettre en évidence les problèmes potentiels.The count links to the Types view of the snapshot, which is sorted by issue type to highlight the potential issues. Une info-bulle affiche la description du problème.A tooltip shows the description of the issue.

  • Taille du tas.Heap size. Ce nombre comprend les éléments DOM et les objets que le moteur d'exécution JavaScript ajoute au tas JavaScript.This number includes DOM elements and objects that the JavaScript runtime engine adds to the JavaScript heap. La taille du tas est liée à la vue Types de l'instantané.The heap size links to the Types view of the snapshot.

  • Taille différentielle de tas.Differential heap size. Cette valeur indique la différence entre la taille du tas de l'instantané actuel et celle de l'instantané précédent.This value shows the difference between the heap size of the current snapshot and the heap size of the previous snapshot. Cette valeur est suivie d'une flèche rouge vers le haut en cas d'augmentation de la mémoire ou d'une flèche verte vers le bas en cas de diminution de la mémoire.The value is followed by a red up arrow if there is a memory increase or a green down arrow if there is a memory decrease. Si la taille du tas n'a pas changé entre les instantanés, le texte Aucune modification s'affiche à la place d'un nombre.If the heap size hasn't changed between snapshots, you'll see the text No change instead of a number. Pour le premier instantané, le texte Ligne de bases'affiche.For the first snapshot, you'll see the text Baseline. La taille différentielle de tas est liée à la vue Types de la comparaison des instantanés.The differential heap size links to the Types view of the snapshot diff.

  • Nombre d'objets.Object count. Ce nombre indique uniquement les objets créés dans votre application et exclut les objets intégrés créés par le runtime JavaScript.This count shows only objects created in your app and filters out built-in objects created by the JavaScript runtime. Le nombre d'objets est lié à la vue Types des détails d'un instantané.The object count links to the Types view of the snapshot details.

  • Nombre différentiel d'objets.Differential object count. Il indique deux valeurs : la première valeur est le nombre de nouveaux objets ajoutés depuis l'instantané précédent. La deuxième valeur est le nombre d'objets supprimés depuis l'instantané précédent.This shows two values: The first value is the number of new objects added since the previous snapshot; and the second value is the number of objects removed since the previous snapshot. Par exemple, l'illustration montre que 1 859 objets ont été ajoutés et 1 733 objets ont été supprimés depuis l'instantané n°1.For example, the illustration shows that 1,859 objects were added and 1,733 objects were removed since Snapshot #1. Cette information est suivie d'une flèche rouge vers le haut si le nombre total d'objets a augmenté ou d'une flèche verte vers le bas s'il a diminué.This information is followed by a red up arrow if the total object count has increased or a green down arrow if it has decreased. Si le nombre d'objets n'a pas changé, le texte Aucune modification s'affiche à la place d'un nombre.If the object count hasn't changed, you'll see the text No change instead of a number. Pour le premier instantané, le texte Ligne de bases'affiche.For the first snapshot, you'll see the text Baseline. Le nombre différentiel d'objets est lié à la vue Types de la comparaison d'instantanés.The differential object count links to the Types view of the snapshot diff.

  • Capture d'écran lors de la prise de l'instantané.Screenshot of the screen at the time the snapshot is taken.

Visualiser les détails de l'instantanéView snapshot details

Vous pouvez visualiser des informations détaillées sur l'utilisation de la mémoire pour chaque instantané dans les vues de détails d'un instantané.You can view detailed info about memory usage for each snapshot in the snapshot details views.

Dans la vue Résumé de l'instantané, sélectionnez un lien pour afficher les détails de l'instantané.From the snapshot summary view, choose a link to see snapshot details. Par exemple, le lien de la taille du tas ouvre les détails de l'instantané avec la vue Types ouverte par défaut.For example, the heap size link opens snapshot details with the Types view open by default.

Cette illustration montre la vue Types dans les détails de l'instantané, avec les données d'utilisation de la mémoire triées par taille de retenue.This illustration shows the Types view in a snapshot detail, with the memory usage data sorted by retained size.

Vue des détails de l’instantané affichant des problèmes potentielsSnapshot details view showing potential issues

Dans la vue des détails d'un instantané, vous pouvez passer en revue les données d'utilisation de la mémoire par type, racine ou dominateur, en sélectionnant une option dans la barre d'outils :In the snapshot details view, you can review memory usage data by type, root, or dominator by choosing an option from the toolbar:

  • Types.Types. Indique le nombre d'instances et la taille totale des objets sur le tas, regroupés par type d'objet.Shows the instance count and total size of objects on the heap, grouped by object type. Par défaut, ceux-ci sont triés par le nombre d'instances.By default, these are sorted by instance count.

    Conseil

    En règle générale, les vues comparées des types sur le tas d'objets représentent les vues les plus utiles pour identifier une fuite de mémoire. Ces vues fournissent un filtre Portée qui permet d'identifier les objets restants.Typically, diff views of the types on the object heap are the most useful views for identifying a memory leak; these views provide a Scope filter to help identify left over objects.

  • Racines.Roots. Montre une vue hiérarchique des objets, des objets racine jusqu'aux références enfants.Shows a hierarchical view of objects from root objects through child references. Par défaut, les nœuds enfants sont triés sur la colonne de la taille de retenue, en ordre décroissant.By default, the child nodes are sorted by the retained size column, with the largest at the top.

  • Dominators.Dominators. Affiche une liste d'objets sur le tas qui ont des références exclusives à d'autres objets.Shows a list of objects on the heap that have exclusive references to other objects. Les dominators sont triés par taille de retenue.Dominators are sorted by retained size.

    Conseil

    Lorsque vous supprimez un dominator de la mémoire, vous libérez toute la mémoire que l'objet retient.When you remove a dominator from memory, you reclaim all memory that the object retains. Pour quelques applications, la vue Dominators peut aider à clarifier les tailles de mémoire retenues, car vous pouvez analyser la chaîne de référence d'objets complète.For a few apps, the Dominators view might help clarify retained memory sizes, because you can investigate the complete object reference chain.

    Les trois vues montrent des types de valeur semblables, notamment :All three views show similar value types, including:

  • Identificateur(s).Identifier(s). Nom qui identifie le mieux l'objet.Name that best identifies the object. Par exemple, pour des éléments HTML, les détails de l'instantané montrent la valeur de l'attribut ID, le cas échéant.For example, for HTML elements the snapshot details show the ID attribute value, if one is used.

  • Type.Type. Type de l'objet (par exemple, élément de lien HTML ou élément div).Object type (for example, HTML link element or div element).

  • Taille.Size. Taille de l'objet, à l'exclusion de la taille des objets référencés.Object size, not including the size of any referenced objects.

  • Taille de retenue.Retained size. Somme de la taille de l'objet et de la taille de tous les objets enfants n'ayant pas d'autres parents.Object size plus the size of all child objects that have no other parents. Pour des raisons pratiques, il s'agit de 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.For practical purposes, this is the amount of memory retained by the object, so if you delete the object you reclaim the specified amount of memory.

  • Nombre.Count. Nombre d'instances de l'objet.Number of object instances. Cette valeur s'affiche uniquement dans la vue Types.This value appears only in the Types view.

Visualiser une comparaison d'instantanésView a snapshot diff

Dans l'analyseur de mémoire JavaScript, vous pouvez comparer un instantané à l'instantané précédent dans les vues comparées des instantanés.In the JavaScript memory analyzer, you can compare a snapshot against the previous snapshot in the snapshot diff views.

Dans la vue du résumé des instantanés, vous pouvez afficher les informations de comparaison des instantanés en sélectionnant la taille de tas comparée ou les liens du nombre d'objets comparé après deux ou plusieurs instantanés.In the snapshot summary view, you can view the differential snapshot details by choosing the differential heap size or differential object count links after two or more snapshots have been taken.

Vous pouvez afficher des informations différentielles sur les types, les racines et les dominateurs.You can view differential info about types, roots, and dominators. La comparaison des instantanés donne des informations, par exemple les objets ajoutés au tas entre les deux instantanés.The snapshot diff shows information such as objects that were added to the heap between the two snapshots.

Cette illustration montre la vue Types dans une comparaison d'instantanés.This illustration shows the Types view in a snapshot diff.

Vue de la comparaison des instantanés affichant les typesSnapshot diff view showing types

Dans la fenêtre de comparaison des instantanés, les vues Dominators, Types et Roots sont les mêmes que dans la fenêtre Visualiser les détails de l'instantané .In the snapshot diff window, the Dominators, Types, and Roots views are the same as in the View snapshot details window. La comparaison d'instantanés affiche les mêmes informations que les détails de l'instantané, avec en outre les valeurs supplémentaires suivantes :The snapshot diff shows the same info as the snapshot details, with these additional values:

  • Diff. taille. Différence entre la taille de l'objet dans l'instantané actuel et sa taille dans l'instantané précédent, à l'exclusion de la taille des objets référencés.Size diff. Difference between the size of the object in the current snapshot and its size in the previous snapshot, not including the size of any referenced objects.

  • 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é précédent.Retained size diff. Difference between the retained size of the object in the current snapshot and its retained size in the previous snapshot. La taille de retenue inclut la taille de l'objet et la taille de tous ses objets enfants n'ayant pas d'autres parents.The retained size includes the object size plus the size of all its child objects that have no other parents. 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.For practical purposes, the retained size is the amount of memory retained by the object, so if you delete the object you reclaim the specified amount of memory.

    Pour filtrer les informations différentielles entre les instantanés, choisissez l'un des filtres Portée en haut des vues différentielles.To filter differential info between snapshots, choose one of the Scope filters at the top of the differential views.

  • Objets créés à partir de l’instantané n°<numéro>.Objects left over from Snapshot #<number>. Ce filtre montre les différences entre les objets ajoutés au tas et retirés du tas par rapport à l'instantané de base et l'instantané précédent.This filter shows the diff between the objects added to the heap and removed from the heap compared to the baseline snapshot and the previous snapshot. Par exemple, si le résumé des instantanés montre +205 / -195 dans le nombre d'objets, ce filtre indique les dix objets qui ont été ajoutés, mais pas supprimés.For example, if the snapshot summary shows +205 / -195 in the object count, this filter will show you the ten objects that were added but not removed.

    Conseil

    Pour afficher les informations les plus utiles dans ce filtre, suivez les étapes décrites dans Isolate a memory leak.To show the most useful info in this filter, follow the steps described in Isolate a memory leak.

  • Objets ajoutés entre les instantanés n° <numéro> et n° <numéro>.Objects added between Snapshot #<number> and #<number>. Ce filtre montre tous les objets ajoutés au tas à partir de l'instantané précédent.This filter shows all objects added to the heap from the previous snapshot.

  • Tous les objets de l’instantané n° <numéro>.All objects in Snapshot #<number>. Ce paramètre de filtre ne filtre aucun objet du tas.This filter setting doesn't filter out any objects on the heap.

    Pour afficher les références d’objet qui ne correspondent pas au filtre Portée, sélectionnez Afficher les références incohérentes dans la liste des paramètres Liste déroulante des paramètres dans l’analyseur de mémoire située dans l’angle supérieur droit du volet.To show object references that don't match the current Scope filter, select Show non-matching references in the settings list Settings drop-down list in memory analyzer in the upper-right corner of the pane. Si vous activez ce paramètre, les références incohérentes sont affichées en texte gris.If you enable this setting, non-matching references are displayed with gray text.

Conseil

Nous recommandons de suivre les étapes décrites dans Isolate a memory leak puis d'utiliser le filtre Portée des objets restants pour identifier plus facilement les objets qui présentent une fuite de mémoire.We recommend that you follow the steps in Isolate a memory leak and then use the objects left over Scope filter to help identify objects that are leaking memory.

Afficher les objets par dominateurView objects by dominator

Dans les vues Types et Dominators, vous pouvez choisir d'afficher les objets dans leurs dominateurs (il s'agit de la vue par défaut sous l'onglet Dominators).In the Types and Dominators views, you can choose whether to view objects folded into their dominators (this is the default view in the Dominators tab). Quand cette vue est sélectionnée, seuls les dominateurs sont affichés dans la vue de niveau supérieur des objets.When this view is selected, only dominators are shown in the top-level view of objects. (Les objets qui sont des descendants d'objets non globaux sont masqués de la vue de niveau supérieur.) Pour certaines applications, cela peut montrer plus précisément les objets qui sont la cause d'une fuite de mémoire en réduisant le volume de données.(Objects that are descendants of non-Global objects are hidden from the top-level view.) For some apps, this can clarify which objects are causing a memory leak by reducing noise in the data.

Pour basculer la vue des objets par dominateur, choisisse le bouton Plier les objets par dominateur .To toggle the view of objects by dominator, choose the Fold in objects by dominator button. Repli d’objets dans leurs dominateursFolding objects into their dominators

Pour plus d'informations sur les dominateurs, consultez Visualiser les détails de l'instantané.For more info on dominators, see View snapshot details.

Filtrer les données par identificateurFilter data by identifier

Dans les vues Dominators et Types, vous pouvez exclure des données en recherchant des identificateurs spécifiques.In the Dominators and Types views, you can filter out data by searching for particular identifiers. Pour rechercher un identificateur, tapez simplement son nom dans la zone de texte Filtre de l'identificateur dans la partie supérieure droite.To search for an identifier, just type its name in the Identifier filter text box in the upper right. Lorsque vous commencez la saisie, les identificateurs qui ne contiennent pas les caractères saisis sont exclus.When you begin typing, identifiers that don't contain the typed characters are filtered out.

Chaque vue possède son propre filtre, de sorte que le filtre n'est pas conservé lorsque vous basculez vers une autre vue.Each view has its own filter, so the filter isn't preserved when you switch to another view.

Rechercher un objet dans l'arborescence des objetsFind an object in the object tree

Dans les vues Types et Dominators, vous pouvez voir la relation entre un objet particulier et l'objet Global .In the Types and Dominators views, you can see the relationship of a particular object to the Global object. Les objets enracinés à l'objet Global ne font pas l'objet d'un garbage collection.Objects rooted to the Global object will not be garbage-collected. Vous pouvez rechercher facilement un objet connu dans la vue Racines, sans avoir besoin d'effectuer une recherche dans l'arborescence d'objets Global .You can easily find a known object in the Roots view without searching through the Global object tree. Pour ce faire, ouvrez le menu contextuel pour un objet dans la vue Dominators ou Types, puis sélectionnez Afficher en vue racine.To do this, open the shortcut menu for an object in the Dominators or Type view, and then choose Show in roots view.

Visualiser les références aux objets partagésView shared object references

Dans les vues Types et Dominators, le volet inférieur contient une liste de références d'objet qui indique les références partagées.In the Types and Dominators views, the lower pane contains an Object references list that displays shared references. Lorsque vous sélectionnez un objet dans le volet supérieur, la liste des références d'objet répertorie tous les objets qui pointent sur cet objet.When you choose an object in the upper pane, the Object references list displays all objects that point to that object.

Note

Les références circulaires sont indiquées par un astérisque (*) et une info-bulle, et ne peuvent pas être développées.Circular references are shown with an asterisk (*) and informational tooltip, and cannot be expanded. Dans le cas contraire, cela vous empêcherez de parcourir l'arborescence et d'identifier les objets qui retiennent de la mémoire.Otherwise, they would prevent you from walking up the reference tree and identifying objects that are retaining memory.

Si vous souhaitez obtenir une aide supplémentaire pour identifier les objets équivalents, choisissez Afficher les ID d’objet dans la liste des paramètres Liste déroulante des paramètres dans l’analyseur de mémoire située dans l’angle supérieur droit du volet supérieur.If you want additional help identifying equivalent objects, choose Display object IDs in the settings list Settings drop-down list in memory analyzer in the upper-right corner of the upper pane. Cette option affiche les ID d'objet en regard des noms d'objet dans la liste Identificateur(s) (les ID apparaissent dans toutes les vues, pas seulement dans la liste des références d'objet).This option displays object IDs next to object names in the Identifier(s) list (the IDs appear in all views, not just the Object references list). Les objets qui possèdent le même ID sont des références partagées.Objects that have the same ID are shared references.

L'illustration suivante montre la liste des références d'objet pour un élément sélectionné avec des ID affichés.The following illustration shows the Object references list for a selected item with IDs displayed.

Références d’objets avec affichage des IDObject references with displayed IDs

Afficher les objets intégrésShow built-in objects

Par défaut, les vues Dominators et Types affichent uniquement les objets que vous créez dans votre application.By default, the Dominators and Types views show only the objects that you create in your app. Cela vous aide à exclure les informations superflues et à isoler les problèmes liés à l'application.This helps you filter out unneeded info and isolate app-related issues. Cependant, il peut parfois être utile d'afficher tous les objets générés par le runtime JavaScript pour votre application.However, at times it might be useful to view all objects that the JavaScript runtime generates for your app.

Pour afficher ces objets, choisissez Afficher les éléments intégrés dans la liste des paramètres Liste déroulante des paramètres dans l’analyseur de mémoire située dans l’angle supérieur droit du volet.To display these objects, choose Show built-ins in the settings list Settings drop-down list in memory analyzer in the upper-right corner of the pane.

Enregistrer les fichiers de diagnostic de sessionSave diagnostic session files

Les résumés d'instantanés de diagnostic et les vues de détails qui leur sont associées sont enregistrés en tant que fichiers .diagsession.Diagnostic snapshot summaries and their associated details views are saved as .diagsession files. L'Explorateur de solutions affiche les sessions de diagnostic précédentes dans le dossier Sessions de diagnostic.Solution Explorer displays previous diagnostics sessions in the Diagnostic Sessions folder. Dans l' Explorateur de solutions, vous pouvez ouvrir les sessions précédentes, ou supprimer ou renommer des fichiers.In Solution Explorer, you can open previous sessions or remove or rename files.

Associate source code with memory usage dataAssociate source code with memory usage data

Pour mieux isoler la section de code qui a un problème de mémoire, utilisez les méthodes suivantes :To help isolate the section of code that has a memory issue, use the following methods:

  • Recherchez les noms de classe et les ID des éléments DOM dans les vues de détails et les vues comparées.Look for class names and IDs for DOM elements in the details and differential views.

  • Recherchez les valeurs de chaîne dans les vues de détails et les vues comparées qui peuvent être associées à votre code source.Look for string values in the details and differential views that might be associated with your source code.

  • Utilisez la commande Rechercher un objet dans l'arborescence des objets pour remonter dans l'arborescence d'objets.Use the Find an object in the object tree command to walk up the object tree. Cela peut vous aider à identifier le code source associé.This might help to identify the associated source code.

  • Ajoutez les commandes de l'analyseur de mémoire à votre code source.Add memory analyzer commands to your source code.

    Vous pouvez utiliser les commandes suivantes dans votre code source :You can use the following commands in your source code:

  • console.takeHeapSnapshot prend un instantané du tas qui s'affiche dans l'analyseur de mémoire JavaScript.console.takeHeapSnapshot takes a heap snapshot that appears in the JavaScript memory analyzer. Cette commande est l'une des JavaScript Console commands.This command is one of the JavaScript Console commands.

  • performance.mark définit une marque utilisateur (triangle inversé) qui apparaît dans la chronologie du graphique de mémoire, dans la vue du résumé, pendant que l'application est en cours d'exécution.performance.mark sets a user mark (the inverted triangle) that appears in the timeline of the memory graph in the summary view while the app is running. Cette commande accepte un argument de chaîne qui décrit l'événement et apparaît sous la forme d'une info-bulle dans le graphique de mémoire.This command takes one string argument that describes the event and appears as a tooltip in the memory graph. Cette description ne doit pas dépasser 100 caractères.This description must not exceed 100 characters.

Conseil

Utilisez console.takeHeapSnapshot pour accélérer l'analyse lorsque vous répétez les scénarios d'utilisation de la mémoire.Use console.takeHeapSnapshot to speed up the analysis when repeating memory usage scenarios.

Ces commandes lèvent une exception si vous les ajoutez à votre application et exécutez l'application en dehors de l'analyseur de mémoire JavaScript.These commands throw an exception if you add them to your app and run the app outside the JavaScript memory analyzer. Toutefois, vous pouvez tester si ces commandes existent avant des utiliser.However, you can test whether the commands exist before using them. (Ces commandes n'existent pas au début de la phase de démarrage de la session.) Pour vérifier si vous pouvez appeler takeHeapSnapshot sans risque, utilisez le code suivant :(The commands do not exist early in the session startup phase.) To check whether you can safely call takeHeapSnapshot, use this code:

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

Pour vérifier si vous pouvez appeler performance.mark sans risque, utilisez le code suivant :To check whether you can safely call performance.mark, use this code:

if (performance && performance.mark) {  
    performance.mark("message_string");  
}  

Voici un graphique de mémoire avec plusieurs marques utilisateur et l'info-bulle pour la marque utilisateur actuellement sélectionnée, pour laquelle l'argument de chaîne performance.mark a la valeur « data generated » (données générées) :Here's a memory graph with several user marks and the tooltip for the currently selected user mark, for which the performance.mark string argument is set to "data generated":

Utilisation d’une marque de profilUsing a Profile Mark

Conseils pour identifier les problèmes de mémoireTips for identifying memory issues

  • Suivez le flux de travail dans Isoler une fuite de mémoire et utilisez le filtre Objets créés à partir de l’instantané n° <numéro> dans une vue de comparaison pour identifier les objets qui peuvent présenter des fuites de mémoire.Follow the workflow described in Isolate a memory leak and use the Objects left over from Snapshot #<number> filter in a diff view to identify likely candidates for memory leaks.

  • Utilisez Rechercher un objet dans l'arborescence des objets pour voir où un objet est référencé dans la hiérarchie de la mémoire.Use Find an object in the object tree to see where an object is referenced in the memory hierarchy. La vue Racines montre comment un objet est enraciné à l'objet global, ce qui l'empêche de faire l'objet d'un garbage collection.The Roots view shows how an object is rooted to the global object, which would prevent it from being garbage-collected.

  • Quand 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, en particulier pour faciliter l'identification d'un objet (ou de quelques objets) pouvant contenir des références à de nombreux autres objets qui apparaissent dans la vue.When the cause of a memory issue is difficult to identify, use the various views (such as Dominators and Types) to look for commonalities, especially to help identify one object (or a few objects) that might contain references to many of the other objects that appear in the view.

  • Recherchez les objets qui sont conservés par inadvertance dans la mémoire après que l'utilisateur a accédé à une nouvelle page. Il s'agit d'une cause fréquente de problèmes de mémoire.Look for objects that are retained in memory inadvertently after the user has navigated to a new page, which is a common cause of memory issues. Exemple :For example:

    • l'utilisation incorrecte de la fonction URL.CreateObjectUrl peut entraîner ce problème.The incorrect use of the URL.CreateObjectUrl function can cause this problem.

    • Certains objets peuvent fournir une méthode dispose et des recommandations d'utilisation.Some objects might provide a dispose method and recommendations for use. Par exemple, appelez dispose sur WinJS.Binding.List si vous appelez la méthode createFiltered de la liste, avant de quitter une page.For example, you should call dispose on a WinJS.Binding.List if you call the list's createFiltered method and then navigate away from a page.

    • Vous devrez peut-être supprimer un ou plusieurs détecteurs d'événements.You might need to remove one or more event listeners. Pour plus d'informations, consultez View DOM event listeners.For more info, see View DOM event listeners.

  • Examinez la dernière partie de cette vidéo dans la conférence Build 2013 sur l'analyseur de mémoire JavaScript.Watch the latter part of this video from the Build 2013 conference about the JavaScript memory analyzer.

  • Lisez Gestion de la mémoire dans les applications UWP.Read Managing memory in UWP apps.

  • Envisagez de modifier temporairement le code pour isoler les problèmes.Consider temporarily modifying code to isolate problems. Vous pouvez, par exemple, décider d'effectuer les opérations suivantes :For example, you might want to:

    • Utilisez les commandes pour l'analyseur de mémoire, console.takeSnapshot et performance.mark.Use the commands for the memory analyzer, console.takeSnapshot and performance.mark. (Consultez Associate source code with memory usage data.)(See Associate source code with memory usage data.)

      Vous pouvez utiliser ces commandes pour favoriser l’isolement des problèmes que vous ne pouvez pas isoler en effectuant manuellement un instantané du tas.You can use these commands to help isolate issues that you can't isolate by manually taking a heap snapshot.

    • Créez un objet de test et effectuez son suivi dans les vues de l'analyseur de mémoire JavaScript, telles que la vue Types.Create a test object and trace it in the JavaScript memory analyzer views, such as the Types view. Par exemple, vous pouvez attacher un objet très volumineux à un autre objet pour voir si un objet ou un élément particulier a fait l'objet d'un garbage collection.For example, you can attach a very large object to another object to see whether a particular object or element has been garbage-collected.