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

microsoft-edge/dev-videos/index.md

@@ -626,12 +626,14 @@ 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)
 
-The **Detached Elements** tool helps you investigate and resolve DOM memory leaks.
+October 2024: To debug DOM memory leaks, use the **Detached Elements** profiling type in the **Memory** tool, which has replaced the **Detached Elements** tool.
 
-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.
+The **Detached Elements** profiling type in the **Memory** 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** feature 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 with the Detached Elements profiling type](../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

@@ -41,7 +41,6 @@ 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) |
 | **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/landing/index.yml

@@ -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 with the Detached Elements profiling type
             url: ../memory-problems/dom-leaks.md
 
           - text: Understand security issues using the Security tool

microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md

@@ -1,5 +1,5 @@
 ---
-title: Debug DOM memory leaks with the Detached Elements tool
+title: Debug DOM memory leaks with the Detached Elements profiling type
 description: Use the Detached Elements tool in the Microsoft Edge DevTools to find and fix DOM memory leaks.
 author: MSEdgeTeam
 ms.author: msedgedevrel
@@ -8,20 +8,16 @@ ms.service: microsoft-edge
 ms.subservice: devtools
 ms.date: 09/18/2023
 ---
-# Debug DOM memory leaks with the Detached Elements tool
+# Debug DOM memory leaks with the Detached Elements profiling type
+
+<!-- todo: revise article to use Memory tool > Detached elements" profiling type instead of Detached Elements tool -->
 
 > [!IMPORTANT]
 > The **Detached Elements** tool is being deprecated.  Starting with Microsoft Edge 130, the **Detached Elements** tool has a message stating that the tool is deprecated; instead, in the **Memory** tool, in the initial **Select profiling type** screen, select the **Detached elements** option button.  The Edge-only Chrome DevTools Protocol (CDP) function `EdgeDOMMemory.getDetachedNodesIds` continues to work, but use `DOM.getDetachedDomNodes` instead.
 > 
 > In Microsoft Edge 133, the **Detached Elements** tool will be removed; instead, in the **Memory** tool, in the initial **Select profiling type** screen, select the **Detached elements** option button.  The CDP function `EdgeDOMMemory.getDetachedNodesIds` will be removed; use `DOM.getDetachedDomNodes` instead.
 
-<!-- todo:  
-When the **Detached Elements** tool is removed, delete the present article, redirect to new url:
-Add new article in Memory tool toc bucket: "Debug detached DOM element memory leaks with the Memory tool"
-or possibly reuse present .md file / url; change title & content
--->
-
-Use the **Detached Elements** tool to find detached elements that the browser cannot garbage-collect, and locate 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.
+Use the **Detached elements** profiling type in the **Memory** tool to find detached elements that the browser cannot garbage-collect, and locate 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.
 
 A memory leak can occur in your application when an element is no longer attached to the Document Object Model (DOM) tree, but is still referenced by some JavaScript running on the page. These elements are called *detached elements*.  For the browser to garbage-collect (GC) the detached element, the element must not be referenced from the DOM tree or from JavaScript code.
 
@@ -43,12 +39,10 @@ As explained in [Fix memory problems](index.md), memory issues affect page perfo
 <!-- ====================================================================== -->
 ## Open the Detached Elements tool
 
-To open the **Detached Elements** tool and load the demo page:
+To open the demo page and view its detached elements:
 
 1. Open the [Detached Elements demo application](https://microsoftedge.github.io/Demos/detached-elements/) in a new window or tab.
 
-   <!-- You can view the source files for the Detached Elements demo in the [MicrosoftEdge/Demos > detached-elements](https://github.com/MicrosoftEdge/Demos/tree/main/detached-elements) repo folder. -->
-
 1. To open DevTools, right-click the webpage, and then select **Inspect**.  Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS).  DevTools opens.
 
 1. In DevTools, in the **Activity Bar**, select the **Detached Elements** tab.  If that tab isn't visible, click the **More Tools** (![More Tools icon](./dom-leaks-images/more-tools-icon.png)) button:
@@ -59,7 +53,7 @@ To open the **Detached Elements** tool and load the demo page:
 <!-- ====================================================================== -->
 ## Get detached elements
 
-The **Get Detached Elements** (![The Get Detached Elements icon](./dom-leaks-images/get-detached-elements-icon.png)) button in the **Detached Elements** tool finds and displays all of the detached elements on a web page.
+The **Get Detached Elements** (![The Get Detached Elements icon](./dom-leaks-images/get-detached-elements-icon.png)) button in the **Detached Elements** feature finds and displays all of the detached elements on a web page.
 
 To find detached elements:
 
@@ -73,9 +67,9 @@ To find detached elements:
 
 1. Click the **Room 2** button:
 
-1. In the **Detached Elements** tool, click the **Get Detached Elements** (![The Get Detached Elements icon](./dom-leaks-images/get-detached-elements-icon.png)) icon.
+1. In the **Detached Elements** feature, click the **Get Detached Elements** (![The Get Detached Elements icon](./dom-leaks-images/get-detached-elements-icon.png)) icon.
 
-   The **Detached Elements** tool displays all of the detached elements of the page.  When you switch to **Room 2** in the demo application, the messages that were generated in **Room 1** are no longer attached to the DOM, but they are still referenced by JavaScript:
+   The **Detached Elements** feature displays all of the detached elements of the page.  When you switch to **Room 2** in the demo application, the messages that were generated in **Room 1** are no longer attached to the DOM, but they are still referenced by JavaScript:
 
    ![Get Detached Elements using the Detached Elements tool](./dom-leaks-images/get-detached-elements.png)
 
@@ -85,29 +79,29 @@ To find detached elements:
 
 Next, trigger garbage collection (GC) in the browser:
 
-1. In the **Detached Elements** tool, click the **Collect garbage** (![The 'Collect garbage' icon](./dom-leaks-images/collect-garbage-icon.png)) icon.
+1. In the **Detached Elements** feature, click the **Collect garbage** (![The 'Collect garbage' icon](./dom-leaks-images/collect-garbage-icon.png)) icon.
 
 1. Click the **Get Detached Elements** (![The Get Detached Elements icon](./dom-leaks-images/get-detached-elements-icon.png)) icon.
 
-When you select **Collect garbage**, the browser runs garbage collection. When you select **Get Detached Elements**, the **Detached Elements** tool displays all detached elements that cannot be garbage collected. These detached elements may be memory leaks if they aren't going to be reused by the application.
+When you select **Collect garbage**, the browser runs garbage collection. When you select **Get Detached Elements**, the **Detached Elements** feature displays all detached elements that cannot be garbage collected. These detached elements may be memory leaks if they aren't going to be reused by the application.
 
 
 <!-- ====================================================================== -->
 ## Identify the JavaScript code that retains detached elements
 
-Once you have found a detached element that cannot be garbage-collected, you can use the **Analyze** (![The Analyze icon](./dom-leaks-images/analyze-icon.png)) button in the **Detached Elements** tool to identify the JavaScript code running on the page that is still referencing the detached element. The **Analyze** button takes a heap snapshot and populates the **ID** of the detached element with its location in the heap.
+Once you have found a detached element that cannot be garbage-collected, you can use the **Analyze** (![The Analyze icon](./dom-leaks-images/analyze-icon.png)) button in the **Detached Elements** feature to identify the JavaScript code running on the page that is still referencing the detached element. The **Analyze** button takes a heap snapshot and populates the **ID** of the detached element with its location in the heap.
 
 For more information about heap snapshots, read [Record heap snapshots using the Memory tool](heap-snapshots.md).
 
 To identify the JavaScript code that references a detached element:
 
-1. In the **Detached Elements** tool, click the **Analyze** (![The Analyze icon](./dom-leaks-images/analyze-icon.png)) icon.
+1. In the **Detached Elements** feature, click the **Analyze** (![The Analyze icon](./dom-leaks-images/analyze-icon.png)) icon.
 
    The **Memory** tool opens in the **Quick View** toolbar, at the bottom of DevTools:
 
    ![Analyze Detached Elements in the Detached Elements tool](./dom-leaks-images/analyze-detached-elements.png)
 
-1. From the **Detached Elements** tool, select the **Id** field of a detached element.
+1. From the **Detached Elements** feature, select the **Id** field of a detached element.
 
    The **Memory** tool automatically selects the object in the heap that is referencing the detached element. We call these objects **Retainers**:
 
@@ -151,7 +145,7 @@ You can check for detached elements from different origins or frames using the *
 
 1. Select a different origin.
 
-The new origin is displayed in the **Detached Elements** tool.
+The new origin is displayed in the **Detached Elements** feature.
 
 
 <!-- ====================================================================== -->
@@ -167,4 +161,12 @@ Similarly, a feed in social media might detach elements as users scroll past the
 
 For long-running apps, small memory leaks of only a few kilobytes can noticeably degrade performance over time. Web developers who use the React framework know that React maintains a virtualized copy of the DOM. Failing to properly unmount components can potentially lead to an application leaking large parts of the virtual DOM.
 
-This demo app and its leaks are artificial. Test the Detached Elements tool on your production website or app. If you find potential problems with the Detached Elements tool, [contact the Microsoft Edge DevTools team](../contact.md) to send feedback about the **Detached Elements** tool and memory leak debugging.
+This demo app and its leaks are artificial. Test the Detached Elements tool on your production website or app. If you find potential problems with the Detached Elements tool, [contact the Microsoft Edge DevTools team](../contact.md) to send feedback about the **Detached Elements** feature and memory leak debugging.
+
+
+<!-- ====================================================================== -->
+## See also
+<!-- todo: all links in article -->
+
+* [Detached Elements demo application](https://microsoftedge.github.io/Demos/detached-elements/)
+* [MicrosoftEdge/Demos > detached-elements](https://github.com/MicrosoftEdge/Demos/tree/main/detached-elements) repo folder, to view the source files for the Detached Elements demo.

microsoft-edge/devtools-guide-chromium/memory-problems/index.md

@@ -30,7 +30,7 @@ Learn how to use Microsoft Edge and DevTools to find memory issues that affect p
 *  Identify detached DOM trees (a common cause of memory leaks) with **Heap snapshot**.
 *  Find out when new memory is being allocated in your JavaScript heap (JS heap) with **Allocation instrumentation on timeline**.
 
-See also [Debug DOM memory leaks with the Detached Elements tool](dom-leaks.md).
+See also [Debug DOM memory leaks with the Detached Elements profiling type](dom-leaks.md).
 
 
 <!-- ====================================================================== -->

microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md

@@ -38,7 +38,7 @@ last sync'd April 16, 2024
 |:---|:---|:---|:---|
 | CSS mirroring sourcemaps | Used for [Update .css files from within the Styles tab (CSS mirror editing)](../../visual-studio-code/microsoft-edge-devtools-extension/css-mirror-editing-styles-tab.md) for the DevTools extension for Visual Studio Code. | [/css-mirroring-sourcemaps-demo/](https://github.com/MicrosoftEdge/Demos/tree/main/css-mirroring-sourcemaps-demo) | n/a |
 | TODO app | Simple To Do app with vanilla JavaScript.  Used for screenshots in the [Microsoft Edge DevTools documentation](/microsoft-edge/devtools-guide-chromium/landing/), and for [Opening DevTools and the DevTools browser](../../visual-studio-code/microsoft-edge-devtools-extension/open-devtools-and-embedded-browser.md) for the DevTools extension for Visual Studio Code. | [/demo-to-do/](https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do) | [My tasks](https://microsoftedge.github.io/Demos/demo-to-do/) |
-| Detached elements | Chat-like demo.  Used for [Debug DOM memory leaks with the Detached Elements tool](../memory-problems/dom-leaks.md). | [/detached-elements/](https://github.com/MicrosoftEdge/Demos/tree/main/detached-elements) | [Simulate traffic](https://microsoftedge.github.io/Demos/detached-elements/) |
+| Detached elements | Chat-like demo.  Used for [Debug DOM memory leaks with the Detached Elements profiling type](../memory-problems/dom-leaks.md). | [/detached-elements/](https://github.com/MicrosoftEdge/Demos/tree/main/detached-elements) | [Simulate traffic](https://microsoftedge.github.io/Demos/detached-elements/) |
 | 3D View | Used for [Navigate webpage layers, z-index, and DOM using the 3D View tool](../3d-view/index.md). | [/devtools-3d/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-3d) | [Microsoft Edge DevTools 3D View tool demo](https://microsoftedge.github.io/Demos/devtools-3d/) |
 | Accessibility testing | Used for [Accessibility-testing features](../accessibility/reference.md). | [/devtools-a11y-testing/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-a11y-testing) | [Animal shelter](https://microsoftedge.github.io/Demos/devtools-a11y-testing/) |
 | DevTools issue: animating a CSS property that requires layout | Illustrates the **Issues** and **Elements** tools warning when CSS properties that require layout are animated. | [/devtools-animated-property-issue/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-animated-property-issue) | [Animated CSS property demo](https://microsoftedge.github.io/Demos/devtools-animated-property-issue/) |

microsoft-edge/devtools-guide-chromium/whats-new/2021/07/devtools.md

@@ -53,16 +53,18 @@ See [Apply color themes to DevTools](../../../customize/theme.md).
 <!-- Title: Introducing the Detached Elements tool -->
 <!-- Subtitle: Use the Detached Elements tool to find and fix DOM node memory leaks. -->
 
+October 2024 update: To debug DOM memory leaks, use the **Detached Elements** profiling type in the **Memory** tool, which has replaced the **Detached Elements** tool.
+
 A DOM node is considered "detached" when it is no longer attached to any element of the DOM but is still being retained in memory by Microsoft Edge. The browser cannot garbage-collect the element, because some JavaScript is still referencing the element even though it's no longer on the page or a part of the DOM.
 
-The new **Detached Elements** tool finds all of the detached elements on your page and displays them. You can expand and collapse a detached element to see the parent and child nodes that are also being retained. You can trigger the browser's garbage collection by selecting **Collect garbage** and validate that you have a memory leak when a detached element cannot be garbage-collected. Finally, you can jump into JavaScript that's referencing the detached element by taking a heap snapshot with the **Analyze** button.
+The **Detached Elements** profiling type in the **Memory** tool finds all of the detached elements on your page and displays them. You can expand and collapse a detached element to see the parent and child nodes that are also being retained. You can trigger the browser's garbage collection by selecting **Collect garbage** and validate that you have a memory leak when a detached element cannot be garbage-collected. Finally, you can jump into JavaScript that's referencing the detached element by taking a heap snapshot with the **Analyze** button.
 
 ![The Detached Elements tool](./devtools-images/detached-elements-tool.png)
 
 Update: This feature has been released and is no longer experimental.<!-- To turn on this experiment, go to **Settings** > **Experiments** and select the checkbox next to **Detached Elements**. -->
 
 See also:
-* [Debug DOM memory leaks with the Detached Elements tool](../../../memory-problems/dom-leaks.md)
+* [Debug DOM memory leaks with the Detached Elements profiling type](../../../memory-problems/dom-leaks.md)
 
 
 <!-- ====================================================================== -->