VS Code - Debugger for Edge

Debug your JavaScript code running in Microsoft Edge from VS Code.

A VS Code extension to debug your JavaScript code in the Microsoft Edge browser from VS Code.

Supported features

• Setting breakpoints, including in source files when source maps are enabled
• Stepping through the code
• The Locals pane
• Debugging eval scripts, script tags, and scripts that are added dynamically
• Watches

Unsupported scenarios

• Debugging web workers
• Features that aren't script debugging.

Getting Started

1. Install the extension
2. Restart VS Code and open the folder containing the project you want to work on.

Using the debugger

When your launch config is set up, you can debug your project. Pick a launch config from the dropdown on the Debug pane in Code. Press the play button or F5 to start.

Configuration

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 Edge. Both modes require you to be serving your web application from a local web server, which is started from either a VS Code task or from your command-line. Using the url parameter you simply tell VS Code which URL to either open or launch in Edge.

You can configure these modes with a .vscode/launch.json file in the root directory of your project. You can create this file manually, or Code will create one for you if you try to run your project, and it doesn't exist yet.

Launch

Here are two example launch.json configs with "request": "launch". You must specify either file or url to launch Edge against a local file or a url. If you use a url, set webRoot to the directory that files are served from. This can be either an absolute path or a path using ${workspaceFolder} (the folder open in Code). webRoot is used to resolve urls (like "http://localhost/app.js") to a file on disk (like /Users/me/project/app.js), so be careful that it's set correctly.

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "edge",
            "version": "beta",
            "request": "launch",
            "url": "http://localhost/mypage.html",
            "webRoot": "${workspaceFolder}/wwwroot"
        },
        {
            "name": "Launch index.html",
            "type": "edge",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceFolder}/index.html"
        },
    ]
}

If you want to use a different installation of a Chromium-based browser, you can also set the runtimeExecutable field with a path to the browser executable. On machines with the Microsoft EdgeHTML browser, simply omit the version flag (such as in the Launch index.html example above).