#VSCode: Handling Debugging Error “Breakpoint set but not yet bound”

download.pngYour Angular VS Code project can contain either a simple application, or multiple. When you have multiple, it can cause issues with connecting a debugger. Here’s the trick on how to handle that situation:

After you create a new Angular app then try to debug it in VSCode, you can often get the error “Breakpoint set but not yet bound” when you try to set a break point.

sourceMapPathOverrides is critical

The fix is simple, just indicate the actual path to the webRoot, not just the workspaceFolder in the launch.json.

{
 
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/my-app/src",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      }
    }
  ]
}

When you just have a single application (you don’t have a Project/ folder) set the webRoot to

"webRoot": "${workspaceFolder}"

Tip: When you open the folder in VS Code, do so at the root where the .vscode folder is. The e2e, src etc folders should all be at the top level.

2020-03-10 12_36_19-launch.json - application - Visual Studio Code.png

 

Some Gotchas:

  • I’ve noticed that sometimes you still get the error “Breakpoint set but not yet bound” after the first try. After you build then try to debug, close VSCode and Chrome then open up again. That sometimes helps.
  • sourceMapPathOverrides is critical
  • Make sure that tsconfig.json has sourceMaps set to true
  • When you run the app in Chrome, go to the dev tools and see if the ts files are displayed like this:
2020-03-11 11_23_43-Cloning.png

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s