Partager via

Partager des performances améliorées et des traces de mémoire

  • Article

Les outils Performances et mémoire enregistrent 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 ou les performances d’exécution 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 des traces de performances et de mémoire est utile lorsque vous souhaitez partager ces fichiers avec d’autres personnes pour obtenir de l’aide sur les problèmes. Une trace exportée est un .jsonfichier , .heapsnapshot, .heapprofileou .heaptimeline qui peut être importé dans DevTools à tout moment.

Par défaut, les traces contiennent des informations minimales sur les données d’exécution de la page web suivie, mais les traces peuvent également être exportées en tant que traces améliorées, en tant que fonctionnalité expérimentale. Une trace améliorée est un .devtools fichier qui contient beaucoup plus de données d’exécution à partir de la page web tracée. Les traces améliorées facilitent la résolution des problèmes de performances et de mémoire, en recréant l’environnement dans lequel la trace a été enregistrée et en fournissant des fichiers sources d’origine.

L’utilisation de traces améliorées permet de résoudre de manière fiable les références de code source trouvées dans les traces importées en code d’exécution réel dans l’outil Sources . En outre, 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 Azure Artifacts, il est également possible de résoudre les références de code à leur code source d’origine.

Différences entre les traces normales et améliorées

Traces normales

Une trace normale contient uniquement certaines des informations présentes dans une page web. Une grande partie du code d’origine est perdue et seules les données de performances ou de mémoire enregistrées de la page web sont conservées dans la trace. Par exemple, lors de l’importation d’une .heapsnapshot trace mémoire enregistrée au cours d’une autre session DevTools ou sur un autre ordinateur, il n’existe aucun moyen de passer d’un objet de l’outil Mémoire à son constructeur dans l’outil Sources .

De même, dans l’outil Performance , lorsque vous importez une trace de performances enregistrée précédemment :

  • La trace doit avoir été enregistrée sur le même site et la même configuration pour pouvoir mapper le rapport de performances au code JavaScript qui s’exécutait dans le navigateur.
  • Si les noms de fichiers ou de fonctions ont changé depuis l’enregistrement, le mappage est sujet à des erreurs.

Suivis améliorés

Une trace améliorée conserve beaucoup plus d’informations sur la page web où l’enregistrement a eu lieu. Par exemple, une trace améliorée contient le contexte d’exécution et la liste des scripts analysés, et peut éventuellement contenir des messages de console, des sources de script et un instantané de l’arborescence DOM.

Lorsqu’une trace améliorée est importée dans DevTools, une nouvelle fenêtre DevTools s’affiche. Cette nouvelle fenêtre n’est pas connectée à la page web en cours d’exécution dans votre navigateur, et recrée à la place une partie de l’environnement dans lequel la trace a été enregistrée à l’origine.

Par exemple, si une instantané du DOM a été enregistrée dans la trace améliorée, l’outil Éléments affiche cette instantané. Si des messages de console ont été enregistrés, l’outil Console imprime ces messages. L’outil Sources affiche les scripts qui étaient présents pendant l’enregistrement.

Les traces améliorées ne peuvent être importées que dans Microsoft Edge, tandis que les traces normales sont compatibles avec d’autres navigateurs basés sur le moteur Chromium.

Définir le type de trace par défaut

Par défaut, les outils Performances et Mémoire exportent les données en tant que traces normales, mais vous pouvez définir le type de trace par défaut sur enhanced.

Pour modifier le type de trace :

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

  2. Dans DevTools, en haut à droite, cliquez sur Paramètres (bouton Paramètres). 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 performances et de mémoire améliorées :

    Panneau Paramètres dans DevTools, avec l’option Traces améliorées cochée

  4. Les traces améliorées peuvent également inclure des messages de console, des sources de script et des éléments DOM. Pour contrôler ce qu’il faut inclure dans les traces améliorées, utilisez les cases à cocher suivantes :

    • Inclure le message de console dans les traces améliorées.
    • Incluez des sources de script dans des traces améliorées.
    • Incluez des instantanés DOM dans des traces améliorées (expérimentales).

    Panneau Paramètres dans DevTools, montrant les autres options de trace améliorées

Exporter une trace à partir de l’outil Performance

Pour exporter un enregistrement de performances à partir de l’outil Performance :

  1. Ouvrez l’outil Performance .

  2. Cliquez sur Enregistrer et exécutez le scénario dont vous souhaitez examiner les performances en interagissant avec la page web, puis cliquez sur Arrêter.

  3. Lorsque le profil de performances s’affiche, cliquez sur Enregistrer le profil (bouton Enregistrer le profil) :

    Microsoft Edge avec DevTools, montrant l’outil Performance, avec le bouton Enregistrer le profil

  4. Choisissez un emplacement pour enregistrer le fichier de trace sur votre disque :

    Boîte de dialogue d’enregistrement Windows, montrant le fichier de suivi des performances enregistré dans un dossier traces

    La trace est un .json fichier si vous définissez le type de trace par défaut sur normal, et il s’agit d’un .devtools fichier si vous définissez le type de trace par défaut sur amélioré.

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. Choisissez le type d’enregistrement de mémoire qui vous intéresse, par exemple Instantané de tas. Les instructions suivantes sont similaires si vous choisissez un autre type d’enregistrement de mémoire. Pour en savoir plus sur les différents types d’enregistrement de mémoire, consultez Résoudre les problèmes de mémoire.

  3. Cliquez sur Prendre un instantané.

  4. Lorsque le instantané est enregistré, cliquez sur le bouton Enregistrer dans la barre latérale de l’outil Mémoire :

    Microsoft Edge avec DevTools, montrant l’outil Mémoire, avec le bouton Enregistrer

  5. Choisissez un emplacement pour enregistrer le fichier de trace sur votre disque :

    Boîte de dialogue d’enregistrement Windows, montrant le fichier de trace mémoire enregistré dans un dossier traces

    La trace est un .heapsnapshotfichier , .heapprofileou .heaptimeline si vous définissez le type de trace par défaut sur normal, et il s’agit d’un .devtools fichier si vous définissez le type de trace par défaut sur amélioré.

Choisir un type de trace lors de l’exportation

Les traces sont exportées comme des traces normales ou améliorées, en fonction de l’option Exporter les performances améliorées et les traces de mémoire . Pour modifier le type de trace par défaut, consultez Définir le type de trace par défaut. Vous pouvez également choisir le type de trace souhaité lors de l’exportation.

Pour choisir un autre type de trace lors de l’exportation :

  1. Cliquez avec le bouton droit (ou maintenez la touche Ctrl enfoncée et cliquez) sur le bouton Enregistrer le profil (bouton Enregistrer le profil) dans l’outil Performances ou sur le bouton Enregistrer de l’outil Mémoire .

  2. Cliquez sur .devtools (format amélioré pour Microsoft Edge) si vous souhaitez exporter une trace améliorée, ou cliquez sur .json (fonctionne avec Microsoft Edge et les navigateurs Chromium) si vous souhaitez une trace normale.

    Menu contextuel du bouton Enregistrer le profil dans l’outil Performances pour sélectionner le type de trace

Importer une trace dans l’outil Performance

Pour importer une trace dans l’outil Performance :

  1. Ouvrez l’outil Performance .

  2. Cliquez sur Charger le profil (bouton Charger le profil) :

    Microsoft Edge, montrant l’outil Performance dans DevTools, avec le bouton Charger le profil

  3. Recherchez le fichier de trace sur votre disque. Il s’agit d’un .devtools fichier (pour les traces améliorées) ou d’un .json fichier (pour les traces normales) :

    Boîte de dialogue Windows ouverte, montrant un fichier de suivi des performances

  4. Ouvrez le fichier.

    Si le fichier est une trace améliorée, une nouvelle fenêtre DevTools s’affiche, affichant le profil de performances et les informations d’exécution supplémentaires enregistrées dans les outils Sources, Console et Éléments .

    Si le fichier est une trace normale, le profil de performances s’affiche dans l’outil Performances , et les autres onglets DevTools continuent d’afficher des informations relatives à la page web actuelle.

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 :

    Microsoft Edge, montrant l’outil Mémoire dans DevTools, avec le bouton Charger

  3. Recherchez le fichier de trace sur votre disque. Il s’agit d’un .devtools fichier (pour les traces améliorées) ou d’un .heapsnapshotfichier , .heaptimelineou .heapprofile (pour les traces normales).

    Boîte de dialogue Windows ouverte, montrant un fichier de trace de mémoire

  4. Ouvrez le fichier.

    Si le fichier est une trace améliorée, 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 .

    Si le fichier est une trace normale, 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.

Partager des commentaires sur les traces améliorées

Les traces améliorées sont une fonctionnalité expérimentale qui, espérons-le, facilite la collaboration sur la résolution des problèmes de performances et de mémoire en voyant du code non déminifié.

L’équipe Microsoft Edge DevTools est heureuse de recevoir vos commentaires sur les suivis améliorés. Si vous avez essayé cette nouvelle fonctionnalité, n’hésitez pas à signaler des problèmes ou des idées à ce sujet sur notre dépôt GitHub.