How to debug Angular application in VSCode using Edge browser?

问题

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

回答1:

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"]
        }
    ]
}

回答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.

来源：https://stackoverflow.com/questions/50013884/how-to-debug-angular-application-in-vscode-using-edge-browser