Debug DOM memory leaks with the Detached Elements tool
For more information about heap snapshots and detached elements, read Discover detached DOM tree memory leaks with Heap Snapshots.
As explained in Fix memory problems, memory issues affect page performance, including memory leaks, memory bloat, and frequent garbage collections. Symptoms for your users include:
- The performance of a page gets progressively worse over time.
- The performance of a page is consistently bad.
- The performance of a page is delayed or appears to pause frequently.
Open the Detached Elements tool
To open the Detached Elements tool and load the demo page:
Open the Detached Elements demo application in a new window or tab.
To open DevTools, right-click the webpage, and then select Inspect. Or, press
I(Windows, Linux) or
I(macOS). DevTools opens.
In DevTools, on the main toolbar, select the Detached Elements tab. If that tab isn't visible, click the More tabs () button, or else the More Tools () button:
Get detached elements
The Get Detached Elements () button in the Detached Elements tool finds and displays all of the detached elements on a web page.
To find detached elements:
In the demo application, make sure that the Room 1 button is selected.
In the demo application, click the Simulate high traffic button.
After some messages are generated and displayed in the demo application, click the demo's Stop button:
Click the Room 2 button:
In the Detached Elements tool, click the Get Detached Elements () icon:
Trigger garbage collection
Next, trigger garbage collection (GC) in the browser:
In the Detached Elements tool, click the Collect garbage () icon.
Click the Get Detached Elements () 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.
For more information about heap snapshots, read Record heap snapshots using the Memory tool.
In the Detached Elements tool, click the Analyze () icon.
The Memory tool opens in the bottom panel of DevTools.
From the Detached Elements tool, select the Id field of a detached element.
The Memory tool in the bottom panel automatically selects the object in the heap that is referencing the detached element. We call these objects Retainers:
In the Memory tool in the bottom panel, select the link room.js:13.
The Sources tool opens in the top panel to line 13 of the file room.js.
unmountedarray is the object that is referencing the detached element:
You have now identified the retainer that is preventing the detached element from being garbage-collected by the browser!
Identify the DOM node causing others to be retained
To identify the culprit node in a detached tree that is causing the entire tree to be retained:
Click the Detach Elements () icon to destroy the parent-child links inside the detached tree:
Click the Collect garbage () icon.
Parent-child links are removed inside the detached tree.
Change the selected target to a different origin
You can check for detached elements from different origins or frames using the Selected target dropdown list.
Click the Selected target dropdown list:
Select a different origin.
The new origin is displayed in the Detached Elements tool.
The following image shows detached elements in the form of messages that are reattached when a user navigates from Room 2 back to Room 1:
Similarly, a feed in social media might detach elements as users scroll past them, and reattach them to the DOM when users scroll back up. Detached elements aren't always an indication of a memory leak, and memory leaks aren't always caused by detached elements.
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 to send feedback about the Detached Elements tool and memory leak debugging.