Microsoft Edge Developer Tools for Visual Studio Code doesn't auto attach debugger to Angular project

user_1220627 0
Viewed 767

I'm having some issues getting the "auto attach debugger" feature of Microsoft Edge Developer Tools for Visual Studio Code to work.

I generated a fresh angular project (ng new) and added this launch.json config

{
  "configurations": [
    // this one works. It opens a chrome window and hits my break points.
    {
      "type": "pwa-chrome", // this is not "Microsoft Edge Developer Tools for Visual Studio Code"
      "name": "http://localhost:4200/",
      "request": "launch",
      "url": "http://localhost:4200/"
    },
    // this one does not work. It opens a headless edge window, but it does not hit my break points.
    {
      "type": "vscode-edge-devtools.debug", // this is "Microsoft Edge Developer Tools for Visual Studio Code"
      "request": "launch",
      "name": "Launch Microsoft Edge and open the Edge DevTools",
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

I have these extension settings

{
  "vscode-edge-devtools.enableNetwork": true,
  "vscode-edge-devtools.headless": true,
  "vscode-edge-devtools.defaultUrl": "http://localhost:4200/"
}

enter image description here

I tried fiddling around with sourceMapPathOverrides but I can't seem to get it right.

The webpack:/// content looks like this

enter image description here

  • VSCode Version: 1.53.2 (system setup)
  • Microsoft Edge Version: 88.0.705.68 (Official build) (64-bit)
  • Microsoft Edge Tools for VS Code (ms-edgedevtools.vscode-edge-devtools) Version: 1.1.3
  • Debugger for Microsoft Edge (msjsdiag.debugger-for-edge) Version: 1.0.15
vscode-debugger angular visual-studio-code
1 Answers

I had a similar issue. My problem was that I did not have sourceMap explicitly enabled in my tsconfig.json file:

{
    "compileOnSave": false,
    "compilerOptions": {
     ///....
        "sourceMap": true
    }
}

I also had to enable it in my angular.json file like this:

"architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        ///...
                        "hmr": {
                            "sourceMap": true, <= for me since I'm using hmr here
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.hmr.ts"
                                }
                            ]
                        },
                        "development": {
                            "sourceMap": true <= and here
                        }
                    }
                },
user_79522440
Related