From 591ef2fa31e01ac47b6b0b6466379f94fad755d8 Mon Sep 17 00:00:00 2001 From: Michael Hoffman Date: Mon, 16 Sep 2024 14:37:23 -0700 Subject: [PATCH 1/7] start modifs --- .../memory-problems/dom-leaks.md | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md index 97d94af4fb..26dafa0702 100644 --- a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md +++ b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md @@ -6,10 +6,23 @@ ms.author: msedgedevrel ms.topic: conceptual ms.service: microsoft-edge ms.subservice: devtools -ms.date: 07/05/2023 +ms.date: 09/16/2023 --- # Debug DOM memory leaks with the Detached Elements tool +> [!IMPORTANT] +> The **Detached Elements** tool is being deprecated and eventually removed. The same functionality is now available in the **Memory** tool instead. Deprecation period: +> * Microsoft Edge 130: The **Detached Elements** tool is still available, but the **Memory** tool is recommended instead. +> * Microsoft Edge 133: The **Detached Elements** tool is removed. +> +> The downstream-only CDP function `EdgeDOMMemory.getDetachedNodesIds` is deprecated; for the moment, it still works, but use `DOM.getDetachedDomNodes` instead. + +todo: +* When the **Detached Elements** tool is removed, delete the present article, redirect to a new page: +* Add a new page, under the Memory tool TOC bucket, which describes how to debug detached DOM element memory leaks with the Memory tool. eg h1: + * Debug detached DOM element memory leaks with the Memory tool + + 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. 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. From 6e6bb336a2548db0f4c5dfc0cc1e40f94b629fd6 Mon Sep 17 00:00:00 2001 From: Michael Hoffman Date: Wed, 18 Sep 2024 07:16:56 -0700 Subject: [PATCH 2/7] clean up deprecation alert & comments --- .../memory-problems/dom-leaks.md | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md index 26dafa0702..d55abd104e 100644 --- a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md +++ b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md @@ -6,22 +6,24 @@ ms.author: msedgedevrel ms.topic: conceptual ms.service: microsoft-edge ms.subservice: devtools -ms.date: 09/16/2023 +ms.date: 09/18/2023 --- # Debug DOM memory leaks with the Detached Elements tool > [!IMPORTANT] -> The **Detached Elements** tool is being deprecated and eventually removed. The same functionality is now available in the **Memory** tool instead. Deprecation period: -> * Microsoft Edge 130: The **Detached Elements** tool is still available, but the **Memory** tool is recommended instead. -> * Microsoft Edge 133: The **Detached Elements** tool is removed. -> -> The downstream-only CDP function `EdgeDOMMemory.getDetachedNodesIds` is deprecated; for the moment, it still works, but use `DOM.getDetachedDomNodes` instead. - -todo: -* When the **Detached Elements** tool is removed, delete the present article, redirect to a new page: -* Add a new page, under the Memory tool TOC bucket, which describes how to debug detached DOM element memory leaks with the Memory tool. eg h1: - * Debug detached DOM element memory leaks with the Memory tool - +> The **Detached Elements** tool is being deprecated. In Microsoft Edge 130, the **Detached Elements** tool has been removed; use the **Memory** tool instead, which contains the same functionality. The downstream-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; use the **Memory** tool instead. The CDP function `EdgeDOMMemory.getDetachedNodesIds` will be removed; use `DOM.getDetachedDomNodes` instead. +> +> Status of Microsoft Edge channels as of September 18, 2024: +> Edge Stable 128 - **Memory** tool lacks **Detached Elements** functionality. +> Edge Canary 130 - **Memory** tool has **Detached Elements** functionality. + + 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. From 94cff6eee36ae55e3440b8f04af2cf29c7a05431 Mon Sep 17 00:00:00 2001 From: Michael Hoffman Date: Wed, 18 Sep 2024 07:41:02 -0700 Subject: [PATCH 3/7] list format --- .../devtools-guide-chromium/memory-problems/dom-leaks.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md index d55abd104e..e37dd29020 100644 --- a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md +++ b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md @@ -16,8 +16,8 @@ ms.date: 09/18/2023 > In Microsoft Edge 133, the **Detached Elements** tool will be removed; use the **Memory** tool instead. The CDP function `EdgeDOMMemory.getDetachedNodesIds` will be removed; use `DOM.getDetachedDomNodes` instead. > > Status of Microsoft Edge channels as of September 18, 2024: -> Edge Stable 128 - **Memory** tool lacks **Detached Elements** functionality. -> Edge Canary 130 - **Memory** tool has **Detached Elements** functionality. +> * Edge Stable 128 - **Memory** tool lacks **Detached Elements** functionality. +> * Edge Canary 130 - **Memory** tool has **Detached Elements** functionality. Edge --- .../devtools-guide-chromium/memory-problems/dom-leaks.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md index df75c2a5b1..04ab767054 100644 --- a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md +++ b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md @@ -11,7 +11,7 @@ ms.date: 09/18/2023 # Debug DOM memory leaks with the 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 downstream-only Chrome DevTools Protocol (CDP) function `EdgeDOMMemory.getDetachedNodesIds` continues to work, but use `DOM.getDetachedDomNodes` instead. +> 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.