Angular CLI 8.1.3 `Debug Unit Tests` configuration - Unverified breakpoint

[asinitson]

ng test configuration listed in Angular CLI section does not work with latest Angular (8.1.3). Tried on vanilla Angular CLI generated project. This is the latest master at this point: https://github.com/microsoft/vscode-recipes/tree/851693ce90da46a36a28edeb743e09b3da6b6e6f/Angular-CLI

If instead of sourceMapOverrides I add this:

      "pathMapping": {
        "/_karma_webpack_": "${workspaceFolder}"
      },

...breakpoints in .spec.ts files work correctly. In other words full working configuration is this:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ng test",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "pathMapping": {
        "/_karma_webpack_": "${workspaceFolder}"
      },
    },
  ]
}

I can create a pull request with a change but before that I would like to confirm, whether this is enough or sourceMapPathOverrides section is still needed.

[briancodes]

@asinitson I'm using Angular 8.2.0, and had the same problem. Your solution worked

Note: I left the sourceMapPathOverrides in place, but not sure if it's actually doing anything

[aelking]

@asinitson This just worked for me. Spent a couple of hours trying to get this to work.

Thank you for the help.

[lakartoza]

Thank you Andrei, I saw your answer on SO. I'm on angular cli 8.3.8 and it doesn't work for me. Still getting

Breakpoint ignored because generated code not found (source map problem?). or Breakpoint set but not yet bound

I reported the issue here before I found this thread.

I've tried having all the sourcemaps and just the "/_karma_webpack_" in there.

Also, I thought I read that ${workspaceRoot} was deprecated

[asinitson]

@lakartoza:

Hi! I just tested with latest version (Angular CLI 8.3.17 and Angular 8.2.13) with both ${workspaceRoot} and ${workspaceFolder}. In both cases it works. I also tried it on "request": "attach", configuration (which does not start new browser window as I suggested on Stack Overflow) and it also works.

However, I did get some breakpoints which didn't get hit while I was changing launch.json, so I had to remove them and set them again. So make sure you remove all breakpoints and set them again when you change launch.json (this might be just my superstition, but it doesn't hurt to try it out).

Let me know if you get it working. If it still fails I can apply configuration to freshly generated Angular CLI project and create a reference GitHub repo.

About ${workspaceRoot}: you are right, it is deprecated. I updateв all my references to it to ${workspaceFolder} so deprecated information doesn't spread around (let me know if I missed any).

[kijy5428]

@asinitson Thank you so much! You save my day!!

[mattezell]

Oh, buddy... I'm so happy that you documented this - and that I came back to it for the 50th time and finally identified how it could help me... I've been beating my head for a day and a half trying to figure out why I couldn't hit breakpoints in my 10.1.2 based library.

Disclaimer: I inherited this codebase and believe it was upgraded from a previous version of Angular.

In case it helps others, here's what I had to do to get test debugging working properly with my library project:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ng test attach",
      "type": "chrome",
      "request": "attach",
      "address": "localhost",
      "port": 9333,
      "webRoot": "${workspaceFolder}/projects/my-library/",
      "sourceMaps": true,
      "pathMapping": {
        "/_karma_webpack_": "${workspaceFolder}/projects/my-library/"
      },
    },
  ]
}

ng test my-library --browsers ChromeDebugging

Thanks again! Now I can finally get back to work!

[prabh-62]

Also, try using pwa-chrome debugger, it is better at locating sourcemaps

{
  "version": "0.2.0",
  "configurations": [
    {
      ...
      "type": "pwa-chrome",
      ...
    },
  ]
}