Microsoft Edge DevTools extension for Visual Studio Code

The Microsoft Edge DevTools extension for Visual Studio Code lets you use the Microsoft Edge Browser and Developer Tools right from within Visual Studio Code. Visual Studio Code includes built-in support for JavaScript, TypeScript, and Node.js, so it's a great tool for web developers. Visual Studio Code is a lightweight but powerful source code editor that's available for Windows, Linux, and macOS.

The extension allows you to:

Task	Section
Get live analysis of problems in your source code.	Inline and live issue analysis
Start a new browser instance with DevTools for your project.	Opening a browser instance in the extension
Emulate different devices and see your project in different display modes.	Device and state emulation
View the runtime DOM structure and layout of your page using the Elements tool.	Opening source files from the Elements tool
Analyze and change CSS styles of your project with live preview and live changes to your project's source files.	Syncing live changes from the Styles tool by using CSS mirror editing
Analyze site traffic using the Network tool.	Network tool integration
Log information, try out JavaScript, and access the Window/DOM using the Console tool.	Console integration
Inspect storage and Service Workers using the Application tool.	Application tool integration
Use the extension in the Visual Studio Code debugging workflow.	Automatically opening the browser and DevTools when debugging in Visual Studio Code

Installing the Microsoft Edge DevTools extension

To install the Microsoft Edge DevTools extension from within Visual Studio Code:

1. In Visual Studio Code, navigate to Extensions. To do this, you can press Ctrl+Shift+X on Windows/Linux or Command+Shift+X on macOS.

2. Search the Marketplace for the extension Microsoft Edge Tools for VS Code, select the extension, and then select Install:

   

Or, you can download the Microsoft Edge DevTools extension from Visual Studio Marketplace.

Inline and live issue analysis

Issues in your source code are highlighted with wavy underlines. You can inspect the issue and get detailed information about what the problem is, how to fix it, and where to find more information. To inspect the issue, select the code that has the wavy underline:

To see all the issues in the file, select View Problem:

The Problems tab in the lower panel lists all the issues in the currently open files:

Live updating of issues reporting

Issues are evaluated live while you edit your code. As you type, you get feedback about any issues that are found, and how to fix them:

Modes for using Microsoft Edge DevTools in Visual Studio Code

You can use this extension in one of three modes:

• Launch Microsoft Edge in a new window, and go to your web application.

• Attach to a running instance of Microsoft Edge.

• Open a new instance of Microsoft Edge inside Visual Studio Code.

Opening a browser instance in the extension

There are various ways to start a new browser session in the extension, described in the subsections below.

By right-clicking an HTML file in the Explorer

In the Explorer of Visual Studio Code, right-click an HTML file, select Open with Edge, and then select Open Browser or Open Browser with DevTools:

By clicking the Launch Instance button

As another way to open a browser instance:

1. Click the Microsoft Edge Tools icon in the Activity Bar. This lets you launch an instance of Edge or generate a launch.json file to automate the debugging workflow:

1. Then click the Launch Instance button. Both a browser preview window and the Edge DevTools tab open in Visual Studio Code:

Opening the browser as part of a debugging session

Another way to open a browser instance is to open the browser as part of a debugging session. See Use the extension with the Visual Studio Code debugging workflow below.

The extension opens a new browser as an embedded browser in Visual Studio Code. This Devtools: Browser preview tab can be moved anywhere within the editor. You can use this tab side by side with your source code, or split the panes and have the browser preview below your code:

Opening an external browser window (headless mode)

If you want to have an external browser window, you can change the default setting. Select Settings > Headless mode and then select the checkbox, to open the browser in headless mode:

Device and state emulation

In the Edge DevTools: Browser preview tab, the emulation toolbar on the bottom enables you to simulate different environments:

Emulate Devices dropdown menu

In the Emulate devices dropdown menu, you can select from a number of different devices. When you select a device, the viewport resizes to the correct measurements and simulates the touch interface. For example, there are several emulated iPhone layouts:

Width and Height dropdown menus

Click the Width and Height dropdown menus to change the viewport dimensions:

Rotate button

Click the Rotate button () to rotate the viewport.

Emulate CSS Media Features button

To emulate CSS media queries, click the Emulate CSS media features () button. This button enables you to test how your product looks in print mode. You can switch between dark and light mode, and emulate forced colors:

Emulate Vision Deficiencies button

Click the Emulate vision deficiencies () button to try the experience of the current web project with different visual deficiencies. This button lets you test your product in a blurred mode or in different color deficiencies:

Opening source files from the Elements tool

One of the features of the Elements tool is that it displays the source file that applied styles and event handlers to a selected node in the DOM tree. Source files appear in the form of links to a URL. Clicking a filename link opens that file in the Visual Studio Code editor:

Syncing live changes from the Styles tool by using CSS mirror editing

The Styles tool in Microsoft Edge DevTools is excellent for debugging and tweaking your CSS. One problem is that although these changes show up live in the browser, they aren't reflected in your source files. This means that at the end of your CSS debugging session, you need to copy and paste what you changed back into your source files.

CSS mirror editing is a feature of the Microsoft Edge DevTools extension that works around that problem. Any change made in the Styles tool also changes the file in your workspace. CSS mirror editing is enabled by default in the extension.

You can edit any selector or create new selectors in the Styles tool, and all changes are automatically mirrored in the correct CSS source file. The extension only changes the downloaded copy of the file; it doesn't automatically save the changes back to your hard drive. This is a security measure to make sure you don't accidentally overwrite any of your code.

Example of mirroring changes from the Styles tool to a CSS source file

In the following example, we have index.html currently open in Visual Studio Code, and the Microsoft Edge DevTools extension is open. We select the flexbox icon in the .searchbar CSS selector, and then change the flex-direction to column. As as result, we not only see the change in the browser and in DevTools (the first image below), but Visual Studio Code also automatically navigates to the correct style sheet file and the appropriate line number, and inserts the flex-direction: column CSS code (the second image below):

Changing the CSS setting created a new line of code in the correct CSS source file:

Enabling CSS mirror editing

To enable and disable CSS mirror editing:

1. In the Edge DevTools tab, go to the Elements tool, and then go to the Styles panel.

2. Select or clear the CSS mirror editing checkbox.

Or, open the Command Menu, start typing the word mirror, and then select Microsoft Edge Tools: Toggle mirror editing on|off for CSS files in workspace:

Sourcemap support

CSS Mirroring also supports abstractions like Sass or CSS-in-JS when you have set up your project to produce sourcemaps. We have a tracking issue on GitHub and welcome any feedback on how this could be improved: CSS Mirror Editing with Sourcemaps: Known Issues and Feedback.

Network tool integration

The Network tool allows you to monitor network traffic and change network conditions of your application right inside Visual Studio Code.

Use the Network tool to:

• Analyze the network traffic and find out why some resources aren't loaded.

• Simulate different network conditions, such as being offline or having a slow connection.

• Disable any caching that might make it hard to debug your application.

• Simulate different user agents to see how your product appears to a search engine bot or a browser that you can't test in.

Console integration

The Console tool is available inside the extension and you can do everything you are used to when using DevTools inside the browser.

You can see your log messages, access the window object and use the DOM interaction convenience methods. You can also filter the Console and set live expressions.

Console side-by-side with other tools

You can also use the Console alongside the Elements tool if you open the Console in the lower panel:

Console during Run and Debug

If you launch the extension from the Run and Debug workflow, the Debug Console of Visual Studio Code gives you most of the functions of the DevTools Console inside of Visual Studio Code, but no filtering options and a more basic results display:

Application tool integration

The Application tool allows you to inspect the various parts of your application.

Use the Application tool to:

• Check different storage options such as Cookies, LocalStorage, SessionStorage and IndexedDB.

• Analyze the cache of your application.

• Analyze services like Notification, Payment handler, or background sync.

Use the extension with the Visual Studio Code debugging workflow

JavaScript debugging is built in to Visual Studio Code. You can debug in Chrome, Microsoft Edge, or Node.js without installing any other extensions. If you debug using Microsoft Edge, you can start Microsoft Edge DevTools from the JavaScript debugger.

1. To start debugging, do either of the following:

   • Press F5.
   • On the menu bar, click the Debug icon, and then click the Run and Debug button, as shown below.
   • Open the Visual Studio Code command palette, start typing the word debug, and then select Debug: Open Link.

   

2. Select Edge. On the debug toolbar, notice the Inspect button:

   

3. Select Inspect to open Microsoft Edge DevTools inside Visual Studio Code.

   The first time you select Inspect, the editor prompts you to install the extension, Microsoft Edge Developer Tools for Visual Studio Code.

   After the Microsoft Edge DevTools extension is installed, when you select Inspect, Microsoft Edge DevTools opens inside of Visual Studio Code:

   

Automatically opening the browser and DevTools when debugging in Visual Studio Code

To debug your project, you might want to change the default page that opens in Microsoft Edge in Visual Studio Code. To change the default page to your project's website:

1. In Visual Studio Code, select File > New Window. Notice that no folder is open.

2. On the Activity Bar, select Microsoft Edge Tools.

3. In the Microsoft Edge Tools: Targets panel, click the open a folder link.

4. Select your project folder with the new default page to display when you begin debugging in Visual Studio Code.

   The first time you open a folder, you must confirm that you trust the authors of files in this folder. You can also select the checkbox Trust the authors of all files in the parent folder:

   

   The first time you complete this process, you must also select Microsoft Edge Tools again.

   The Microsoft Edge Tools: Targets panel now displays two buttons: Launch Instance and Generate launch.json:

   

5. Select Generate launch.json to create a launch.json in your project.

6. In launch.json, add the URL of your project. If you leave URL empty, the default page is displayed.

7. Save launch.json.

When you choose to debug your project in Visual Studio Code it will automatically launch the browser and open the Developer Tools showing the URL you specified in your launch.json.

See also

• Launch configurations in the Debugging article for Visual Studio Code.

Changing the extension settings

You can customize the Visual Studio Code extension to your needs.

1. In Visual Studio Code, on the Activity Bar, select Microsoft Edge Tools.

2. In Microsoft Edge Tools > Targets, select More Actions (...) to the right of the word TARGETS, and then select Open Settings.

   If you are using a mouse, to access More Actions (...), select the Targets pane or hover over it:

   

Reloading the extension after changing settings

Some settings have a note that reads (reload required after changing). For such a setting to take effect:

1. Close the browser opened by the extension, or in the Microsoft Edge Tools > Targets pane, select Close instance (X). This action automatically closes the Edge DevTools tab as well.

2. In the Microsoft Edge Tools > Targets pane, click the Launch Instance button. Microsoft Edge opens, and the Edge DevTools tab is displayed.

Getting in touch with the Microsoft Edge DevTools Extension team

Send your feedback by filing an issue in the vscode-edge-devtools repo.

Your contributions are welcome, to help make the Microsoft Edge DevTools extension better. Find everything you need to get started in the vscode-edge-devtools repo.

See also

• vscode-edge-devtools repo - source code for the Microsoft Edge Developer Tools extension for Visual Studio Code, at GitHub.
• Download Visual Studio Code
• Getting Started - Documentation for Visual Studio Code.