How to debug Angular application in VSCode using Edge browser?

Question

I am using Edge extension. Below is configuration in launch.json:

"configurations": [
    {
      "name": "ng serve",
      "type": "edge",
      "request": "launch",
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    }]

Here is more detailed steps as per documentation in VS Code:

1. npm install -g @angular/cli, ng new my-app
2. Install Edge extension
3. Reload Project
4. npm start
5. Go to the Debug view (Ctrl+Shift+D) and click on gear button to create a launch.json debugger configuration file. Choose Chrome from the Select Environment dropdown. Update configurations with code shown in above launch.json.
6. Set breakpoint in app.component.ts
7. Press F5 - it should now hit breakpoint. But getting message on hover of breakpoint - "Unverified breakpoint". The breakpoint is not getting hit.

I tried clearing all breakpoints, restarting vs code(and machine), closing all browser instances, but still getting same behaviour. Debugger is able to launch the angular app in browser but unable to hit the breakpoints.

So, is there is any other configuration to make it work with Edge browser. The current configuration works fine with chrome browser (just replace edge with chrome in launch.json).

Answer 1

Based on other answers this is step by step how I made it work on my machine:

1. Create launch.json in .vscode folder with following contents:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Edge",
            "request": "launch",
            "type": "msedge",
            "url": "https://localhost:4200",
            "webRoot": "C:\\Source\\MyApp\\Front", // You can use ${workspaceFolder}
            "version": "dev"
        },
        {
            "name": "Attach to Edge",
            "request": "attach",
            "type": "msedge",
            "port": 9222,
            "urlFilter": "https://localhost:4200/*", // attach only to angular urls
            "webRoot": "C:\\Source\\MyApp\\Front",
        }
    ]
}

2. Add --remote-debugging-port=9222 as parameter to edge shortcut property Target

3. Launch new browser instance or attach to existing one:

And that's it, it will work as expected.

Be careful if you use ${workspaceFolder} in your configuration, then it means that you need to open a folder in your vscode at C:\Source\MyApp\Front folder, instead of C:\Source\MyApp\Front\scr location.

Answer 2

This configuration seems to work for me now. It breaks on the breakpoint and shows it as available.

 {
        "name": "Edge",
        "type": "edge",
        "request": "launch",
        "url": "http://localhost:4200/#",
        "webRoot": "${workspaceFolder}",
        "sourceMaps": true,
        "trace": true,
        "userDataDir": "${workspaceRoot}/.vscode/edge"
    }

I guess they made some fixes.

Answer 3

The following does hit the breakpoint, but they do show up as unverified in vscode (open circle). I think this might have to do with inline source maps.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "debug chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200/#",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
                "webpack:/./*": "${webRoot}/*",
                "webpack:/src/*": "${webRoot}/src/*",
                "webpack:/*": "*",
                "webpack:/./~/*": "${webRoot}/node_modules/*"
            }
        },
        {
            "name": "debug edge",
            "type": "edge",
            "request": "launch",
            "url": "http://localhost:4200/#",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
                "webpack:/./*": "${webRoot}/*",
                "webpack:/src/*": "${webRoot}/src/*",
                "webpack:/*": "*",
                "webpack:/./~/*": "${webRoot}/node_modules/*"
            },

        },
        {
            "name": "ng test",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:9876/debug.html",
            "webRoot": "${workspaceFolder}"
        },
        {
            "name": "ng e2e",
            "type": "node",
            "request": "launch",
            "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
            "protocol": "inspector",
            "args": ["${workspaceFolder}/protractor.conf.js"]
        }
    ]
}