Microsoft Edge is adding a new tool that notifies users about which sites are making their browsers run slower. The tech giant has also announced that it is launching a new Detached Elements tool that users to spot memory leaks.

Microsoft Edge Update Brings Detached Elements Tool

According to a story by TechRadar, the team at Microsoft Edge has created new tools that are able to debug memory leaksin browsers to cause them to run slower.

To elaborate, memory leaks usually take place when an application's JavaScript code retains a lot of objects in its memory that are deemed unnecessary instead of throwing them away for garbage collect, which is otherwise known as GC.

 

For apps that are running for a long time without actually being closed by the user, small memory leaks of just a few kilobytes that up can cause the total performance to degrade over time, per Microsoft's new blog post.

DOM Parts Leaked

The open source JavaScript library, React, which is used for building front end user interfaces, still maintains a virtualized copy of the Document Object Model or DOM. Faily to properly unmount components, however, can lead to the application leaking huge parts of the virtual DOM.

Because of this, the team at Microsoft Edge worked together with Microsoft Teams to come up with the browser's brand new Detached Elements tool. The new tool can be used by to investigate and even resolve DOM memory leaks.

DOM Memory Leaks

Although there are some valid reasons for detaching elements, DOM memory leaks take place when an application keeps references towards more and more detached elements that are not being reused later on. 

As the code used in apps grows in complexity and size, it then becomes easier for mistakes to be made and to forget to clean things up. This eventually leads to keeping certain DOM elements in memory.

How to Enable Detached Elements Tool

This is a particular problem for a lot of long running applications. An example of this is when an email client detaches DOM elements whenever an email is opened and closed while the user keeps the app running for one whole week. 

When apps are left running for an extended period of time, this could result in high memory usage and then the eventual slow down of a user's device over time.

Microsoft's Detached Elements tool has actually been already available in Edge Canary ever since version 93. The new version of the tool is rolling out to a stable channel of Microsoft Edge when a newer version of the browse, version 97, launches within December. 

In order to access the new tool early, users will have to open DevTools in Edge by pressing the F12 button. Then, users will have to click the gear icon in order to access the DevTools Settings.

After that, look for Experiments located on the left side of Settings, type in "Detached Elements." and then click the tool in order to enable it.