New tool in Microsoft Edge DevTools lets you find and fix DOM memory leaks

The Microsoft Edge team has introduced a new Detached Elements tool in Microsoft Edge DevTools that lets you investigate and resolve DOM memory leaks in your web app.

According to Microsoft, a DOM memory leak occurs when an application keeps references to more and more of these detached elements, without actually reusing them later. As application code grows in size and complexity, it becomes easier to make mistakes and forget to clean things up, which could lead to unknowingly keeping DOM elements in memory.

"This is particularly a problem for long-running applications. Imagine an email client that detaches DOM elements every time an email is opened and closed. If the user keeps the app running for a whole week, this could amount to a really high memory usage which can slow down the entire device over time, especially as the detached elements may carry a lot of data with them," the company explained in a blog post.

The new tool, developed by the Microsoft Edge team and Microsoft Teams, detects and displays the detached elements on a page. The Detached Elements panel is available starting with Microsoft Edge 97.

The new Detached Elements Tool in Microsoft Edge DevTools helps you find and fix DOM memory leaks in your web app. Learn more on the blog: https://t.co/MErWs7iu0Z

— Microsoft Edge Dev (@MSEdgeDev) December 9, 2021