Breakpoint set but not yet bound

Question

I wanted to use vscode extension ( Debugger for Chrome ), but whatever I try I can't get rid of the 'breakpoint set but not yet bound'.

Everything is running, the debugger console is showing all the console log messages but I can hit the debug point.

Here is my launch.json

{
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost",
      "webRoot": "${workspaceFolder}/client/",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*"
      }
    }

I am using Angular and its running inside Docker. Any help will be appreciated.

Answer 1

Your launch.json should be as follows

{
   "type": "chrome",
   "request": "launch",
   "name": "Launch Chrome",
   "url": "http://localhost:4200",
   "webRoot": "${workspaceFolder}",
   "sourceMaps": true,
   "sourceMapPathOverrides": {
       "/./*": "${webRoot}/*",
       "/src/*": "${webRoot}/*",
       "/*": "*",
       "/./~/*": "${webRoot}/node_modules/*"
    }
}

Answer 2

Make sure your webRoot setting is pointing to the right directory of your angular project. It's likely that your ${workspaceFolder} is referring to the top-level directory.

for example: Your source code is in C:\projects\awesome_tool\client but, your ${workspaceFolder} is pointing to C:\projects. To fix this, you need to modify webRoot's value in launch.json file as webRoot": "${workspaceFolder}/awesome_tool/client