Update to DevTools enhanced traces documentation

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.
+* Enhanced traces to share memory and performance recordings.<!-- todo: scrub "enhanced traces" -->
 * 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)<!-- has Video section -->
-* [Share enhanced performance and memory traces](../devtools/experimental-features/share-traces.md)
+* [Share memory traces with more data](../devtools/experimental-features/share-memory-traces.md)
+* [Share performance traces 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)

microsoft-edge/devtools/experimental-features/index.md

@@ -392,7 +392,10 @@ In the **Performance** tool, shows an option to save a performance trace as a `.
 
 See also:
 * [Save and share a recording](../performance/reference.md#save-and-share-a-recording) in _Performance features reference_.
-* [Export a trace from the Performance tool](./share-traces.md#export-a-trace-from-the-performance-tool) in _Share enhanced performance and memory traces_.
+* [Export a trace from the Performance tool](../performance/share-performance-traces.md#export-a-trace-from-the-performance-tool) in _Share performance traces with more data_.
+<!--
+* [Export a trace from the Memory tool](./share-memory-traces.md#export-a-trace-from-the-memory-tool) in _Share memory traces with more data_.
+-->
 
 Status:
 * This checkbox is not present in Microsoft Edge Canary 143.
@@ -613,7 +616,7 @@ Status:
 
 
 <!-- ====================================================================== -->
-## Performance panel: Enable collecting enhanced traces
+## Performance panel: Enable collecting enhanced traces<!-- todo: scrub "enhanced traces" -->
 <!-- checkbox has no "(?)" link pointing to this anchor wording -->
 
 _new as of Microsoft Edge 128_
@@ -625,7 +628,7 @@ Status:
 * This checkbox is present in Microsoft Edge Stable 141.
 
 See also:
-* [Share enhanced performance and memory traces](../experimental-features/share-traces.md)
+* [Share performance traces with more data](../performance/share-performance-traces.md)
 * [Performance features reference](../performance/reference.md)
 * [Performance recording event reference](../performance/performance-reference.md)
 
@@ -645,7 +648,7 @@ Status:
 * This checkbox is present in Microsoft Edge Stable 141.
 
 See also:
-* [Share enhanced performance and memory traces](../experimental-features/share-traces.md)
+* [Share performance traces with more data](../performance/share-performance-traces.md)
 * [Performance features reference](../performance/reference.md)
 * [Performance recording event reference](../performance/performance-reference.md)
 
@@ -663,7 +666,7 @@ Status:
 * This checkbox is present in Microsoft Edge Stable 141.
 
 See also:
-* [Share enhanced performance and memory traces](../experimental-features/share-traces.md)
+* [Share performance traces with more data](../performance/share-performance-traces.md)
 * [Performance features reference](../performance/reference.md)
 * [Performance recording event reference](../performance/performance-reference.md)
 

microsoft-edge/devtools/experimental-features/share-memory-traces.md

@@ -0,0 +1,90 @@
+---
+title: Share memory traces 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: 01/06/2023
+---
+# Share memory traces 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. This makes it easier to resolve memory issues, by recreating the environment in which the trace was recorded, and by providing original source files. Also, this 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.
+
+`.devtools` traces can only be imported in Microsoft Edge, while other traces are compatible with other browsers based on the Chromium engine.
+
+
+<!-- ====================================================================== -->
+## 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 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 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: replace once new UI is in canary ![The Settings panel in DevTools, showing the trace options](./share-memory-traces-images/enhanced-trace-options.png) -->
+
+
+<!-- ====================================================================== -->
+## 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: replace with updated UI ![Microsoft Edge with DevTools, showing the Memory tool, with the Save button](./share-memory-traces-images/exporting-memory-trace.png) -->
+
+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`.
+
+   <!-- TOOD: replace once new UI is in canary ![The Windows save dialog, showing the memory trace file being saved in a traces folder](./share-memory-traces-images/saving-memory-trace.png) -->
+
+
+<!-- ====================================================================== -->
+## 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-memory-traces-images/importing-memory-trace.png)
+
+1. Locate the trace file on your disk. It's 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. 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)
+* [Fix memory problems](../memory-problems/index.md)
+* [Azure Artifacts Symbol Server](../javascript/consume-source-maps-from-azure.md)