Unbound breakpoint - VS Code | Chrome | Angular

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.

感谢康纳-https://github.com/microsoft/vscode-js-debug/issues/872

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

For me, I resolved the issue by adding this option to my webpack.config.js:

devtoolModuleFilenameTemplate: '[absolute-resource-path]'

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.

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

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.

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. ;-)

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

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.

For me, using the nx monorepo setup with an Angular project:

Inside the project.json of a project, on the desired configuration add

"sourceMap": true

After some DAYS researching for the answer for this problem, it work only when I decided to test with Edge Browser. And it Worked. The breakpoins are ever unbounded, before. Every configs suggested in the internet I have tried, every tips, etc. But nothing solved the umbounded breakpointer problem. I run here with WSL, Vscode, Angular in Windows Machine. My config: { "name": "Attach to Edge", "port": 9222, "request": "attach", "type": "msedge", "sourceMaps": true, "trace": true, "urlFilter": "http://localhost:4200/*", "webRoot": "${workspaceFolder}/packages/shopWebAngular" },

Now, it works with http://localhost:4200, and " --remote-debugging-port=9222" in the Edge shortcut laucher. Vscode version: 1.73.1

• Chrome #$%%¨$&**.

I've encountered the same issue and it seems a fix is on its way: fix: automatically try 127.0.0.1 if requests to localhost fail

For the mean time, you have to settle temporarily in using the IP address: "start": "ng serve --port 5000 --ssl --host=127.0.0.1". I hope this helps.

• sample package.json:

{
"scripts": {
"ng": "ng",
"start": "ng serve --port 5000 --ssl --host=127.0.0.1",
"start2": "ng serve --hmr=true",
"build": "ng build --configuration production",
"test": "ng test",
"lint": "ng lint --type-check",
"e2e": "ng e2e",
"sme": "ng build --configuration production -c=sme && npx source-map-explorer ./dist/Coop/*-es2015.js"
},
}

• sample launch.json:

{
"version": "0.2.0",
"configurations": [
{
"name": "Launch localhost",
"type": "chrome",
"request": "launch",
"url": "https://127.0.0.1:5000",
"webRoot": "${workspaceFolder}"
}
]
}

Note: Make sure to stop and run npm start again.