-
Notifications
You must be signed in to change notification settings - Fork 542
Update to DevTools enhanced traces documentation #3615
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from all commits
c3a78c2
5d656ab
34a1d1f
2f4460d
4056721
1e197c0
6e616ae
2dc9c82
0568e2c
0627925
d46bafc
e4ba3fb
fa9d3d3
996f538
a058311
2a0f5e8
906c263
8f5126b
dad87c8
4f5d9ed
2cedede
95f259f
9de61c7
2b77065
bc133b4
cba66ef
26575e6
9baaaef
777ddf8
5e9b2f7
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| --- | ||
| title: Share a memory trace with more data | ||
| description: Learn to export and import memory traces with more data in DevTools to resolve low performance and high memory usage issues in your webpages | ||
| author: MSEdgeTeam | ||
| ms.author: msedgedevrel | ||
| ms.topic: conceptual | ||
| ms.service: microsoft-edge | ||
| ms.subservice: devtools | ||
| ms.date: 11/06/2025 | ||
| --- | ||
| # Share a memory trace with more data | ||
|
|
||
| The **Memory** tool records runtime data about your webpage. Exploring the recorded data makes it possible to improve your webpage's memory usage. | ||
|
|
||
| Additionally, the recorded data can be exported to files on disk. The exported files are called _traces_. | ||
|
|
||
| Exporting memory traces is useful when you want to share these files with other people to get help with investigating issues. An exported trace is a `.heapsnapshot`, `.heapprofile`, or `.heaptimeline` file which can be imported in DevTools at any time. By default, these traces contain minimal information about the runtime data from the traced webpage. | ||
|
|
||
| Memory traces can also be saved as a `.devtools` file, which contains much more runtime data from the traced webpage. Advantages of the `.devtools` file format: | ||
|
|
||
| * This makes it easier to resolve memory issues, by recreating the environment in which the trace was recorded, and by providing original source files. | ||
|
|
||
| * This makes it possible to reliably resolve source code references found in imported traces to the actual runtime code in the **Sources** tool. | ||
|
|
||
| * If source maps were present when a trace was recorded, or if they are stored on the [Azure Artifacts Symbol Server](../javascript/consume-source-maps-from-azure.md), it's also possible to resolve code references to their original source code. | ||
|
|
||
| Browser compatibility: | ||
|
|
||
| * `.heapsnapshot`, `.heapprofile`, and `.heaptimeline` trace files are compatible with Microsoft Edge and other browsers that are based on the Chromium engine. | ||
|
|
||
| * `.devtools` traces can only be imported in Microsoft Edge. | ||
|
|
||
|
|
||
| <!-- ====================================================================== --> | ||
| ## Set the export options for memory traces | ||
|
|
||
| Memory traces that are `.devtools` files can optionally include console messages, script sources, and DOM elements. To control what is included in these traces: | ||
|
|
||
| 1. Open DevTools by pressing **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). | ||
|
|
||
| 1. In DevTools, in the upper right, select **Customize and control DevTools** > **Settings** (). **Settings** opens, with the **Preferences** page selected. | ||
|
|
||
| 1. In the **Persistence** section of the **Preferences** page, use these checkboxes to control what to include: | ||
|
|
||
| * **Include console message in .devtools traces**. | ||
| * **Include script sources in .devtools traces**. | ||
| * **Include DOM snapshots in .devtools traces (experimental)**. | ||
|
|
||
| <!-- todo: create png & un-comment after new ui is in canary: --> | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. create shows the Settings panel in DevTools, showing the trace options |
||
| <!--  --> | ||
|
|
||
|
|
||
| <!-- ====================================================================== --> | ||
| ## Export a trace from the Memory tool | ||
|
|
||
| To export memory information from the **Memory** tool: | ||
|
|
||
| 1. Open the **Memory** tool. | ||
|
|
||
| 1. Choose the type of memory recording you're interested in, such as **Heap Snapshot**. The following instructions are similar if you choose a different memory recording type. To learn more about the different memory recording types, see [Fix memory problems](../memory-problems/index.md). | ||
|
|
||
| 1. Click **Take Snapshot**. | ||
|
|
||
| 1. When the snapshot is recorded, click the **Save** button in the **Memory** tool sidebar: | ||
|
|
||
| <!-- todo: create png & un-comment after new ui is in canary: --> | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. create shows Edge w/ DevTools, showing the Memory tool, with the Save button |
||
| <!--  --> | ||
|
|
||
| 1. Choose the trace type and a location to save the trace file on your disk. Select `.devtools` if you want to include console messages, script sources, and DOM elements. Otherwise, select `.heapsnapshot`, `.heapprofile`, or `.heaptimeline`. | ||
|
|
||
| <!-- todo: create png & un-comment after new ui is in canary: --> | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. create shows the Windows save dialog, showing the memory trace file being saved in a traces folder |
||
| <!--  --> | ||
|
|
||
|
|
||
| <!-- ====================================================================== --> | ||
| ## Import a trace in the Memory tool | ||
|
|
||
| To import a trace in the **Memory** tool: | ||
|
|
||
| 1. Open the **Memory** tool: | ||
|
|
||
|  | ||
|
|
||
| 1. Click the **Load profile** () button at the top. Or, click the **Load profile** button at the bottom. | ||
|
|
||
| 1. Locate the trace file on your disk. It's either a `.devtools` file, or a `.heapsnapshot`, `.heaptimeline`, or `.heapprofile` file. | ||
|
|
||
|  | ||
|
|
||
| 1. Open the file. | ||
|
|
||
| If it's a `.devtools` file, a new DevTools window appears, showing the memory information and the extra runtime information that was recorded displayed in the **Sources**, **Console**, and **Elements** tools. | ||
|
|
||
| Otherwise, the memory information appears in the **Memory** tool, and the rest of the DevTools tabs continue to show information related to the current webpage. | ||
|
|
||
|
|
||
| <!-- ====================================================================== --> | ||
| ## See also | ||
| <!-- all links in article --> | ||
|
|
||
| * [Share performance traces with more data](../performance/share-performance-traces.md)<!-- link not in article --> | ||
| * [Fix memory problems](../memory-problems/index.md) | ||
| * [Azure Artifacts Symbol Server](../javascript/consume-source-maps-from-azure.md) | ||
Uh oh!
There was an error while loading. Please reload this page.