Debugger For Microsoft Edge Visual Studio Code Extension

With the Debugger for Microsoft Edge Visual Studio Code extension, debug your front-end JavaScript code line by line and see console.log() statements directly from Visual Studio Code!

Debugger for Edge Visual Studio Code extension at work

Launching Microsoft Edge

Navigate to the Debug view (Ctrl+Shift+D on Windows or Command+Shift+D on macOS) in the Activity Bar. If you do not have any configurations in Visual Studio Code, select F5 on Windows or macOS or select the green Play button. Select Edge in the dropdown. You should see a launch.json file with the following configuration.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "edge",
            "request": "launch",
            "name": "Launch Edge against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

If you select F5 on Windows or macOS or select the green Play button again, Visual Studio Code launches Microsoft Edge (EdgeHTML) and you are able to debug any web project you have running on port 8080 directly from Visual Studio Code!

Microsoft Edge (Chromium)

If you want to launch Microsoft Edge (Chromium), the new Microsoft Edge, instead of Microsoft Edge (EdgeHTML), simply add a version attribute to your existing configuration with the version of Microsoft Edge (Chromium) you want to launch (dev, beta, or canary). The following configuration below launches the Canary version of Microsoft Edge (Chromium).

{
    "type": "edge",
    "request": "launch",
    "version": "canary",
    "name": "Launch Edge against localhost",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceFolder}"
}

Attaching to Microsoft Edge

Attach Visual Studio Code to Microsoft Edge (Chromium). From your terminal, run the following command.

start msedge --remote-debugging-port=9222

Add the configuration below to your launch.json file.

{
    "type": "edge",
    "request": "attach",
    "name": "Attach to Edge",
    "port": 9222
}

If you now run this configuration, Visual Studio Code attaches to Microsoft Edge (Chromium) and start debugging.

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

Send your feedback by filing an issue against in the GitHub repo of the extension. Please include the debug adapter log file, which is created for each run in the %temp% directory with the name vscode-edge-debug2.txt. Drag this file into an issue comment to upload it to GitHub.

To help make the Elements for Microsoft Edge Visual Studio Code extension better, your contributions are welcome! Find everything you need to get started in GitHub repo of the extension.