Unbound breakpoint - VS Code | Chrome | Angular

I have an Angular application that I am trying to debug in VS Code.

When I compile and run the application (ng serve) the breakpoints are bound:

enter image description here

However, when I specify a different configuration e.g. -c qa or -c uat they are unbound:

enter image description here

Why are the breakpoints unbound when I specify a different configuration?
How do I bind the breakpoints for a debug session targeting a particular environment?

Relevant information

angular.json sample environment configuration:

"uat": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.uat.ts"
    }
  ],
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "extractLicenses": false,
  "vendorChunk": false,
  "buildOptimizer": true,
  "budgets": [
    {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
    },
    {
      "type": "anyComponentStyle",
      "maximumWarning": "6kb",
      "maximumError": "10kb"
    }
  ]
},

Software versioning:

Visual Studio Code 1.50.1
Chrome 83.0.4103.122
Debugger for Chrome 4.12.11
JavaScript Debugger (Nightly) 2020.10.2217

Solution 1:

The fix for this was simple, I hadn't set the sourceMap property to true in angular.json for that particular environment, instead I had "sourceMap": false,

See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/SourceMap for more info.

With thanks to Connor - https://github.com/microsoft/vscode-js-debug/issues/872

Solution 2:

In my case I needed to change webroot

FROM

"webRoot": "${workspaceFolder}"

TO "webRoot": "${workspaceFolder}\projectName"

Project name is the name you've given in the beginning ng new projectName

Then breakpoint bound.

Solution 3:

For me, vscode setting:

Debug > Javascript: Use Preview which causes breakpoints to not hit by debugger.

Uncheck Debug > Javascript: Use Preview in vscode settings.

(or in settings/workspace json file) add:

"debug.javascript.usePreview": false

Solution 4:

Tried all above and restart still not hitting. No error, not hanging, the whole application is like a breakpoint is hit now waiting for your to continue, yet you just don't see any breakpoint is being hit. However stand-alone browsers Chrome and Edge all running fine.

Note, this is not just Angular, it occurs on Node backend as well!

So besides setting all above, Run -> Disable All Breakpoints, then Enable All Breakpoints solved it.

2021-09-17, today it stops working again regardless. Finally adding a new breakpoint get it back. This behavior maybe related to debugger extremely lagging. Definitely a bug of VSC.