Microsoft Edge Tools is a free VS Code extension that brings developer tools inside it that you can use to inspect any website that you are developing or is already deployed. With the new Microsoft Edge Tools extension of VS Code you can now inspect HTML elements right inside VS Code editor and then make changes to them as well. This is a simple extension and you can either open a new window in Microsoft Edge Browser for attach to an existing browser window to do site inspection. It also gives your visual Inspector that you cannot use to explore the HTML elements to do whatever you want.
Developer tools is an important piece of software for web developers and testers to inspect website elements and decide what changes need to be made. And you can now bring this functionality in VS Code itself while developing a website. In just one click, you can open the DevTools inside VS Code editor and then start manipulating CSS and HTML of the website. This is as simple as that. Additionally, we can also take the help of Microsoft Edge Debugger extension to assist you while inspecting HTML and CSS elements on the web pages.
How to Bring DevTools in VS Code with Microsoft Edge Tools Extension?
You can install this extension from Visual Studio Code marketplace using this link. Or, you can run the listed command there to install the extension. After you have installed the extension, the Microsoft Edge icon will appear only left sidebar as you can see the screenshot below. But do note that Microsoft Edge is not available on Linux. Which is why, you will have to install and use Microsoft Edge Tools on Windows for a Mac computer.
Now, you just have to open a window in the browser and then the corresponding DevTools will it start working. To do that, just go to the Microsoft Edge icon in VS Code and then click on the plus icon and a new browser window will open up. You just enter whatever URL that of the website for which you want to expect code for. After the website loads, the HTML elements will start appearing there. And you can then inspect them for making changes and see them reflected in real time.
Apart from HTML elements, you can also see and inspect event listeners on the page. It shows you the complete list of event listeners that it finds on the website and then you can make any changes in it and inspect them in any way you want. You can see the screenshot below to understand how event listeners are shown in this extension.
In this way, you can use this simple and powerful developer tools extension right inside Visual Studio Code without any hassles. You can simply integrate the DevTools and do whatever you want by manipulating web page elements. It also shows network requests but I hope that will improve in the later versions of the extension. As I have already mentioned that you cannot use it on Linux, so if you are in Linux user then you will have to wait for Edge to officially arrive for the platform.
Closing thoughts:
Using developer tools inside the browser is fine but to use it inside VS Code like editor is something really exciting and useful for all kinds of web developers. If you are one of those web developer then just get this extension right away and start using it to inspect browser elements. Make changes in those elements and see the changes reflected in real time. There are some other miscellaneous setting in the extension that you can explore on your own, such as headless mode.
