Microsoft Edge DevTools for Visual Studio Code extension

• 01/07/2021
• 3 minutes to read
• • M
  • j
  • c

Use this extension to access in Microsoft Edge DevTools inside Microsoft Visual Studio Code. You have access to the Elements and Network tools in Microsoft Edge DevTools. You may either launch or attach to an instance of Microsoft Edge. After you connect you may display the runtime HTML structure, alter the layout, fix styling issues, and inspect network traffic.

Elements tool

By default, the extension launches a browser instance in a unique window and gives you the Elements functionality of Microsoft Edge DevTools.

In the extension settings, you may enable more functionality like Headless Mode and Network.

Headless Mode

In headless mode, this extension does not launch a full browser instance to debug. It runs an instance in the background. You may have to stay inside the editor and interact with the embedded browser. An extra browser icon is not be displayed in your task bar.

Network tool

If you also want to inspect the network traffic of your application, open the settings and turn on the Network tab.

Network inspection in Microsoft Edge DevTools for Visual Studio Code  

Launching Microsoft Edge From the extension

Navigate to Microsoft Edge Tools in the Activity Bar. Next to where it says Microsoft Edge Tools: Targets, there is a plus sign that opens the browser for your app. If you choose the about:blank option, you must navigate to your web app in the browser for it to appear in the Elements panel in Visual Studio Code.

Launching Microsoft Edge from the Debug view

If you are accustomed to using the Debug view in Visual Studio Code, access Microsoft Edge DevTools from it.

1. In Visual Studio Code, navigate to the Debug view
   • Select Ctrl+Shift+D on Windows/Linux (Command+Shift+D on macOS).

1. To launch the Elements tool from Visual Studio Code, complete one of the following actions.
   • Select F5.
   • Choose the Play (green) button.

Now, you may do the following actions.

• Access a screencast of your browser.
• Inspect the DOM and the styling of the components on your page.

Attaching to Microsoft Edge

To open a browser and attach the instance to Visual Studio Code, complete the following steps.

1. To open an instance of Microsoft Edge (Chromium), copy and run the following command.

   start msedge --remote-debugging-port=9222
   

2. After the instance launches, copy and paste the following code snippet into your launch.json file.

   {
       "type": "vscode-edge-devtools.debug",
       "request": "attach",
       "name": "Attach to Microsoft Edge and open the developer tools",
       "url": "http://localhost:3000/",
       "webRoot": "${workspaceFolder}/out",
       "port": 9222
   }
   

3. In Visual Studio Code, open the Debugger drop-down menu and choose Attach to Microsoft Edge and open the developer tools.

4. To launch the Elements tool from Visual Studio Code, complete one of the following actions.

   • Select F5.
   • Choose the Play (green) button.

Now, you may do the following actions.

• Access a screencast of your browser.
• Inspect the DOM and the styling of the components on your page.

Getting in touch with the Microsoft Edge DevTools for Visual Studio Code extension team

Send your feedback by filing an issue against the GitHub repo of the extension.

If you want to help make this extension better, your contributions are welcome. Find everything you need to get started in the GitHub repo of the extension.