Microsoft Edge DevTools for Visual Studio Code extension

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.

Microsoft Edge DevTools for Visual Studio Code running with a full browser window

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

Enabling (or disabling) headless mode and Network inspection in the extension settings

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.

Microsoft Edge DevTools for Visual Studio Code running with a headless

Note

On macOS, you should turn on headless mode as your preferred mode. Using headless mode should solve an issue where, if the window is not visible, the browser window reports that it is Not Active.

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).

Note

  1. If you do not have any configurations in Visual Studio Code, complete one of the following actions.

    • Select F5.
    • Choose the Play (green) button.
  2. In the dropdown, choose Edge in the dropdown.

  3. A launch.json file should be displayed that contains the following configuration.

    {
      "version": "0.2.0",
      "configurations": [
        {
          "name": "Launch Microsoft Edge and open the Edge DevTools",
          "request": "launch",
          "type": "vscode-edge-devtools.debug",
          "url": "http://localhost:8080"
        }
      ]
    }
    

After you load the correct configuration, complete the following action.

  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.