The Microsoft Edge team has created new tool that will allow users to debug memory leaks in its browser to help prevent slowdowns.
Memory leaks occur when an application’s JavaScript code retains more and more objects in memory that it no longer needs instead of releasing them for garbage collect (GC). For apps that run for a long time without being closed, small memory leaks of only a few kilobytes can add up to noticeably degrade performance over time according to a new blog post from Microsoft.
React, the open source JavaScript library for building front end user interfaces, maintains a virtualized copy of the DOM (Document Object Model). However, failing to properly unmount components can lead to an application leaking large parts of the virtual DOM.
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.
We’ve also highlighted the best browser, best anonymous browser and best proxy services