I’ve been using Visual Studio Code enjoyably for several years, but the Microsoft Edge Tools for VS Code extension has brought web development tooling to another level. This extension was game-changing enough for me that I made Edge my daily driver browser for web development work, replacing Chrome. Early versions of VS Code did not really have any out of the box support for running and debugging applications; it was an extensible code editor, not an integrated development environment. Microsoft and community developed extensions added the features and various language/framework support users needed. I used the now-deprecated VS Code Debugger for Chrome extension for development with Angular and React for a number of years, and while it worked well enough, there were a few frustrations I had at time time that kept it from being a really great user experience. VS Code evolved over the years to include more and more built-in support for JavaScript & browser debugging, which improved the experience and further drove adoption of this versatile editor among web developers.
Not too long ago, I discovered the Microsoft Edge Tools for Visual Studio Code. This extension brings tighter integrations between Microsoft’s Edge browser and VS Code, providing a more seamless development and debugging experience between the two apps, and further blurring the line between a capable code editor and an IDE. If you’re used to Chrome’s developer tools, Edge’s tools are nearly identical. Edge even has some additional features like popular light and dark color themes, including Solarized, Monokai, and others. While I had been a user of Edge prior to installing this extension, most Chrome users would find Edge familiar and intuitive to use without major interruption to their normal workflow. And because Chromium-based browsers all use the Blink browser engine, you can be confident that JavaScript support will be the same, and page content will render the same in Edge as it does in Chrome. If you don’t already have Edge and VS Code installed, visit their homepages to get the latest version for your OS:
Note: if you’re using Linux, install the Microsoft-provided .deb package, .rpm package, or the tar.gz for Edge and VS Code, not a Flatpak or Snap version. These tend to be more difficult to work with as a developer, as permissions issues can cause headaches with getting extensions to work, attaching debuggers, and accessing files.
Here’s how I configured VS Code and the Edge Tools extension for general web development on my machine. I’m using Pop!_OS 22.04, but this will also apply to Ubuntu, and other Debian-based distros. I’m also using a similar configuration on Windows, but I have not tested on macOS. With VS Code open, search for “Microsoft Edge Tools for VS Code” under Extensions and install it:
One of the coolest features of this extension is the ability to debug static content fully within VS Code, with zero configuration and no other dependencies. To verify this, I made a small app using Vue.js, and started a debugging session with the Edge Tools extension by simply right clicking the root “index.html” file and selecting “Open with Edge.” I can set breakpoints, step thru the code, view network traffic, inspect data and page elements, modify CSS, and more – all within VS Code!
This is a neat feature – a good use case might be taking some working sample code out of StackBlitz, CodePen, etc. and running/debugging it on your local machine to experiment with a snippet before integrating into a larger project. Most developers are going to want a more configurable set up however, as this quick debug config is pretty limited. I immediately ran into an issue with a particular project where I was unable to configure a 3rd party authentication service to work when running the app locally (read more about the issue on this StackOverflow question I posted). The Edge Tools extension uses a url with a “file://” scheme, and the auth service configuration did not allow such a url to be set as the callback. I needed to have a proper localhost web server running so that my app would have a url like “http://localhost:port”, which was allowed by the auth service. To accomplish this, I installed the Live Server extension for VS Code. This is a lightweight and easy to use local development web server and it can also be found and installed under Extensions in VS Code:
The Live Server extension is not strictly necessary for the Edge Tools, however. If you are using a framework like Angular, React, Vue.js, etc. you may be using Node.js and/or various CLI tools as part of your development stack to build and serve the app. VS Code’s built-in Node.js support and the Edge Tools extension integrate very nicely with projects configured in this way, and the the examples below still apply to projects that do not use Live Server.
To further configure the debug settings, it’s advisable to add some debug configurations to the VS Code “launch.json” file. This allows easy one-click debugging for any number of desired configurations, and is especially useful with sharing run and debug configs with teammates. The Edge Tools extension makes this easy by automatically adding them, creating a “launch.json” file if it does not exist. Click the extension’s icon on the left hand panel, and then click the “Generate launch.json” button:
If you already have an existing “launch.json” file in your project, click the “Configure launch.json” button to add additional configurations to the file:
This will update the “launch.json” file and add a couple options to the”Run and Debug” menu:
The “launch.json” entries are not quite complete – the url of the project must be specified. I also set an additional Edge runtime argument, and set some project folders which should be ignored during debugging with the “skipFiles” property:
Having the browser window, the browser dev tools, and a code editor open all within VS Code is a cool feature, but I needed a little more screen real estate to effectively run and debug an app. Fortunately, the Edge Tools extension also works with a stand-alone instance of the Edge browser. I found this gave me all the advantages of “traditional” web development using a browser and its built-in dev tools alongside my code editing environment, but with an enhanced experience because of the tight integrations between Edge and VS Code. To accomplish this, open the Edge Tools extension settings, and ensure “Headless” mode is checked:
Start Live Server by right clicking the root “index.html” > Open with Live Server, or clicking “Go Live” in VS Code’s status bar. If you’re using an alternate tool or framework to build and serve your app, start it as you normally would (ex: ng serve).
Select the “Launch Edge and attach DevTools” debug configuration from the debug menu and start it up:
An instance of Edge will be started with the VS Code debugger attached, and all the debugging capabilities are still accessible.
Having the Edge Dev Tools tab open in VS Code isn’t necessary – that can be closed without affecting the current debugging session. It can be re-opened via the debug toolbar menu > “Open Browser Devtools.”
I personally like the integration of the Edge dev tools window in VS code, and I frequently use both in my development workflow. I find that the Edge console can be a good supplement for the built-in debug console. While debugging, I often alternate between different window configurations. Sometimes I like just using the built-in console like this:
And sometimes I use a window configuration like this, with the Edge Dev Tools’ “Network” tab displayed. In the example below, I am able to inspect the current web socket connection for a streaming service in my app, and view the individual messages within VS code:
And for even greater flexibility, the dev tools can also be opened from the running Edge instance and used as they normally would. In fact, the integrated Edge dev tools window in VS Code is actually a screen cast of the regular browser dev tools. Another typical configuration I use looks like this, where VS Code only has various code files open, and I’m doing most of the debugging via the external Edge dev tools. Everything still works as expected in this configuration; breakpoints can be set either in VS code or the browser dev tools window but I am able to use just the browser for all testing and debugging if desired. Here is how that config looks on my Windows machine – Edge and VS Code have nearly identical UIs across platforms, which makes it great for developers who use multiple operating systems:
Another feature not to be overlooked is the in-line code analysis provided by the Edge Tools extension. I have found this is to be a good supplement to ESLint. This feature is fully integrated into into the “Problems” tab; here is how the extension displays errors and issues:
One final recommendation I have for using screen real estate as efficiently as possible is to dock the debug toolbar. I find there really isn’t a good place for it when set to “floating.”
Open the VS Code settings from File > Settings > Features > Debug > Tool Bar Location and set this value to “docked.”
With this setting, the debug toolbar is docked on the left hand panel, and is only visible when “Run and Debug” is selected in VS Code.
I also have the StatusBar Debugger extension installed which, as the name implies, adds debug controls to the VS Code status bar. I like having the supplementary, but non-intrusive, debug controls on the UI when the “Run and Debug” panel is not active in VS Code as this is a good compliment to the debug keyboard shortcuts.
The Edge Tools for VS Code extension has proven to be extremely versatile, and I’ve made the switch to using this as my main web development environment for my day to day work. The only major drawback I observed was that the Vue.js Devtools Edge extension is not accessible from the Edge dev tools tab in VS Code. While I have not verified this, I would imagine other similar extensions, such as the React Developer Tools, behave the same way. I did not find this to be that large of an inconvenience however, as the Vue.js extension is still fully usable from within the normal Edge dev tools window. Despite this, I still highly recommend any web developer give this a try. Here are some additional links for further reading on configuring and using the Microsoft Edge Tools VS Code extension:
Matt Callahan's Blog 📝 
2 thoughts on “The Microsoft Edge Dev Tools extension for VS Code is so awesome that I’m ditching Chrome for web development”