For this reason, the Microsoft Edge team worked together with Microsoft Teams to build the browser's new Detached Elements tool that allows users to investigate and resolve DOM memory leaks.
Although there are valid reasons for detaching elements, DOM memory leaks occur when an application keeps references to more and more detached elements without actually reusing them later. As the code used in applications grows in size and complexity, it becomes easier to make mistakes and forget to clean things up which could unknowingly lead to keeping DOM elements in memory.
This is particularly a problem for long running applications. For instance, if an email client detaches DOM elements every time an email is opened and closed and a user keeps the app running for a whole week, it could amount to really high memory usage and slow down a user's business laptop or workstation over time.
While Microsoft's new Detached Elements tool has been available in Edge Canary since version 93, it will roll out to the stable channel of Microsoft Edge when version 97 of the browser launches this month.
To access this new tool early though, you'll first need to open DevTools in Edge by pressing F12 and click on the gear icon to open the DevTools Settings. From here, navigate to Experiments on the left side of the Settings pane, type in Detached Elements and click on the tool to enable it.
Are you a pro? Subscribe to our newsletter
Sign up to the TechRadar Pro newsletter to get all the top news, opinion, features and guidance your business needs to succeed!
After working with the TechRadar Pro team for the last several years, Anthony is now the security and networking editor at Tom’s Guide where he covers everything from data breaches and ransomware gangs to the best way to cover your whole home or business with Wi-Fi. When not writing, you can find him tinkering with PCs and game consoles, managing cables and upgrading his smart home.