Visual Studio Code: Breakpoint set but not yet bound - Vue.js - vue.js

Question

I have a large Vue.js project which I am trying to get Debugging working properly with in VS Code. I've been trying various different things for a full week now and I keep getting problems with binding breakpoints. For what it's worth, these typically crop up worse in classes that are created through a factory pattern or things like Vuex actions that don't have directly accessible function endpoints - this may be related.
Here's a sample of some launch configs...
{
"name": "Parity - Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080/app",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
"/./*": "${webRoot}/*",
"/src/*": "${webRoot}/*",
"/*": "*",
"/./~/*": "${webRoot}/node_modules/*"
}
},
{
"name": "Parity - Edge",
"type": "edge",
"request": "launch",
"url": "http://localhost:8080/app",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
"/./*": "${webRoot}/*",
"/src/*": "${webRoot}/*",
"/*": "*",
"/./~/*": "${webRoot}/node_modules/*"
}
},
I get exactly the same behaviour in Chrome and in Edge (not surprising as they are essentially the same browser these days).

Answer 1

Upon digging through the Sources tab in the browser I found that the source maps are mostly all within the webpack folders for this, hence why they aren't being found (the exception being the *.vue files, hence why they would work fine).
The following configuration works for me, but the full answer is...
look at where the files are found in 'Sources' in your web browser and
use those locations to map back to the actual file location - doing
what I did before and just trying to use someone else's random config
isn't always going to work.
{
"name": "Parity - Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080/app",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
"webpack:///./src/*": "${webRoot}/*",
"webpack:///./node_modules/*": "${webRoot}/node_modules/*"
}
},
{
"name": "Parity - Edge",
"type": "edge",
"request": "launch",
"url": "http://localhost:8080/app",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
"webpack:///./src/*": "${webRoot}/*",
"webpack:///./node_modules/*": "${webRoot}/node_modules/*"
}
},