#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.

The fix is simple, just indicate the actual path to the webRoot, not just the workspaceFolder in the launch.json. This depends on if you opened the workspace in the root of the app, or deeper. It must take that into consideration. workspaceFolder or workspaceFolder/your-app/

{
 
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/<app folder here sometimes>",
      "sourceMaps": true,
      
      --SOMETIMES THIS IS NEEDED--
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceRoot}/*"
      }
       
    }
  ]
}

When you just have a single application (you don’t have a Project/ folder) you might have to 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:

  • It’s all about in what folder you opened your workspace in. This affects “webRoot”: “${workspaceFolder}/MAYBE-THIS-my-app/”
  • 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.
  • 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

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

  1. Hey there!
    Thanks for this article, I found that it was still not working until I slightly modified the sourceMapPathOverrides setting to the following:
    “webpack:///./*”: “${workspaceRoot}/*” where instead of using workspaceRoot I use the new webRoot

    Like

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