Merge pull request #3282 from MicrosoftDocs/user/mikehoffms/depr-detached-elem

New article "Debug DOM memory leaks ("Detached elements" profiling type)"

Author: captainbrosset

microsoft-edge/dev-videos/index.md

@@ -186,7 +186,7 @@ See also:
 * [What's New in DevTools (Microsoft Edge 109)](../devtools-guide-chromium/whats-new/2023/01/devtools-109.md)<!-- has Video section -->
 * [Share enhanced performance and memory traces](../devtools-guide-chromium/experimental-features/share-traces.md)
 * [Analyze CSS selector performance during Recalculate Style events](../devtools-guide-chromium/evaluate-performance/selector-stats.md) - selector stats.
-* [Reduce garbage with additional settings for allocation sampling](../devtools-guide-chromium/memory-problems/index.md#reduce-garbage-with-additional-settings-for-allocation-sampling) in _Fix memory problems_.
+* [Investigate memory allocation, with reduced garbage ("Include objects" checkboxes)](../devtools-guide-chromium/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)
 * [Heap Snapshot visualizer](https://microsoftedge.microsoft.com/addons/detail/heap-snapshot-visualizer/fceldlhognbemkgfacnffkdanocidgce) extension.
 
@@ -626,12 +626,16 @@ December 9, 2021
 
 [![Thumbnail image for video "Debug memory leaks with the Microsoft Edge Detached Elements tool"](./index-images/detached-elements.png)](https://www.youtube.com/watch?v=v2iy17ptmBk)
 
+To debug DOM memory leaks, use either:
+* The **Detached Elements** tool.  Detached nodes have a link to the associated JavaScript code.
+* The **Detached elements** profiling type in the **Memory** tool.
+
 The **Detached Elements** tool helps you investigate and resolve DOM memory leaks.
 
 Memory leaks occur when the JavaScript code of an application retains more and more objects in memory instead of releasing them for the browser to garbage-collect.  We built the **Detached Elements** tool with the Microsoft Teams developers, and it has already helped us find and fix memory leaks across many of our own websites and apps.
 
 See also:
-* [Debug DOM memory leaks with the Detached Elements tool](../devtools-guide-chromium/memory-problems/dom-leaks.md)<!-- has Video section -->
+* [Debug DOM memory leaks by using the Detached Elements tool](../devtools-guide-chromium/memory-problems/dom-leaks.md)<!-- has Video section -->
 * [Debug memory leaks with the Microsoft Edge Detached Elements tool](https://blogs.windows.com/msedgedev/2021/12/09/debug-memory-leaks-detached-elements-tool-devtools/) - blog post.
 
 

microsoft-edge/devtools-guide-chromium/about-tools.md

@@ -15,7 +15,7 @@ DevTools provides more than 30 tools:
 *  Two icons on the **Activity Bar**, for the **Inspect tool** (![Inspect tool icon](./about-tools-images/inspect-tool-icon-light-theme.png)) and **Device Emulation** (![Device Emulation icon](./about-tools-images/device-emulation-icon-light-theme.png)).
 *  Three permanent tool tabs on the **Activity Bar**, for the **Elements**, **Console**, and **Sources** tools.
 *  Optional tabs, for optional tools such as the **Welcome** and **Network** tools.
-*  More optional tools, on the **More tools** (![More Tools icon](./about-tools-images/more-tools-icon-light-theme.png)) menu, such as the **3D View** and **Detached Elements** tools.
+*  More optional tools, on the **More tools** (![More Tools icon](./about-tools-images/more-tools-icon-light-theme.png)) menu, such as the **3D View** tool.
 
 ![The default tools, including two icons and eight tabs in the Activity Bar](./about-tools-images/all-default-tools.png)
 
@@ -41,7 +41,7 @@ Microsoft Edge DevTools includes the following tools.
 | **Coverage** tool | Help you find unused JavaScript and CSS code, to speed up your page load and save your mobile users cellular data. | [Find unused JavaScript and CSS code with the Coverage tool](coverage/index.md) |
 | **Crash analyzer** tool | Analyze crashes of your web app.  You can input a JavaScript production stack trace, such as for non-fatal JavaScript exceptions, and then have your source maps applied to the stack trace so that you can debug faster. | [Crash analyzer tool](./crash-analyzer/index.md) |
 | **CSS Overview** tool | Help you better understand your page's CSS and identify potential improvements. | [CSS Overview tool](css/css-overview-tool.md) |
-| **Detached Elements** tool | To increase the performance of your page, this tool finds detached elements that the browser cannot garbage-collect, and identifies the JavaScript object that is still referencing the detached element.  By changing your JavaScript to release the element, you reduce the number of detached elements on your page, increasing page performance and responsiveness. | [Debug DOM memory leaks with the Detached Elements tool](memory-problems/dom-leaks.md) |
+| **Detached Elements** tool | To increase the performance of your webpage, find detached elements that the browser can't garbage-collect, and then identify the JavaScript object that's still referencing the detached element.  Then change your JavaScript to release the element, to reduce the number of detached elements on your page, increasing page performance and responsiveness. | [Debug DOM memory leaks by using the Detached Elements tool](memory-problems/dom-leaks.md) |
 | **Developer Resources** | Shows resource URLs for the webpage. | [Developer Resources tool](developer-resources/developer-resources.md) |
 | **Device Emulation** | Use the **Device Emulation** tool, also called _Device Simulation Mode_ or _Device Mode_, to approximate how your page looks and responds on a mobile device. | [Emulate mobile devices (Device Emulation)](device-mode/index.md) |
 | **Elements** tool | Inspect, edit, and debug your HTML and CSS.  You can edit in the tool while displaying the changes live in the browser.  Debug your HTML using the DOM tree, and inspect and work on the CSS for your webpage. | [Inspect, edit, and debug HTML and CSS with the Elements tool](elements-tool/elements-tool.md) |

microsoft-edge/devtools-guide-chromium/console/utilities.md

@@ -632,7 +632,7 @@ You can also specify a collection of events by using one of the predefined sets
 `profile([name])` starts a JavaScript CPU profiling session with an optional name.
 
 <!-- add'l info -->
-To complete the profile and display the results in the **Performance** tool, call [profileEnd([name])](#profileendname).  <!-- See [Speed Up JavaScript Runtime](../rendering-tools/js-runtime.md).  -->
+To complete the profile and display the results in the **Performance** tool, call [profileEnd([name])](#profileendname).  <!-- See [Speed up JavaScript runtime ("Allocation sampling" profiling type)](../rendering-tools/js-runtime.md).  -->
 
 #### Syntax
 
@@ -671,7 +671,7 @@ profileEnd('A');
 `profileEnd([name])` completes a JavaScript CPU profiling session and displays the results in the **Performance** tool.
 
 <!-- add'l info -->
-To call this function, you must be running the [profile([name])](#profilename) function.  <!-- See [Speed Up JavaScript Runtime](../rendering-tools/js-runtime.md).  -->
+To call this function, you must be running the [profile([name])](#profilename) function.  <!-- See [Speed up JavaScript runtime ("Allocation sampling" profiling type)](../rendering-tools/js-runtime.md).  -->
 
 #### Syntax
 

microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/performance-memory.png

@@ -499,6 +499,9 @@ The colored lines on the chart map to the colored checkboxes above the chart.  C
 
 The chart only displays the region of the recording that is currently selected.  For example, in the previous figure, the **Memory** chart is only showing memory usage from around the 3600 ms mark to the 6200 ms mark.
 
+See also:
+* [Visualize memory leaks (Performance tool: Memory checkbox)](#visualize-memory-leaks-performance-tool-memory-checkbox), below.
+
 
 <!-- ------------------------------ -->
 #### View the duration of a portion of a recording
@@ -689,6 +692,57 @@ Use **Disable local fonts** to make it easier to:
 *  Discover differences between local versions installed on your device and a web font.
 
 
+<!-- moved from "Fix memory problems" article -->
+<!-- todo: move instead to Perf tool article? -->
+<!-- Performance tool >  Memory checkbox -->
+<!-- ====================================================================== -->
+## Visualize memory leaks (Performance tool: Memory checkbox)
+
+As a starting point to investigate webpage memory usage, use the **Performance** tool's **Memory** checkbox.  (Or, [Monitor memory use in realtime (Microsoft Edge Browser Task Manager)](../memory-problems/microsoft-edge-browser-task-manager.md).)
+
+The **Performance** tool helps you visualize the memory use of a page over time.
+
+1. In DevTools, open the **Performance** tool.
+
+1. Select the **Memory** checkbox.
+
+1. Make a recording, per [Record performance](#record-performance), above.
+
+It's a good practice to start and end your recording with a forced garbage collection.  To force garbage collection, click the **collect garbage** ![force garbage collection](./reference-images/collect-garbage-icon.png) button while recording.
+
+To demonstrate memory recordings, consider the following code:
+
+```javascript
+var x = [];
+function grow() {
+    for (var i = 0; i < 10000; i++) {
+        document.body.appendChild(document.createElement('div'));
+    }
+    x.push(new Array(1000000).join('x'));
+}
+document.getElementById('grow').addEventListener('click', grow);
+```
+
+Every time that the button referenced in the code is clicked, 10,000 `div` nodes are appended to the document body, and a string of 1,000,000 `x` characters is pushed onto the `x` array.  Running the previous code produces a recording in the **Performance** tool:
+
+![Simple growth](./reference-images/performance-memory.png)
+
+First, an explanation of the user interface.  The **HEAP** graph in the **Overview** pane (below **NET**) represents the JS heap.  Below the **Overview** pane is the **Counter** pane.  The memory usage is broken down by JS heap (same as **HEAP** graph in the **Overview** pane), documents, DOM nodes, listeners, and GPU memory.  Clear a checkbox to hide it from the graph.
+
+Now, an analysis of the code compared with the previous figure.  If you review the node counter (the green graph), it matches up cleanly with the code.  The node count increases in discrete steps.  You can presume that each increase in the node count is a call to `grow()`.
+
+The JS heap graph (the blue graph) is not as straightforward.  In keeping with best practices, the first dip is actually a forced garbage collection (click the  **collect garbage** ![force garbage collection](./reference-images/collect-garbage-icon.png) button).
+
+As the recording progresses, the JS heap size spikes are displayed.  This is natural and expected: the JavaScript code is creating the DOM nodes on every button you click, and is doing a lot of work when it creates the string of one million characters.
+
+The key thing here is the fact that the JS heap ends higher than it began (the "beginning" here being the point after the forced garbage collection).  In the real world, if you saw this pattern of increasing JS heap size or node size, it would potentially indicate a memory leak.
+
+<!--todo old: the Heap snapshots and Profiles panel aren't found in Edge  -->
+
+See also:
+* [View memory metrics](#view-memory-metrics), above.
+
+
 <!-- ====================================================================== -->
 > [!NOTE]
 > Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0).

microsoft-edge/devtools-guide-chromium/evaluate-performance/reference.md

@@ -216,7 +216,7 @@ Whether to display a checkbox to expose internals in heap snapshots in the **Mem
 <!-- todo old: need text -->
 
 See also:
-* [Record heap snapshots using the Memory tool](../memory-problems/heap-snapshots.md)
+* [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](../memory-problems/heap-snapshots.md)
 
 Status:
 * This checkbox is present in Microsoft Edge Canary 131.
@@ -774,7 +774,7 @@ Controls whether to live-update the heap profile.
 <!-- todo old: need text -->
 
 See also:
-* [Record heap snapshots using the Memory tool](../memory-problems/heap-snapshots.md)
+* [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](../memory-problems/heap-snapshots.md)
 
 Status:
 * This checkbox is present in Microsoft Edge Canary 131.
@@ -789,7 +789,7 @@ Controls whether to show the sampling heap profiler timeline in the **Performanc
 
 See also:
 * [Introduction to the Performance tool](../evaluate-performance/index.md)
-* [Record heap snapshots using the Memory tool](../memory-problems/heap-snapshots.md)
+* [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](../memory-problems/heap-snapshots.md)
 
 Status:
 * This checkbox is present in Microsoft Edge Canary 131.

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

@@ -153,7 +153,7 @@ To import a trace in the **Memory** tool:
 
 1. Open the **Memory** tool.
 
-1. Click **Load**.
+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)
 

microsoft-edge/devtools-guide-chromium/experimental-features/share-traces-images/importing-memory-trace.png

@@ -166,7 +166,7 @@ landingContent:
           - text: Fix memory problems
             url: ../memory-problems/index.md
 
-          - text: Debug DOM memory leaks with the Detached Elements tool
+          - text: Debug DOM memory leaks by using the Detached Elements tool
             url: ../memory-problems/dom-leaks.md
 
           - text: Understand security issues using the Security tool