Why is debugging VueJS so flaky in VSCode - vue.js

Question

I have been using VSCode for a few months and have not been able to find a way to consistently debug a simple VueJS app. The main issue I keep encountering is the Unbound breakpoint whereby the breakpoints I set are unreachable.
I have tried the many launch.json configs including the ones below with no success:
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
{
"name": "Attach hm",
"port": 9229,
"request": "attach",
"skipFiles": ["<node_internals>/**"],
"type": "pwa-node",
"address": "localhost:8080",
"localRoot": "${workspaceFolder}/src"
}
A few weeks ago I stumbled on the following config which magically solved my problem and I was happily debugging for days:
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMaps": true
}
After taking a few days off coding, I came back to VSCode yesterday, there was the 1.47.2 update waiting. Did that, wrote a few lines of code, tried debugging like i was doing before and boom! the Unbound breakpoint problem from hell returned.
Check my commits, no changes to launch.json, no new install, updates whatsoever.
Why on Earth diid this thing stop working???
One thing to note is that I can perfectly debug in VSCode the server portion of my app (a node/express REST server) with no problem at all.
Very frustrating and I really do not want to go back to debugging using Chrome's DevTools.
Could anyone help?
thank you.

Answer 1

I experienced may times similar issues.
Have you found a solution?
My launch.json file is:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"pathMapping": {
"/_karma_webpack_": "${workspaceFolder}"
},
"sourceMapPathOverrides": {
"webpack:/*": "${webRoot}/*",
"/./*": "${webRoot}/*",
"/src/*": "${webRoot}/*",
"/*": "*",
"/./~/*": "${webRoot}/node_modules/*"
}
}
]
}
Most of times it works but I still experience weird behaviors.
Also you should always start VS Code from within the folder containing the VUE project (outside /src).