Partager via

Partager une trace des performances avec plus de données

Les données enregistrées par l’outil Performance peuvent être exportées vers des fichiers sur disque, qui peuvent également inclure des annotations, du contenu des ressources (contenu HTML, CSS et JavaScript) et des mappages sources. Les fichiers exportés sont appelés traces. Une trace exportée est un .json fichier qui peut être importé dans DevTools à tout moment.

Lorsque vous exportez une trace à partir de l’outil Performances, vous pouvez choisir d’inclure ou non des données supplémentaires :

  • Annotations.
  • Contenu de ressource (tel que le contenu HTML, CSS et JavaScript).
  • Mappages de sources de script.

Vous pouvez également contrôler si le fichier de trace est compressé.

L’outil Performance enregistre les données d’exécution relatives à votre page web. L’exploration des données enregistrées permet d’améliorer les performances d’exécution de votre page web.

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

Les traces peuvent être enregistrées pour inclure des annotations, du contenu de ressources (par exemple, des scripts) et des mappages de sources à partir de la page web. Ces informations supplémentaires facilitent l’analyse d’un fichier de trace importé, en recréant l’environnement dans lequel la trace a été enregistrée et en fournissant des fichiers sources d’origine.

Les fichiers de trace exportés sont compatibles avec d’autres navigateurs basés sur le moteur Chromium.

Lorsqu’une trace qui inclut des annotations, du contenu de ressource (tel que des scripts) ou des mappages de sources 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. Cette instance DevTools contient uniquement les outils Performances et Sources.

Exporter une trace à partir de l’outil Performance

Pour enregistrer les performances des aspects d’une page web, puis exporter un enregistrement de performances :

  1. Ouvrez une page web, par exemple À faire, dans une nouvelle fenêtre ou un nouvel onglet.

  2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

    DevTools s’ouvre.

  3. Dans DevTools, ouvrez l’outil Performances (icône De performances).

  4. Cliquez sur le bouton Enregistrer (icône Enregistrement).

  5. Interagissez avec la page web pour exécuter le scénario dont vous souhaitez examiner les performances.

    Par exemple, dans la page de démonstration, dans la zone de texte Ajouter une tâche , tapez task 1, puis appuyez sur Entrée.

  6. Cliquez sur le bouton Arrêter (icône Arrêter).

    Le profil de performances s’affiche.

  7. Cliquez sur le bouton Enregistrer la trace (icône Enregistrer la trace).

    La boîte de dialogue Enregistrer la trace des performances s’ouvre (dans l’outil Performances ) :

    Boîte de dialogue Enregistrer la trace des performances

  8. Activez ou désactivez les cases à cocher pour contrôler les informations à inclure dans le fichier de trace :

    • Case à cocher Inclure les annotations . Cette case à cocher s’affiche uniquement s’il existe des annotations.

    • Case à cocher Inclure le contenu de la ressource .

    • La case à cocher Inclure la source du script est mappée . (Vous devez d’abord cocher la case Inclure le contenu de la ressource .)

    Si vous le souhaitez, décochez la case Compresser avec gzip .

    Vous trouverez ci-dessous des détails sur ces cases à cocher.

  9. Cliquez sur le bouton Enregistrer .

    La petite boîte de dialogue de l’outil Performances se ferme et la boîte de dialogue Enregistrer sous s’ouvre .

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

    Par exemple, sur Windows, dans le /Downloads/ répertoire, cliquez sur le bouton Nouveau dossier , puis créez un /traces/ répertoire dans lequel enregistrer le fichier de suivi des performances :

    Dossier Traces

  11. Acceptez ou modifiez le nom de fichier, par Trace-20251103T154500.jsonexemple .

  12. Cliquez sur le bouton Enregistrer .

    Le fichier de suivi des performances est enregistré, par C:\Users\localAccount\Downloads\traces\Trace-20251103T154500.jsonexemple .

Inclure des annotations

Dans la boîte de dialogue Enregistrer la trace des performances de l’outil Performance , la case à cocher Inclure les annotations détermine s’il faut inclure les annotations ajoutées à un profil de performance.

Les annotations permettent d’attirer l’attention et de mettre en surbrillance des sections spécifiques d’une trace, ce qui facilite la compréhension des détails lors de l’affichage de la trace.

Voir aussi :

Inclure le contenu des ressources

Dans la boîte de dialogue Enregistrer la trace des performances de l’outil Performance , la case Inclure le contenu de la ressource inclut le contenu des fichiers HTML, des fichiers CSS et des scripts JavaScript dans le fichier de trace exporté. Tous les scripts chargés (à l’exception des extensions) sont enregistrés dans le fichier de trace.

Lorsque le fichier de trace est ensuite importé dans DevTools, ces ressources peuvent être consultées dans l’outil Sources . L’outil Sources résout les références de code source qui se trouvent dans la trace importée pour afficher le code source d’origine.

Scripts d’extension

Certains Insights sur les performances nécessitent un contenu de ressource (tel que des scripts) pour l’analyse. Le contenu des scripts d’extension n’est pas inclus dans le fichier de trace, même lorsque cette case à cocher est cochée, car les scripts d’extension peuvent contenir des informations sensibles.

Toutefois, les données de profilage des scripts d’extension sont toujours enregistrées dans le fichier de trace, car les scripts d’extension peuvent avoir un impact sur les performances.

Voir aussi :

Inclure des mappages de sources de script

Dans la boîte de dialogue Enregistrer la trace des performances de l’outil Performances , la case à cocher Inclure les mappages de sources de script inclut les fichiers de contenu de production minifiés et les mappages aux fichiers de code source d’origine. Les mappages sources sont utilisés par DevTools pour charger vos fichiers d’origine et remplacer le code minifié par le code d’origine.

Lorsque le fichier de trace résultant est ensuite ouvert, l’outil Performance affiche les noms des fonctions d’origine et l’outil Sources affiche les noms de fichiers d’origine. Attention : cela peut exposer le code source au destinataire du fichier de trace.

Certains Insights sur les performances nécessitent des mappages de sources pour l’analyse. Consultez Obtenir des insights actionnables dans informations de référence sur les fonctionnalités de performances.

Pour rendre cette case à cocher disponible au lieu d’estompée, vous devez cocher la case Inclure le contenu de la ressource , qui inclut le contenu du script dans le fichier de trace.

Voir aussi :

Compresser avec gzip

Dans la boîte de dialogue Enregistrer la trace des performances de l’outil Performance , la case Compresser avec gzip est cochée par défaut. Cette option permet de compresser des traces de performances volumineuses pour économiser de l’espace disque et accélère l’importation et le traitement des fichiers de trace dans DevTools.

  • Si cette case est cochée, l’extension de nom de fichier par défaut est .gz.
  • Si cette case est décochée, l’extension de nom de fichier par défaut est .json.

Ouvrir un fichier de suivi des performances dans DevTools

Lorsqu’un fichier de trace est ouvert (importé) dans DevTools, un nouvel onglet DevTools spécialisé s’ouvre dans le navigateur, contenant uniquement les outils Performances et Sources . La trace peut inclure des annotations, du contenu des ressources (par exemple, des scripts) et des mappages sources. Ce nouvel onglet n’est pas connecté à 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.

Pour ouvrir un fichier de trace enregistré dans DevTools :

  1. Ouvrez Microsoft Edge ou un autre navigateur basé sur Chromium.

  2. Cliquez avec le bouton droit sur la page web ou l’onglet vide, puis sélectionnez Inspecter.

    DevTools s’ouvre.

  3. Dans DevTools, sélectionnez l’outil Performance (icône De performances).

  4. Cliquez sur le bouton Charger la trace (icône Charger la trace).

    La boîte de dialogue Ouvrir s’ouvre.

  5. Accédez à un fichier de trace partagé, tel que C:\Users\localAccount\Downloads\traces\Trace-20251103T154500.json.gz.

  6. Sélectionnez le fichier, par exemple le fichier Trace-20251103T154500.json.gzcompressé .

  7. Cliquez sur le bouton Ouvrir .

    Un onglet DevTools spécial s’ouvre dans le navigateur, entièrement rempli avec DevTools, ouvrant les outils Sources et Performances :

    Onglet DevTools spécial

    La barre d’adresse affiche une URL spéciale, telle que :

    • devtools://devtools/bundled/trace_app.html
    • devtools://devtools/bundled/rehydrated_devtools_app.html

    Il s’agit d’un onglet dédié DevTools spécial du navigateur, plutôt que de la fenêtre DevTools non attachée. Vous pouvez accéder à d’autres outils pertinents qui peuvent être utiles pour analyser la trace en cliquant sur le bouton Autres outils , par exemple :

    • Ressources du développeur
    • Source rapide
    • Interprétation
    • Recherche
    • Capteurs

Voir aussi :

Voir aussi

Outil Sources :

Outil de performances :

GitHub :

Documentation Chrome :

  • Last updated on