Microsoft Edge Developer Tools for Visual Studio Code
Show the browser's Elements and Network tool inside the Visual Studio Code editor and use it to fix CSS issues with your site and inspect network activity.
A Visual Studio Code extension that allows you to use the browser's Elements and Network tool from within the editor. The DevTools will connect to an instance of Microsoft Edge giving you the ability to see the runtime HTML structure, alter layout, fix styling issues, read console messages and view network requests. All without leaving Visual Studio Code.
Note: This extension only supports Microsoft Edge (version greater than 80.0.361.48)
You can use the extension either in an own window or embedded in your editor.
Table of Contents
For use inside Visual Studio Code:
Using the tools
Launching the browser via the side bar view
The extension operates in two modes - it can launch an instance of Microsoft Edge navigated to your app, or it can attach to a running instance of Microsoft Edge. Both modes requires you to be serving your web application from local web server, which is started from either a Visual Studio Code task or from your command-line. Using the
You can now use the high-fidelity tools to tweak your CSS and inspect network calls and go directly back to your code without leaving the editor.
Opening source files from the Elements tool
One of the features of the Elements tool is that it can show you what file applied the styles and event handlers for a given node.
The source files for these applied styles and attached event handlers appear in the form of links to a url specified by the browser. Clicking on one will attempt to open that file inside the Visual Studio Code editor window.
Getting Console information
The extension automatically forwards messages from the Developer Tools Console to Visual Studio Code. You can see them in the
Notice that this is a read-only experience. You can't use the Console like you would in the browser Developer Tools.
Setting up your project to show live changes in the extension
Out of the box the extension does not track live changes to the code you write. If you want the browser to automatically refresh when you changed a file, you need to set up a live reload environment. For this you need Node.js and npm on your machine.
Say you have a folder with your production files on your hard drive called
Preparation step: Install Node.js and the reload package
Attach the extension to your live reloading project
Changing Extension Settings
You can customize the extension to your needs. From version 1.1.6 onwards you can reach the Settings and read the Changelog via the
Turning off Network Inspection
If you don't want to see the Network Pane to inspect any network request of the attached browser you can turn it off in the settings and restart the extension.
Turning on Headless Mode
By default, the extension will launch the browser in its own window. This means you get an extra browser icon in your task bar and you need to turn on casting to see the browser inside the editor. You can also choose "headless mode" to not have the browser open in an own window, but embed itself directly into Visual Studio Code.
Note: In the past we had issues on Macintosh computers where the Microsoft Edge instance reported itself as "inactive" when the window wasn't visible. Using headless mode fixes that problem.
You can see an example of the change in the following screencast:
Other optional launch config fields
This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.
See CONTRIBUTING.md for more information.
Data and Telemetry
This project collects usage data and sends it to Microsoft to help improve our products and services. Read Microsoft's privacy statement to learn more.
Reporting Security Issues
Security issues and bugs should be reported privately, via email, to the Microsoft Security Response Center (MSRC) at firstname.lastname@example.org. You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Further information, including the MSRC PGP key, can be found in the Security TechCenter.