The Detached Elements Tool is used to find all detached elements in the JS code that cannot be garbage collected. Detached elements are those elements that are removed or are not attached to the DOM, but because in JS some objects are referencing these elements, the garbage collector in the browser cannot remove these elements, which leads to memory leaks. To eliminate this problem, we use the Detached Elements Tool, which displays all detached elements and provides a button to trigger garbage collection.
Benefits of the Detached Elements tool
The tools are used to analyze the reference objects to the detached elements. The various benefits of the tool are:
- Easy to use: The UI of the tool is simple to understand and use; the developers can get the hang of the tool in no time. The tool provides various buttons to analyze and eliminate the memory leaks caused by the detached elements.
- Tabular View: The tool displays all the detached elements in a tabular form with three sections, which are node, size, and ID. This table can easily be understood and viewed by the developers.
- Tigger Garbage Collection: You can manually trigger the garbage collector whenever you find detached elements with ID; this can lead the garbage collector to remove these detached elements. If these elements still contain an ID, then these elements cannot be garbage collected.
- Analyze: The detached elements that cannot be garbage-collected can be further analyzed using the memory tool by using the Analyze button.
- Reduce Memory Leaks: The tool is helpful for developers who miss memory leaks during development and also helps them check the list of detached elements so that they can manually remove references using the memory tool.
Opening the Detached Elements tool:
The tool is present in DevTools in the Edge browser. To open the tool, follow these steps:
Step 1: Using the Edge browser, visit the site where you want to use the tool. Now press “Ctrl+Shift+I” or F12 to open DevTools. Alternatively, to open DevTools, you can right-click on the page and click Inspect from the context menu that appears.
Step 2: Click the three vertical dots in the top-right corner of the DevTools. Now navigate to More Tools>Detached Elements to open the Detached Elements tab.
Note: The options may be grayed out when you first enter the Detached Elements tab; kindly refresh the page to activate these options.
Opening Detached Elements Tool
Using Detached Elements tool:
The tool provides various options to work with detached elements and also provides a table to display the results. Above the table, the target URL and the number of detached elements are present. Let’s move from left to right and understand each option below:
Options in Detached Element tool
Get Detached Elements
This button searches for all detached elements in the webpage and displays them in the table below. Click it if any interaction is done on the webpage. The tool does not automatically update the list of detached elements, as it will make the result table unreadable due to frequent changes.
Using Get Detached Elements Button
Collect Garbage
This button requests that the browser perform garbage collection of all possible detached elements. If in the table the detached elements have an ID, then those cannot be garbage collected and need to be analyzed using the memory tool.
Collect Garbage Button
Analyze
The Eye button is used to open the memory tool and select the object that references the detached element with respect to the heap memory. These objects are called retainers. In the memory tool, you can check the detached element with respect to the ID along with the detached element name. If you expand the tree of the detached element, you can check the referenced object or retainer by going to the Sources tool and clicking the blue link to the left of the id.
Analyze Button
Detach Elements
The button is used to remove the child elements of a detached element. This is required because detached elements can also have child elements connected to them, so these child elements are also considered detached elements.
Detach Elements Button
Select Target
This drop-down list used to change the target URL used by tool to check different origin or frames in the webpage.
Select Target Drop-Down List
Conclusion
Most browser uses garbage collector to unallocated unused memory but the garbage collector cannot remove the detached elements. These detached elements can pile up which in result can degrade the browsers performance due to high consumption of memory. In Edge browser you can use the Detached Elements tool can be used to eliminate these detached elements and reduce the memory consumption which will result in increase site performance and user experience.