Unverified Breakpoint in Visual Studio Code

Question

I'm trying to debug VS Code project when suddenly (because it was working perfectly just day ago) some of my breakpoints become unreachable:

And list of breakpoints is all grayed-out with information that Breakpoint set but not yet bound.

My package.json and .vscode/launch.json are on same level, my VS Code version info:

But there is some additional trivia to this issue: Setting breakpoints on some file actually works. and they are hit correctly. So for me there is no correlation between kind of file, it's location, function or load time, some files are unable to be handled for Chrome Debugger...

My VS Code run configurations below:

  "configurations": [

    {
      "name": "Launch Chrome against localhost",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4210",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    },
    {
      "name": "ng serve",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4210/#",
      "webRoot": "${workspaceRoot}"
    },
  ]

I tried as well uninstall/disable/enable chrome debugger, Running it with all other addons disabled. Setting breakpoint and re-running debugger does not take effect as well as deactivate/reactivate all of breakpoints.

Answer 1

Ok, after some time the resolution comes. It all was caused by Angular routing mechanism. If component that breakpoint is localised were navigated by component, breakpoints are set immediately and can be hit. For components that are navigated by loadChildren, breakpoint is unverified until actual page is loaded. Then breakpoint becomes "reachable".

EDIT

To make answer less angular-specific, final root caus was that unverified breakpoints were set on parts of JavaScript code that was not yet send to the browser (i.e. sub-page was not visited, partition of script was not yes AJAX-requested)