Unbound breakpoint - VS Code | Chrome | Angular

Question

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:

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

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

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
Only one of the projects, first run ok, subsequent runs never hits it, seems like going outside of the context, request goes to Mars, yet the app is on wait. I was watching the line has breakpoint set, it goes from solid red at the first run to hollow afterwards. Nothing was changed. — Jeb50, Jul 09 '21 at 23:38

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

42

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

1,718
1
14
20

score 32 · Answer 2 · answered Aug 19 '21 at 09:04

32

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.

answered Aug 19 '21 at 09:04

Davut Gürbüz

5,172
4
44
80

1

Thank you!!! I could not get this working today until finding your response. – Timbo773 Sep 08 '21 at 19:11
4

For Windows users use / in the path instead of \ – JanBrus Sep 11 '21 at 19:36
1

Without this, I would not be able to solve the issue! Thanks a lot! – user2078148 Oct 28 '21 at 07:38
this is really helpful if you have multiple projects within your workspace. – AceMark Mar 28 '22 at 19:56

score 8 · Answer 3 · answered Dec 17 '21 at 13:50

8

In my case I traced it down to a incompatibility between my Node version (17) and my Angular version (13) that was displayed when I ran ng version. I downgraded Node to v16 and now everything works. There is also an inofficial compatibility list

answered Dec 17 '21 at 13:50

user106745

143
1
7

1

WORKING! I tried everything without success, the downgrade to v16 was the solution. Thank You! – SkyG Dec 29 '21 at 22:39
I downgraded Node to `v16.14.2` but it changed nothing. I still have the `unbound breakpoint` issue. – Stephane Apr 21 '22 at 16:17
Worked for me as well. Thanks! – Jake_3H May 18 '22 at 09:55

Jeb50 · Answer 4 · 2022-04-05T16:40:12.457

6

Tried all above and restart still not hitting. No error, not hanging, it is like a breakpoint has been hit and now is waiting for your, yet you just don't see any breakpoint is hit and where. 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.

edited Apr 05 '22 at 16:40

answered Jul 09 '21 at 23:51

Jeb50

5,215
6
32
55

I'm experiencing the same exact scenario as @Jeb50 and it started on about the same date 9/17/21. For me it's only a problem for a few TypeScript files and the other 50 files or so debugging still works fine. – A. Wentzel Sep 27 '21 at 22:10
@jeb50 for me your answer didnt fix but atleast changed from "Unbound breakpoint" to "No symbols have been loaded for this document" – AbhishekS Jan 12 '22 at 09:51
It's always worth a try before going search for faulty configurations... and if your're lucky (it was my case) it solves the problem. (don't ask why). – nhaggen Apr 13 '22 at 13:33

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

5

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

4,128
3
28
37

When I try this I get this error: Cannot connect to runtime process, timeout after 10000ms - (reason: Cannot connect to the target – Thiago Pereira Maia Jul 15 '21 at 12:52
@ThiagoPereiraMaia maybe they already set preview debugger as default and removed old one, which works, not really sure about that. – psulek Sep 07 '21 at 12:37
6

No such setting in vscode anymore `1.62.3` – mgPePe Dec 22 '21 at 17:18
@mgPePe now when such setting does not exit, my solution is to have "type" set to "legacy-node" in "launch.json" file. You need to install extension "[Deprecated] Node Debug (legacy)" (id: ms-vscode.node-debug) to support this type. – psulek Jan 01 '22 at 18:57

misterone · Answer 6 · 2021-08-19T01:36:05.623

5

This won't answer the question directly, but one general tip to know what the problem is : Set trace : true when you launch or attach your debugger. Stop the debugger. Look at the logs. The path should be in the debug console.

Go to this website to analyze your log. https://microsoft.github.io/vscode-pwa-analyzer/index.html

Click on sourcemap.parsing and runtime.sourcemap in the tag filters. You will see things like this :

At least you now have a feedback loop to know how your launch.json affects the sourcemaps.

The launch file (circle in red) has also a lot of useful informations

edited Aug 19 '21 at 01:36

answered Aug 19 '21 at 01:23

misterone

131
2
8

3

could you please elaborate how to "Set trace : true" ? – VeganHunter Sep 13 '21 at 13:42
1

@VeganHunter: just add to your launch.json file the following line: "trace": true – piter entity Sep 20 '21 at 21:24
runtime.sourcemap does not show up, but sourcemap.parsing does. Perhaps this is part of my problem. – Erik Ostermueller Jan 02 '22 at 15:40
I could see the log but I could not find anything that made sense to me. There was no FATAL nor ERROR at all. – Stephane Apr 21 '22 at 16:48

djmarquette · Answer 7 · 2021-10-14T19:10:44.303

I have had various success with several of the above answers in the past. This week the issue returned. For some reason this time I was able to resolve it by providing a defaultConfiguration in my angular.json file.

      "defaultConfiguration": "dev"

This does not make any sense to me either, but if I remove it, all of my breakpoints become "unbound" at runtime.

I just thought I'd put this out here in case it helps anyone else.

Cheers, Dan

PS - updating to add better fix. I had the correct settings in my "dev" configuration, but you can also put

"sourceMap": true

at the architect level of angular.json to make it the default. This one setting was my problem all along. Default settings are also helpful for other settings like optimization: false, budgets, etc. Therefore, I have removed the defaultConfiguration line, since my dev settings are now the defaults.

I'm spending a lot of time readying through the angular.json settings lately. ;-)

I added this default configuration property but it changed nothing. I still have the `unbound breakpoint` issue. — Stephane, Apr 21 '22 at 16:36

score 0 · Answer 8 · 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

score 0 · Answer 9 · answered Mar 21 '22 at 08:39

0

I had the same issue in my vueJS project. Something to try before making any changes to files etc whic solved it for me:

In the ClientApp/App folder: 1.Delete the node_modules folder 2.Delete the package-lock.json file 3.Open a cmd prompt for your ClientApp/App folder 4.Use the cmd "npm i"

This final step will reinstall all your node-modules. The issue I had must've been a conflicting node-module.

answered Mar 21 '22 at 08:39

cking888

106
4

I tried that, deleting the `node_modules` directory and the `package-lock.json` file, but it changed nothing. I still have the `unbound breakpoint` issue. – Stephane Apr 21 '22 at 16:16

score 0 · Answer 10 · answered Mar 21 '22 at 13:39

0

For me, the advices here didn't solved the problem, but restarting (exit and open again) the VS Code did!

answered Mar 21 '22 at 13:39

Itai Klapholtz

143
1
13

Unbound breakpoint - VS Code | Chrome | Angular

Relevant information

angular.json sample environment configuration:

Software versioning:

10 Answers10

Linked