Unbound breakpoint - VS Code | Chrome | Angular

Question

My issue

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

Currently when I serve the application e.g. ng serve my breakpoints are bound and the breakpoints get hit:

However, when I serve via a different configuration e.g. ng serve -c qa or ng serve -c uat the breakpoints become unbound:

I can't seem to find any relevant information on the internet (including SO) related to this issue.

Is there a reason why the breakpoints become unbound? How can I get the breakpoints to hit when serving with different environment configurations?

Relevant information

launch.json configuration:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

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

Maybe you could post an issue on the github somewhere? https://github.com/microsoft?q=vscode+debug&type=&language= — Guybrush Threepwood, Nov 24 '20 at 08:36

Jaa H · Accepted Answer · 2021-04-08T15:28:55.743

9

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

edited Apr 08 '21 at 15:28

answered Dec 01 '20 at 15:51

Jaa H

643
1
7
14

score 1 · Answer 2 · answered Mar 05 '21 at 12:36

1

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

answered Mar 05 '21 at 12:36

psulek

3,846
3
25
36

Thanks for sharing @psulek, this wouldn't have fixed my issue, however. Please can you specify what affect changing this setting would have, maybe you could provide a source of information too. – Jaa H Mar 17 '21 at 10:41

score 0 · Answer 3 · answered May 26 '21 at 02:14

0

For me, I resolved the issue by adding this option to my webpack.config.js:

devtoolModuleFilenameTemplate: '[absolute-resource-path]'

answered May 26 '21 at 02:14

Krist Jin

51
7

Unbound breakpoint - VS Code | Chrome | Angular

My issue

Relevant information

3 Answers3