Microsoft’s Edge browser has evolved tremendously over the years. It went from using an internal engine to switching to Chromium and improving on what was already a solid foundation. However the web experience across Windows remained a bit fragmented. As Microsoft gets ready to close the page on its past with the end of support for Internet Explorer looming just a few weeks away; they continue to evolve and innovate with awesome features and functionality on Edge. Here are some of the things already here, and some to come for Edge to help developers work smarter and more efficiently.
Powerful Developer Tools (DevTools)
Whether you’re building with frameworks and languages from Microsoft like .NET and C# or third party frameworks and libraries like VueJs, Angular and React. If you are targeting the web, you will undoubtedly find yourself using Edge’s developer tools (F12). This could be adjust your layout, troubleshoot an error or simply to inspect the performance on your web application. One thing is for certain, in its current state, this tool can be a bit overwhelming.
As more and more people get to building applications with approaches like low-code/no-code. It is becoming increasingly necessary to simplify the tools which support building these experiences. The team at Microsoft recognizes this challenge and has began to make improvements to the DevTools to that aim.
A new compact and customizable Activity Bar is introduced in the new, simpler UI. The Activity Bar employs separate tool icons to simplify navigation, and you can personalize it with any of the 30+ accessible tools. More changes are on the way for the streamlined UI, including support for our Tooltips overlay, which displays information about a panel just by hovering over it.
Detached Elements tool
One particularly cool and useful new feature is the Detached Elements tool. This can help developers build more efficient and performant applications. One of the issues it aims to address is memory leaks. Specifically a DOM memory leak; for those unaware this happens when an application maintains references to an large number of these detached elements without actually reusing them.
This is especially problematic for long-running programs. Consider an email client that removes DOM elements whenever an email is opened and closed. If the user leaves the app running for a week, this could result in extremely high memory utilization, which can slow down the entire device over time, especially since the detachable elements may contain a large amount of data. As the amount and complexity of application code grows, it becomes easier to make mistakes and overlook to clean things out, which could result in DOM elements being stored in memory inadvertently.
To wrap it up
Visual Studio already has fantastic integration with the browser to help developers build and troubleshoot applications. These improvements to Edge’s DevTools is amazingly welcomed icing on the cake. What do you think about these improvements? Do you see them having a positive impact in your development flow? Give us your thoughts below.
For more information on this, and other cool new features coming to Edge DevTools, check out the What’s new in Microsoft Edge DevTools page from Microsoft.
