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:
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: