Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Deprecate "Detached Elements" tool #3267

Merged
merged 7 commits into from
Sep 18, 2024
Merged

Deprecate "Detached Elements" tool #3267

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
591ef2f
start modifs
mikehoffms Sep 16, 2024
6e6bb33
clean up deprecation alert & comments
mikehoffms Sep 18, 2024
94cff6e
list format
mikehoffms Sep 18, 2024
9b48825
correct & clarify
mikehoffms Sep 18, 2024
6157146
condensed the alert
mikehoffms Sep 18, 2024
b352011
describe UI controls
mikehoffms Sep 18, 2024
3e36de1
downstream --> Edge
mikehoffms Sep 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,21 @@ ms.author: msedgedevrel
ms.topic: conceptual
ms.service: microsoft-edge
ms.subservice: devtools
ms.date: 07/05/2023
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 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.

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.
Expand Down