diff --git a/microsoft-edge/dev-videos/index.md b/microsoft-edge/dev-videos/index.md index e4a48be0d0..20c0306254 100644 --- a/microsoft-edge/dev-videos/index.md +++ b/microsoft-edge/dev-videos/index.md @@ -173,7 +173,7 @@ January 17, 2023 [![Thumbnail image for video "What's new in DevTools 109"](./index-images/devtools-whatsnew-109.png)](https://www.youtube.com/watch?v=b-q-PLmO-ns) Covers: -* Enhanced traces to share memory and performance recordings. +* Share memory and performance traces with more data. * Selector Stats in the **Performance** tool. * Track garbage-collected (GC'd) objects in the **Memory** tool. * Heap Snapshot visualizer extension. @@ -183,7 +183,8 @@ Covers: See also: * [What's New in DevTools (Microsoft Edge 109)](../devtools/whats-new/2023/01/devtools-109.md) -* [Share enhanced performance and memory traces](../devtools/experimental-features/share-traces.md) +* [Share a memory trace with more data](../devtools/experimental-features/share-memory-traces.md) +* [Share a performance trace with more data](../devtools/performance/share-performance-traces.md) * [Analyze CSS selector performance during Recalculate Style events](../devtools/performance/selector-stats.md) - selector stats. * [Investigate memory allocation, with reduced garbage ("Include objects" checkboxes)](../devtools/rendering-tools/js-runtime.md#investigate-memory-allocation-with-reduced-garbage-include-objects-checkboxes) in _Speed up JavaScript runtime ("Allocation sampling" profiling type)_. * [Trash talk: the Orinoco garbage collector](https://v8.dev/blog/trash-talk) diff --git a/microsoft-edge/devtools/experimental-features/index.md b/microsoft-edge/devtools/experimental-features/index.md index 2bd0319263..23ebf226e6 100644 --- a/microsoft-edge/devtools/experimental-features/index.md +++ b/microsoft-edge/devtools/experimental-features/index.md @@ -544,44 +544,6 @@ Status: * This checkbox is present in Microsoft Edge Stable 142. - -## Performance panel: Enable collecting enhanced traces - - -_new as of Microsoft Edge 128_ - -This experiment makes the **Performance** tool capture newly added traces, to support enhanced traces v2. This feature is being implemented in the upstream Chromium project. This experiment doesn't affect the capabilities of Microsoft Edge to capture enhanced traces and doesn't impact DevTools user's experience. - -Status: -* This checkbox is not present in Microsoft Edge Canary 144. -* This checkbox is present in Microsoft Edge Stable 142. - -See also: -* [Share enhanced performance and memory traces](../experimental-features/share-traces.md) -* [Performance features reference](../performance/reference.md) -* [Performance recording event reference](../performance/performance-reference.md) - - - -## Performance panel: Enable collecting source text for compiled script - - -_new as of Microsoft Edge 128_ - -In the **Performance** tool, when exporting the trace file, stores the source code of compiled scripts in the trace file. - -This experiment makes the **Performance** tool record script source text in traces. This feature is being implemented in the upstream Chromium project. - -Status: -* This checkbox is not present in Microsoft Edge Canary 144. -* This checkbox is present in Microsoft Edge Stable 142. - -See also: -* [Share enhanced performance and memory traces](../experimental-features/share-traces.md) -* [Performance features reference](../performance/reference.md) -* [Performance recording event reference](../performance/performance-reference.md) - - ## Performance panel: Enable debug mode (trace event details, etc) @@ -595,7 +557,7 @@ Status: * This checkbox is present in Microsoft Edge Stable 142. See also: -* [Share enhanced performance and memory traces](../experimental-features/share-traces.md) +* [Share a performance trace with more data](../performance/share-performance-traces.md) * [Performance features reference](../performance/reference.md) * [Performance recording event reference](../performance/performance-reference.md) diff --git a/microsoft-edge/devtools/experimental-features/share-memory-traces-images/close-icon.png b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/close-icon.png new file mode 100644 index 0000000000..53d0a08e79 Binary files /dev/null and b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/close-icon.png differ diff --git a/microsoft-edge/devtools/experimental-features/share-memory-traces-images/enhanced-trace-options.png b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/enhanced-trace-options.png new file mode 100644 index 0000000000..7389da6c7d Binary files /dev/null and b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/enhanced-trace-options.png differ diff --git a/microsoft-edge/devtools/experimental-features/share-memory-traces-images/exporting-memory-trace.png b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/exporting-memory-trace.png new file mode 100644 index 0000000000..b942b08900 Binary files /dev/null and b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/exporting-memory-trace.png differ diff --git a/microsoft-edge/devtools/experimental-features/share-memory-traces-images/importing-memory-trace.png b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/importing-memory-trace.png new file mode 100644 index 0000000000..50f47dab17 Binary files /dev/null and b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/importing-memory-trace.png differ diff --git a/microsoft-edge/devtools/experimental-features/share-memory-traces-images/load-profile-icon.png b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/load-profile-icon.png new file mode 100644 index 0000000000..48579d69d9 Binary files /dev/null and b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/load-profile-icon.png differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/opening-memory-trace.png b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/opening-memory-trace.png similarity index 100% rename from microsoft-edge/devtools/experimental-features/share-traces-images/opening-memory-trace.png rename to microsoft-edge/devtools/experimental-features/share-memory-traces-images/opening-memory-trace.png diff --git a/microsoft-edge/devtools/experimental-features/share-memory-traces-images/save-profile-icon.png b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/save-profile-icon.png new file mode 100644 index 0000000000..ebb079ac7f Binary files /dev/null and b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/save-profile-icon.png differ diff --git a/microsoft-edge/devtools/experimental-features/share-memory-traces-images/saving-memory-trace.png b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/saving-memory-trace.png new file mode 100644 index 0000000000..8023dfedb0 Binary files /dev/null and b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/saving-memory-trace.png differ diff --git a/microsoft-edge/devtools/experimental-features/share-memory-traces-images/set-default-memory-trace-type.png b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/set-default-memory-trace-type.png new file mode 100644 index 0000000000..843137dce3 Binary files /dev/null and b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/set-default-memory-trace-type.png differ diff --git a/microsoft-edge/devtools/experimental-features/share-memory-traces-images/settings-button-icon.png b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/settings-button-icon.png new file mode 100644 index 0000000000..4f03826c96 Binary files /dev/null and b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/settings-button-icon.png differ diff --git a/microsoft-edge/devtools/experimental-features/share-memory-traces-images/take-heap-snapshot-icon.png b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/take-heap-snapshot-icon.png new file mode 100644 index 0000000000..05db6b1fed Binary files /dev/null and b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/take-heap-snapshot-icon.png differ diff --git a/microsoft-edge/devtools/experimental-features/share-memory-traces.md b/microsoft-edge/devtools/experimental-features/share-memory-traces.md new file mode 100644 index 0000000000..d54b5b9d1b --- /dev/null +++ b/microsoft-edge/devtools/experimental-features/share-memory-traces.md @@ -0,0 +1,178 @@ +--- +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: article +ms.service: microsoft-edge +ms.subservice: devtools +ms.date: 11/17/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. + + + +#### File formats + +A trace file can be imported in DevTools at any time. By default, these traces contain minimal information about the runtime data from the traced webpage. + +An exported trace can be a basic `.heapsnapshot`, `.heapprofile`, or `.heaptimeline` file. + +A memory trace 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 default memory trace type + +By default, the **Memory** tool exports data as `.heapsnapshot`, `.heapprofile`, or `.heaptimeline` trace files. + +To change the default trace type to `.devtools`: + +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 button](./share-memory-traces-images/settings-button-icon.png)). **Settings** opens, with the **Preferences** page selected. + +1. In the **Persistence** section of the **Preferences** page, use the **Export .devtools memory traces** checkbox to control the default type. + + ![The Settings panel in DevTools, showing the export type option](./share-memory-traces-images/set-default-memory-trace-type.png) + + + +## Set the export options for memory traces + +Memory traces that are `.devtools` files always include source maps when they're available, and can optionally include console messages, script sources, and DOM elements. + +To control whether console messages, script sources, or DOM elements are included in memory 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 button](./share-memory-traces-images/settings-button-icon.png)). **Settings** opens, with the **Preferences** page selected. + +1. Scroll down to the **Persistence** section: + + ![The Settings panel in DevTools, showing the trace options](./share-memory-traces-images/enhanced-trace-options.png) + +1. Use these checkboxes to control what to include: + + * **Include console messages in .devtools memory traces** + + * **Include script sources in .devtools memory traces** + + * **Include DOM snapshots in .devtools memory traces (experimental)** + +1. In the upper right of DevTools, click the **Close** (![Close icon](./share-memory-traces-images/close-icon.png)) button. + + + +## Export a trace from the Memory tool + +To export memory information from the **Memory** tool: + +1. Open the **Memory** tool. + +1. Select the option button for the type of memory recording you're interested in, such as the **Heap snapshot** option button. + + The following instructions are similar if you choose a different memory recording type, per [Fix memory problems](../memory-problems/index.md). + + **In the case of a heap snapshot:** + +1. Click the **Take heap snapshot** (![Take heap snapshot icon](./share-memory-traces-images/take-heap-snapshot-icon.png)) button at top, or the **Take snapshot** button at bottom. + + The snapshot is recorded and displayed. + +1. In the toolbar, select the **Save profile** (![Save profile icon](./share-memory-traces-images/save-profile-icon.png)) button: + + ![Microsoft Edge with DevTools, showing the Memory tool, with the Save button](./share-memory-traces-images/exporting-memory-trace.png) + + Or, in the **Memory** tool sidebar, hover over the new snapshot's entry, and then select **Save profile**. + + The **Save As** dialog opens: + + ![The Save As dialog in Windows, showing the memory trace file being saved in a traces folder](./share-memory-traces-images/saving-memory-trace.png) + +1. Navigate to a folder in which to save the trace file on your disk. + +1. In the **File name** text box, adjust the file name if desired. + +1. In the **File name** text box, keep or modify the extension that's specified after the file name. + + + + * `.devtools` includes console messages, script sources, and DOM elements. + + * `.heapsnapshot`, `.heapprofile`, or `.heaptimeline` omits console messages, script sources, and DOM elements. + + Which extension is initially displayed is controlled by a DevTools setting; see [Set the default memory trace type](#set-the-default-memory-trace-type), above. + +1. Click the **Save** button. + + The **Save As** dialog closes, and the file is saved to disk. + + + +## Import a trace in the Memory tool + +To import a trace in the **Memory** tool: + +1. Open the **Memory** tool: + + ![Microsoft Edge, showing the Memory tool in DevTools, with the Load button](./share-memory-traces-images/importing-memory-trace.png) + +1. Click the **Load profile** (![Load profile icon](./share-memory-traces-images/load-profile-icon.png)) button at the top. Or, click the **Load profile** button at the bottom. + + The **Open** dialog is displayed. + +1. In the lower left dropdown list (a filter), select file types to display: + + * **Performance traces (*.devtools; *.json)** - _Used with the **Performance** tool._ + * **Heap snapshots (*.devtools; *.heapsnapshot)** + * **Heap timelines (*.devtools; *.heaptimeline)** + * **Sampled heap profiles (*.devtools; *.heapprofile)** + +1. Locate the trace file on your disk, and then select it. + + The trace file is either a `.devtools` file, or a `.heapsnapshot`, `.heaptimeline`, or `.heapprofile` file. + + ![The Windows open dialog, showing a memory trace file](./share-memory-traces-images/opening-memory-trace.png) + +1. Click the **Open** button. + + 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 + + +* [Share performance traces with more data](../performance/share-performance-traces.md) +* [Fix memory problems](../memory-problems/index.md) +* [Azure Artifacts Symbol Server](../javascript/consume-source-maps-from-azure.md) diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/choose-trace-type-on-export.png b/microsoft-edge/devtools/experimental-features/share-traces-images/choose-trace-type-on-export.png deleted file mode 100644 index bc5704ac56..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/choose-trace-type-on-export.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/enhanced-trace-options.png b/microsoft-edge/devtools/experimental-features/share-traces-images/enhanced-trace-options.png deleted file mode 100644 index 24e37cca6d..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/enhanced-trace-options.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/export-icon.png b/microsoft-edge/devtools/experimental-features/share-traces-images/export-icon.png deleted file mode 100644 index 2084c18150..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/export-icon.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/exporting-memory-trace.png b/microsoft-edge/devtools/experimental-features/share-traces-images/exporting-memory-trace.png deleted file mode 100644 index d4e6da1e43..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/exporting-memory-trace.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/exporting-perf-trace.png b/microsoft-edge/devtools/experimental-features/share-traces-images/exporting-perf-trace.png deleted file mode 100644 index 47d58ea646..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/exporting-perf-trace.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/import-icon.png b/microsoft-edge/devtools/experimental-features/share-traces-images/import-icon.png deleted file mode 100644 index ebf426704d..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/import-icon.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/importing-memory-trace.png b/microsoft-edge/devtools/experimental-features/share-traces-images/importing-memory-trace.png deleted file mode 100644 index 9dfd121652..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/importing-memory-trace.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/importing-perf-trace.png b/microsoft-edge/devtools/experimental-features/share-traces-images/importing-perf-trace.png deleted file mode 100644 index 78e8218622..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/importing-perf-trace.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/opening-perf-trace.png b/microsoft-edge/devtools/experimental-features/share-traces-images/opening-perf-trace.png deleted file mode 100644 index 812692c525..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/opening-perf-trace.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/saving-memory-trace.png b/microsoft-edge/devtools/experimental-features/share-traces-images/saving-memory-trace.png deleted file mode 100644 index 5278413ca3..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/saving-memory-trace.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/saving-perf-trace.png b/microsoft-edge/devtools/experimental-features/share-traces-images/saving-perf-trace.png deleted file mode 100644 index 669f32e0c7..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/saving-perf-trace.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/settings-button-icon.png b/microsoft-edge/devtools/experimental-features/share-traces-images/settings-button-icon.png deleted file mode 100644 index 1521389268..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/settings-button-icon.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/trace-type-setting.png b/microsoft-edge/devtools/experimental-features/share-traces-images/trace-type-setting.png deleted file mode 100644 index 6f5856c0af..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/trace-type-setting.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces.md b/microsoft-edge/devtools/experimental-features/share-traces.md deleted file mode 100644 index 775548be92..0000000000 --- a/microsoft-edge/devtools/experimental-features/share-traces.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: Share enhanced performance and memory traces -description: Learn to export and import enhanced performance and memory traces in DevTools to resolve low performance and high memory usage issues in your webpages -author: MSEdgeTeam -ms.author: msedgedevrel -ms.topic: article -ms.service: microsoft-edge -ms.subservice: devtools -ms.date: 01/06/2023 ---- -# Share enhanced performance and memory traces - -The **Performance** and **Memory** tools record runtime data about your webpage. Exploring the recorded data makes it possible to improve your webpage's memory usage or runtime performance. - -Additionally, the recorded data can be exported to files on disk. The exported files are called _traces_. - -Exporting performance and 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 `.json`, `.heapsnapshot`, `.heapprofile`, or `.heaptimeline` file which can be imported in DevTools at any time. - -By default, traces contain minimal information about the runtime data from the traced webpage, but traces can also be exported as _enhanced traces_, as an experimental feature. An enhanced trace is a `.devtools` file which contains much more runtime data from the traced webpage. Enhanced traces make it easier to resolve performance and memory issues, by recreating the environment in which the trace was recorded, and by providing original source files. - -Using enhanced traces makes it possible to reliably resolve source code references found in imported traces to the actual runtime code in the **Sources** tool. Additionally, 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 will also be possible to resolve code references to their original source code. - - - -## Differences between normal and enhanced traces - -#### Normal traces - -A normal trace only contains some of the information that's present in a webpage. Much of the original code is lost and only the recorded performance or memory data of the webpage is preserved in the trace. For example, when importing a `.heapsnapshot` memory trace that was recorded during another DevTools session or on another computer, there's no way to go from an object in the **Memory** tool to its constructor in the **Sources** tool. - -Similarly, in the **Performance** tool, when you import a performance trace recorded earlier: - -* The trace needs to have been recorded on the same site and same configuration to be able to map from the performance report to the JavaScript that was running in the browser. -* If file or function names have changed since the recording was taken, the mapping is prone to errors. - -#### Enhanced traces - -An enhanced trace retains much more information about the webpage where the recording took place. For example, an enhanced trace contains the execution context and the list of parsed scripts, and can optionally contain console messages, script sources, and a snapshot of the DOM tree. - -When an enhanced trace is imported in DevTools, a new DevTools window appears. This new window isn't connected to the webpage that's running in your browser, and instead re-creates part of the environment in which the trace was originally recorded. - -For example, if a snapshot of the DOM was recorded in the enhanced trace, the **Elements** tool displays this snapshot. If console messages were recorded, the **Console** tool prints these messages. The **Sources** tool displays the scripts that were present during the recording. - -Enhanced traces can only be imported in Microsoft Edge, while normal traces are compatible with other browsers based on the Chromium engine. - - - -## Set the default trace type - -By default, the **Performance** and **Memory** tools export data as normal traces, but you can set the default trace type to `enhanced`. - -To change the trace type: - -1. Open DevTools by pressing **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). - -1. In DevTools, in the upper right, click **Settings** (![Settings button](./share-traces-images/settings-button-icon.png)). **Settings** opens, with the **Preferences** page selected. - -1. In the **Persistence** section of the **Preferences** page, select the **Export enhanced performance and memory traces** checkbox: - - ![The Settings panel in DevTools, with the enhanced traces option checked](./share-traces-images/trace-type-setting.png) - -1. Enhanced traces can also optionally include console messages, script sources, and DOM elements. To control what to include in enhanced traces, use these checkboxes: - - * **Include console message in enhanced traces**. - * **Include script sources in enhanced traces**. - * **Include DOM snapshots in enhanced traces (experimental)**. - - ![The Settings panel in DevTools, showing the other enhanced trace options](./share-traces-images/enhanced-trace-options.png) - - - -## Export a trace from the Performance tool - -To export a performance recording from the **Performance** tool: - -1. Open the **Performance** tool. - -1. Click **Record** and run the scenario you want to investigate the performance of by interacting with the webpage, and then click **Stop**. - -1. When the performance profile appears, click **Save profile** (![Save profile button](./share-traces-images/export-icon.png)): - - ![Microsoft Edge with DevTools, showing the Performance tool, with the Save profile button](./share-traces-images/exporting-perf-trace.png) - -1. Choose a location to save the trace file on your disk: - - ![The Windows save dialog, showing the performance trace file being saved in a traces folder](./share-traces-images/saving-perf-trace.png) - - The trace is a `.json` file if you set the default trace type to normal, and it is a `.devtools` file if you set the default trace type to enhanced. - - - -## 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: - - ![Microsoft Edge with DevTools, showing the Memory tool, with the Save button](./share-traces-images/exporting-memory-trace.png) - -1. Choose a location to save the trace file on your disk: - - ![The Windows save dialog, showing the memory trace file being saved in a traces folder](./share-traces-images/saving-memory-trace.png) - - The trace is a `.heapsnapshot`, `.heapprofile`, or `.heaptimeline` file if you set the default trace type to normal, and it is a `.devtools` file if you set the default trace type to enhanced. - - - -## Choose a trace type when exporting - -Traces are exported as normal or enhanced traces, depending on the **Export Enhanced Performance and Memory Traces** option. To change the default trace type, see [Set the default trace type](#set-the-default-trace-type). You can also choose the type of trace you want when exporting. - -To choose a different trace type when exporting: - -1. Right-click (or hold the **Ctrl** key and click) the **Save profile** (![Save profile button](./share-traces-images/export-icon.png)) in the **Performance** tool or the **Save** button in the **Memory** tool. - -1. Click either **.devtools (enhanced format for Microsoft Edge)** if you want to export an enhanced trace, or click **.json (works with Microsoft Edge and Chromium browsers)** if you want a normal trace. - - ![The right-click menu on the Save Profile button in the Performance tool, to select the type of trace](./share-traces-images/choose-trace-type-on-export.png) - - - -## Import a trace in the Performance tool - -To import a trace in the **Performance** tool: - -1. Open the **Performance** tool. - -1. Click **Load profile** (![Load profile button](./share-traces-images/import-icon.png)): - - ![Microsoft Edge, showing the Performance tool in DevTools, with the Load profile button](./share-traces-images/importing-perf-trace.png) - -1. Locate the trace file on your disk. It's either a `.devtools` file (for enhanced traces) or a `.json` file (for normal traces): - - ![The Windows open dialog, showing a performance trace file](./share-traces-images/opening-perf-trace.png) - -1. Open the file. - - If the file is an enhanced trace, a new DevTools window appears, showing the performance profile and the extra runtime information that was recorded displayed in the **Sources**, **Console**, and **Elements** tools. - - If the file is a normal trace, the performance profile appears in the **Performance** tool, and the rest of the DevTools tabs continue to show information related to the current webpage. - - - -## 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: - - ![Microsoft Edge, showing the Memory tool in DevTools, with the Load button](./share-traces-images/importing-memory-trace.png) - -1. Locate the trace file on your disk. It's either a `.devtools` file (for enhanced traces) or a `.heapsnapshot`, `.heaptimeline`, or `.heapprofile` file (for normal traces). - - ![The Windows open dialog, showing a memory trace file](./share-traces-images/opening-memory-trace.png) - -1. Open the file. - - If the file is an enhanced trace, 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. - - If the file is a normal trace, the memory information appears in the **Memory** tool, and the rest of the DevTools tabs continue to show information related to the current webpage. - - - -## Share feedback about enhanced traces - -Enhanced traces is an experimental feature which hopefully makes it easier to collaborate on resolving performance and memory issues by seeing unminified code. - -The Microsoft Edge DevTools team welcomes any feedback you may have about enhanced traces. If you've tried this new feature, please feel free to report any problems or ideas about it on our [GitHub repository](https://github.com/MicrosoftEdge/DevTools/issues/122). diff --git a/microsoft-edge/devtools/performance/share-performance-traces-images/devtools-tab.png b/microsoft-edge/devtools/performance/share-performance-traces-images/devtools-tab.png new file mode 100644 index 0000000000..f92c01db33 Binary files /dev/null and b/microsoft-edge/devtools/performance/share-performance-traces-images/devtools-tab.png differ diff --git a/microsoft-edge/devtools/performance/share-performance-traces-images/load-trace-icon.png b/microsoft-edge/devtools/performance/share-performance-traces-images/load-trace-icon.png new file mode 100644 index 0000000000..48579d69d9 Binary files /dev/null and b/microsoft-edge/devtools/performance/share-performance-traces-images/load-trace-icon.png differ diff --git a/microsoft-edge/devtools/performance/share-performance-traces-images/performance-icon.png b/microsoft-edge/devtools/performance/share-performance-traces-images/performance-icon.png new file mode 100644 index 0000000000..191acbac07 Binary files /dev/null and b/microsoft-edge/devtools/performance/share-performance-traces-images/performance-icon.png differ diff --git a/microsoft-edge/devtools/performance/share-performance-traces-images/record-icon.png b/microsoft-edge/devtools/performance/share-performance-traces-images/record-icon.png new file mode 100644 index 0000000000..2ff2a8e86d Binary files /dev/null and b/microsoft-edge/devtools/performance/share-performance-traces-images/record-icon.png differ diff --git a/microsoft-edge/devtools/performance/share-performance-traces-images/save-performance-trace-dialog.png b/microsoft-edge/devtools/performance/share-performance-traces-images/save-performance-trace-dialog.png new file mode 100644 index 0000000000..c2b3e15e30 Binary files /dev/null and b/microsoft-edge/devtools/performance/share-performance-traces-images/save-performance-trace-dialog.png differ diff --git a/microsoft-edge/devtools/performance/share-performance-traces-images/save-trace-icon.png b/microsoft-edge/devtools/performance/share-performance-traces-images/save-trace-icon.png new file mode 100644 index 0000000000..ebb079ac7f Binary files /dev/null and b/microsoft-edge/devtools/performance/share-performance-traces-images/save-trace-icon.png differ diff --git a/microsoft-edge/devtools/performance/share-performance-traces-images/saving-perf-trace.png b/microsoft-edge/devtools/performance/share-performance-traces-images/saving-perf-trace.png new file mode 100644 index 0000000000..84c01bfe6d Binary files /dev/null and b/microsoft-edge/devtools/performance/share-performance-traces-images/saving-perf-trace.png differ diff --git a/microsoft-edge/devtools/performance/share-performance-traces-images/stop-icon.png b/microsoft-edge/devtools/performance/share-performance-traces-images/stop-icon.png new file mode 100644 index 0000000000..f6de64a490 Binary files /dev/null and b/microsoft-edge/devtools/performance/share-performance-traces-images/stop-icon.png differ diff --git a/microsoft-edge/devtools/performance/share-performance-traces.md b/microsoft-edge/devtools/performance/share-performance-traces.md new file mode 100644 index 0000000000..d37b9bd9c0 --- /dev/null +++ b/microsoft-edge/devtools/performance/share-performance-traces.md @@ -0,0 +1,228 @@ +--- +title: Share a performance trace with more data +description: Export and import performance traces in DevTools to resolve slow performance or excess memory usage issues in your webpage. +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: article +ms.service: microsoft-edge +ms.subservice: devtools +ms.date: 11/06/2025 +--- +# Share a performance trace with more data + +The data that's recorded by the **Performance** tool can be exported to files on disk, which can also include annotations, resource content (HTML, CSS, and JavaScript content), and source maps. The exported files are called _traces_. An exported trace is a `.json` file that can be imported in DevTools at any time. + +When you export a trace from the Performance tool, you can choose whether to include additional data: +* Annotations. +* Resource content (such as HTML, CSS, and JavaScript content). +* Script source maps. + +You can also control whether the trace file is compressed. + +The **Performance** tool records runtime data about your webpage. Exploring the recorded data makes it possible to improve your webpage's runtime performance. + +Exporting performance traces is useful when you want to share these files with other people, to get help with investigating issues. + +Traces can be saved to include annotations, resource content (such as scripts), and source maps from the webpage. This additional information makes it easier to analyze an imported trace file, by recreating the environment in which the trace was recorded, and by providing original source files. + +Exported trace files are compatible with other browsers that are based on the Chromium engine. + +When a trace that includes annotations, resource content (such as scripts) or source maps is imported in DevTools, a new DevTools window appears. This new window isn't connected to the webpage that's running in your browser, and instead re-creates part of the environment in which the trace was originally recorded. This DevTools instance contains only the **Performance** and **Sources** tools. + + + +## Export a trace from the Performance tool + +To record performance for aspects of a webpage, and then export a performance recording: + +1. Open a webpage, such as [To do](https://microsoftedge.github.io/Demos/demo-to-do/), in a new window or tab. + +1. Right-click the webpage, and then select **Inspect**. + + DevTools opens. + +1. In DevTools, open the **Performance** (![Performance icon](./share-performance-traces-images/performance-icon.png)) tool. + +1. Click the **Record** (![Record icon](./share-performance-traces-images/record-icon.png)) button. + +1. Interact with the webpage, to run the scenario that you want to investigate the performance of. + + For example, in the demo page, in the **Add a task** text box, type `task 1`, and then press **Enter**. + +1. Click the **Stop** (![Stop icon](./share-performance-traces-images/stop-icon.png)) button. + + The performance profile appears. + +1. Click the **Save trace** (![Save trace icon](./share-performance-traces-images/save-trace-icon.png)) button. + + The **Save performance trace** dialog opens (within the **Performance** tool): + + ![The Save performance trace dialog](./share-performance-traces-images/save-performance-trace-dialog.png) + +1. Select or clear the checkboxes, to control what information to include in the trace file: + + * The **Include annotations** checkbox. This checkbox only appears if there are annotations. + + * The **Include resource content** checkbox. + + * The **Include script source maps** checkbox. (Must first select the **Include resource content** checkbox.) + + Optionally, clear the **Compress with gzip** checkbox. + + Details about these checkboxes are below. + +1. Click the **Save** button. + + The small dialog in the **Performance** tool closes, and the **Save As** dialog opens. + +1. Navigate to a folder in which to save the trace file on your disk. + + For example, on Windows, in the `/Downloads/` directory, click the **New folder** button, and then create a `/traces/` directory, in which to save the performance trace file: + + ![Traces folder](./share-performance-traces-images/saving-perf-trace.png) + +1. Accept or modify the file name, such as `Trace-20251103T154500.json`. + +1. Click the **Save** button. + + The performance trace file is saved, such as `C:\Users\localAccount\Downloads\traces\Trace-20251103T154500.json`. + + + +## Include annotations + + + +In the **Save performance trace** dialog within the **Performance** tool, the **Include annotations** checkbox controls whether to include annotations that were added to a performance profile. + +Annotations help draw attention to and highlight specific sections of a trace, making it easier to understand details when viewing the trace. + +See also: +* [Annotate a recording and share it](./reference.md#annotate-a-recording-and-share-it) in _Performance features reference_. + + + +## Include resource content + + + +In the **Save performance trace** dialog within the **Performance** tool, selecting the **Include resource content** checkbox includes the contents of HTML files, CSS files, and JavaScript scripts in the exported trace file. All loaded scripts (except extensions) are saved in the trace file. + +When the trace file is subsequently imported into DevTools, these resources can then be viewed in the **Sources** tool. The **Sources** tool resolves source code references that are found in the imported trace, to display the original source code. + + + +#### Extension scripts + +Some Performance insights require resource content (such as scripts) for analysis. The contents of extension scripts are not included in the trace file, even when this checkbox is selected, because extension scripts might contain sensitive information. + +However, the profiling data from extension scripts is still saved in the trace file, because extension scripts can impact performance. + + +See also: +* [JavaScript debugging features](../javascript/reference.md) +* [Run snippets of JavaScript on any webpage](../javascript/snippets.md) +* [Using the Snippets tab to run JavaScript code snippets on any webpage](../sources/index.md#using-the-snippets-tab-to-run-javascript-code-snippets-on-any-webpage) in _Sources tool overview_. +* [Using the Content scripts tab for Microsoft Edge extensions](../sources/index.md#using-the-content-scripts-tab-for-microsoft-edge-extensions) in _Sources tool overview_. + + + +## Include script source maps + + + +In the **Save performance trace** dialog within the **Performance** tool, selecting the **Include script source maps** checkbox includes minified production content files and the mappings back to the original source code files. Source maps are used by DevTools to load your original files and replace minified code with original code. + +When the resulting trace file is subsequently opened, the **Performance** tool will display the original function names, and the **Sources** tool will show the original file names. Caution: This may expose source code to the trace file recipient. + +Some Performance insights require source maps for analysis. See [Get actionable insights](./reference.md#get-actionable-insights) in _Performance features reference_. + +To make this checkbox available instead of dimmed, you must select the **Include resource content** checkbox, which includes script content in the trace file. + +See also: +* [Map the processed code to your original source code, for debugging](../javascript/source-maps.md) + + + +## Compress with gzip + +In the **Save performance trace** dialog within the **Performance** tool, the **Compress with gzip** checkbox is selected by default. This option helps compress large performance traces to save disk space, and makes the importing and processing of trace files faster in DevTools. + +* If this checkbox is selected, the default file name extension is `.gz`. +* If this checkbox is cleared, the default file name extension is `.json`. + + + +## Open a performance trace file in DevTools + +When a trace file is opened (imported) in DevTools, a new, specialized DevTools tab opens in the browser, containing only the **Performance** and **Sources** tools. The trace can include annotations, resource content (such as scripts), and source maps. This new tab isn't connected to the webpage that's running in your browser, and instead re-creates part of the environment in which the trace was originally recorded. + +To open a saved trace file in DevTools: + +1. Open Microsoft Edge or another Chromium-based browser. + +1. Right-click the webpage or empty tab, and then select **Inspect**. + + DevTools opens. + +1. In DevTools, select the **Performance** (![Performance icon](./share-performance-traces-images/performance-icon.png)) tool. + +1. Click the **Load trace** (![Load trace icon](./share-performance-traces-images/load-trace-icon.png)) button. + + The **Open** dialog opens. + +1. Navigate to a shared trace file, such as `C:\Users\localAccount\Downloads\traces\Trace-20251103T154500.json.gz`. + +1. Select the file, such as the zipped file `Trace-20251103T154500.json.gz`. + +1. Click the **Open** button. + + A special DevTools tab opens in the browser, entirely filled with DevTools, opening the **Sources** and **Performance** tools: + + ![Special DevTools tab](./share-performance-traces-images/devtools-tab.png) + + The Address bar displays a special URL, such as: + * `devtools://devtools/bundled/trace_app.html` + * `devtools://devtools/bundled/rehydrated_devtools_app.html` + + This is a special DevTools-dedicated tab of the browser, rather than the undocked DevTools window. A few other relevant tools that may be useful for analyzing the trace can be accessed by clicking the **More tools** button, such as: + * **Developer resources** + * **Quick source** + * **Rendering** + * **Search** + * **Sensors** + +See also: +* [Performance tool: Analyze your website's performance](./overview.md) +* [Sources tool overview](../sources/index.md) + + + +## See also + + +* [Share a memory trace with more data](../experimental-features/share-memory-traces.md) + +**Sources** tool: +* [Sources tool overview](../sources/index.md) + * [Using the Content scripts tab for Microsoft Edge extensions](../sources/index.md#using-the-content-scripts-tab-for-microsoft-edge-extensions) in _Sources tool overview_. + * [Using the Snippets tab to run JavaScript code snippets on any webpage](../sources/index.md#using-the-snippets-tab-to-run-javascript-code-snippets-on-any-webpage) in _Sources tool overview_. +* [JavaScript debugging features](../javascript/reference.md) +* [Run snippets of JavaScript on any webpage](../javascript/snippets.md) +* [Map the processed code to your original source code, for debugging](../javascript/source-maps.md) + +**Performance** tool: +* [Performance tool: Analyze your website's performance](./overview.md) +* Performance features reference + * [Annotate a recording and share it](./reference.md#annotate-a-recording-and-share-it) in _Performance features reference_. + * [Get actionable insights](./reference.md#get-actionable-insights) in _Performance features reference_. + +GitHub: +* [To do](https://microsoftedge.github.io/Demos/demo-to-do/) demo. + +Chrome docs: +* [Save and share performance traces](https://developer.chrome.com/docs/devtools/performance/save-trace) diff --git a/microsoft-edge/devtools/whats-new/2023/01/devtools-109.md b/microsoft-edge/devtools/whats-new/2023/01/devtools-109.md index 3908423011..f13a4b6d33 100644 --- a/microsoft-edge/devtools/whats-new/2023/01/devtools-109.md +++ b/microsoft-edge/devtools/whats-new/2023/01/devtools-109.md @@ -22,6 +22,8 @@ These are the latest features in the Stable release of Microsoft Edge DevTools. ## Import and export your DevTools instances with the new enhanced traces feature + + In Microsoft Edge 109, you can turn on new settings to export enhanced traces from the **Performance** and **Memory** tools. These enhanced traces include more information, such as: @@ -63,7 +65,8 @@ To try the enhanced traces feature: You can also export from the **Memory** tool with the new `.devtools` file format. This is a new feature that the DevTools team is actively experimenting with, so please send us your feedback in [[Feedback] Enhanced Traces experiment #122](https://github.com/MicrosoftEdge/DevTools/issues/122). See also: -* [Share enhanced performance and memory traces](../../../experimental-features/share-traces.md) +* [Share a memory trace with more data](../../../experimental-features/share-memory-traces.md) +* [Share a performance trace with more data](../../../performance/share-performance-traces.md) diff --git a/microsoft-edge/devtools/whats-new/2023/06/devtools-114.md b/microsoft-edge/devtools/whats-new/2023/06/devtools-114.md index f05b3e12b3..15b13817aa 100644 --- a/microsoft-edge/devtools/whats-new/2023/06/devtools-114.md +++ b/microsoft-edge/devtools/whats-new/2023/06/devtools-114.md @@ -75,6 +75,8 @@ See also: ## The Memory tool can load enhanced traces larger than 1 GB + + In previous versions of Microsoft Edge, loading an enhanced trace larger than 1 GB failed. In Microsoft Edge 114, this issue has been fixed. You can now successfully load enhanced traces of any size. @@ -88,7 +90,8 @@ Enhanced traces is an experimental feature in Microsoft Edge that allows you to ![An enhanced trace](./devtools-114-images/enhanced-trace-1gb.png) See also: -* [Share enhanced performance and memory traces](../../../experimental-features/share-traces.md) +* [Share a memory trace with more data](../../../experimental-features/share-memory-traces.md) +* [Share a performance trace with more data](../../../performance/share-performance-traces.md) * [GitHub Issue #122: \[Feedback\] Enhanced Traces experiment](https://github.com/MicrosoftEdge/DevTools/issues/122) diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index 4902a59d08..1fe34d756b 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -382,16 +382,16 @@ href: ./devtools/experimental-features/index.md displayName: Experimental features, settings - - name: Share enhanced performance and memory traces - href: ./devtools/experimental-features/share-traces.md - displayName: Experimental features, Enhanced traces, Memory tool, Performance tool + - name: Share a memory trace with more data + href: ./devtools/experimental-features/share-memory-traces.md + displayName: Experimental features, Memory tool # ----------------------------------------------------------------------------- - name: Samples items: - name: Sample code for DevTools href: ./devtools/samples/index.md displayName: sample code, demo -# ----------------------------------------------------------------------------- +# TOOLS ======================================================================= - name: Tools items: - name: About the list of tools @@ -603,6 +603,10 @@ href: ./devtools/performance/reference.md displayName: Performance tool, Rendering tool + - name: Share a performance trace with more data + href: ./devtools/performance/share-performance-traces.md + displayName: Performance tool + - name: Performance recording event reference # = Performance > Timeline event reference href: ./devtools/performance/performance-reference.md displayName: Performance tool diff --git a/redirects/.openpublishing.redirection.devtools.json b/redirects/.openpublishing.redirection.devtools.json index 359cacc6fe..598fdd793d 100644 --- a/redirects/.openpublishing.redirection.devtools.json +++ b/redirects/.openpublishing.redirection.devtools.json @@ -468,7 +468,12 @@ }, { "source_path": "../microsoft-edge/devtools-guide-chromium/experimental-features/share-traces.md", - "redirect_url": "/microsoft-edge/devtools/experimental-features/share-traces", + "redirect_url": "/microsoft-edge/devtools/performance/share-performance-traces", + "redirect_document_id": false + }, + { + "source_path": "../microsoft-edge/devtools/experimental-features/share-traces.md", + "redirect_url": "/microsoft-edge/devtools/performance/share-performance-traces", "redirect_document_id": false }, {