Partager une trace de mémoire avec plus de données

L’outil Mémoire enregistre les données d’exécution relatives à votre page web. L’exploration des données enregistrées permet d’améliorer l’utilisation de la mémoire de votre page web.

En outre, les données enregistrées peuvent être exportées vers des fichiers sur disque. Les fichiers exportés sont appelés traces.

L’exportation de traces de mémoire est utile lorsque vous souhaitez partager ces fichiers avec d’autres personnes pour obtenir de l’aide sur les problèmes.

Formats de fichiers

Un fichier de trace peut être importé dans DevTools à tout moment. Par défaut, ces traces contiennent des informations minimales sur les données d’exécution de la page web suivie.

Une trace exportée peut être un fichier , .heapprofileou .heaptimeline de base.heapsnapshot.

Une trace de mémoire peut également être enregistrée en tant que .devtools fichier, qui contient beaucoup plus de données d’exécution à partir de la page web tracée. Avantages du format de .devtools fichier :

• Cela facilite la résolution des problèmes de mémoire, en recréant l’environnement dans lequel la trace a été enregistrée et en fournissant les fichiers sources d’origine.

• Cela permet de résoudre de manière fiable les références de code source trouvées dans les traces importées vers le code d’exécution réel dans l’outil Sources .

• Si des mappages sources étaient présents lors de l’enregistrement d’une trace, ou s’ils sont stockés sur le serveur de symboles d’artefacts Azure, il est également possible de résoudre les références de code à leur code source d’origine.

Compatibilité des navigateurs

• .heapsnapshotLes fichiers de trace , .heapprofileet .heaptimeline sont compatibles avec Microsoft Edge et d’autres navigateurs basés sur le moteur Chromium.

• .devtools les traces ne peuvent être importées que dans Microsoft Edge.

Définir le type de trace de mémoire par défaut

Par défaut, l’outil Mémoire exporte les données en tant que .heapsnapshotfichiers de trace , .heapprofileou .heaptimeline .

Pour remplacer le type de trace par défaut par .devtools:

1. Ouvrez DevTools en appuyant sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS).

2. Dans DevTools, en haut à droite, sélectionnez Personnaliser et contrôlerles paramètresDevTools> (). Paramètres s’ouvre, avec la page Préférences sélectionnée.

3. Dans la section Persistance de la page Préférences , cochez la case Exporter les traces de mémoire .devtools pour contrôler le type par défaut.

   

Définir les options d’exportation pour les traces de mémoire

Les traces mémoire qui sont .devtools des fichiers incluent toujours des mappages sources lorsqu’ils sont disponibles et peuvent éventuellement inclure des messages de console, des sources de script et des éléments DOM.

Pour contrôler si les messages de console, les sources de script ou les éléments DOM sont inclus dans les traces mémoire :

1. Ouvrez DevTools en appuyant sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS).

2. Dans DevTools, en haut à droite, sélectionnez Personnaliser et contrôlerles paramètresDevTools> (). Paramètres s’ouvre, avec la page Préférences sélectionnée.

3. Faites défiler jusqu’à la section Persistance :

   

4. Utilisez ces cases à cocher pour contrôler ce qu’il faut inclure :

   • Inclure des messages de console dans les traces de mémoire .devtools

   • Inclure des sources de script dans les traces de mémoire .devtools

   • Inclure des instantanés DOM dans les traces de mémoire .devtools (expérimental)

5. En haut à droite de DevTools, cliquez sur le bouton Fermer ().

Exporter une trace à partir de l’outil Mémoire

Pour exporter des informations de mémoire à partir de l’outil Mémoire :

1. Ouvrez l’outil Mémoire .

2. Sélectionnez le bouton d’option correspondant au type d’enregistrement de mémoire qui vous intéresse, par exemple le bouton d’option Instantané tas.

   Les instructions suivantes sont similaires si vous choisissez un autre type d’enregistrement de mémoire, selon Résoudre les problèmes de mémoire.

   Dans le cas d’un tas instantané :

3. Cliquez sur le bouton Prendre le tas instantané () en haut, ou sur le bouton Prendre instantané en bas.

   Le instantané est enregistré et affiché.

4. Dans la barre d’outils, sélectionnez le bouton Enregistrer le profil () :

   

   Ou, dans la barre latérale de l’outil Mémoire, pointez sur l’entrée de la nouvelle instantané, puis sélectionnez Enregistrer le profil.

   La boîte de dialogue Enregistrer sous s’ouvre :

   

5. Accédez à un dossier dans lequel enregistrer le fichier de trace sur votre disque.

6. Dans la zone de texte Nom de fichier, ajustez le nom du fichier si vous le souhaitez.

7. Dans la zone de texte Nom de fichier, conservez ou modifiez l’extension spécifiée après le nom de fichier.

   • .devtools inclut des messages de console, des sources de script et des éléments DOM.

   • .heapsnapshot, .heapprofileou .heaptimeline omet les messages de console, les sources de script et les éléments DOM.

   L’extension initialement affichée est contrôlée par un paramètre DevTools ; Consultez Définir le type de trace de mémoire par défaut, ci-dessus.

8. Cliquez sur le bouton Enregistrer .

   La boîte de dialogue Enregistrer sous se ferme et le fichier est enregistré sur le disque.

Importer une trace dans l’outil Mémoire

Pour importer une trace dans l’outil Mémoire :

1. Ouvrez l’outil Mémoire :

   

2. Cliquez sur le bouton Charger le profil () en haut. Vous pouvez également cliquer sur le bouton Charger le profil en bas.

   La boîte de dialogue Ouvrir s’affiche.

3. Dans la liste déroulante inférieure gauche (un filtre), sélectionnez les types de fichiers à afficher :

   • **Traces de performances (.devtools ; .json) - Utilisé avec l’outil Performance .
   • **Instantanés de tas (.devtools ; .heapsnapshot)
   • **Chronologies du tas (.devtools ; .heaptimeline)
   • **Exemples de profils de tas (.devtools ; .heapprofile)

4. Recherchez le fichier de trace sur votre disque, puis sélectionnez-le.

   Le fichier de trace est un .devtools fichier ou un .heapsnapshotfichier , .heaptimelineou .heapprofile .

   

5. Cliquez sur le bouton Ouvrir .

   S’il s’agit d’un .devtools fichier, une nouvelle fenêtre DevTools s’affiche, affichant les informations de mémoire et les informations d’exécution supplémentaires enregistrées dans les outils Sources, Console et Éléments .

   Sinon, les informations de mémoire s’affichent dans l’outil Mémoire , et les autres onglets DevTools continuent d’afficher des informations relatives à la page web actuelle.

Voir aussi

• Partager des traces de performances avec plus de données
• Résoudre les problèmes de mémoire
• serveur de symboles d’artefacts Azure