Debugging Vue in VScode and Chrome, unbound breakpoint - vue.js

Question

I'm trying to debug a Vue website I'm writing in VSCode and Chrome.
When I put a breakpoint in the data() { return {...} } function it stops on it, but if I try to put it in a method in a Vue file or a JS service, once I launch Chrome through the debug config the breakpoints become unbound. Does anyone have any ideas about how to keep the breakpoints bound?
This is my config file:
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/client/meet-for-lunch/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
},
{
"type": "node",
"request": "launch",
"name": "Debug server",
"runtimeExecutable": "nodemon",
"program": "${workspaceFolder}/server/bin/www",
"restart": true,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"skipFiles": [
"<node_internals>/**"
]
}
]
}
I'm including the debug config for the server because in works.
Here is an example of a method I'm trying to debug (from the Vue file), I put a break point at this.error = null . The method runs normally so I expect it to stop at the breakpoint :
methods: {
async login() {
try {
this.error = null;
const response = await AuthenticationService.login({
email: this.email,
password: this.password
})
this.$store.dispatch('setToken', response.data.token)
this.$store.dispatch('setUser', response.data.user)
}
catch (err) {
console.log(`An error has occured: ${JSON.stringify(err.response)}`)
this.error = err.response.data.error
}
}
}
I'm also trying to debug my service:
login(credentials) {
return Api().post('/login', credentials)
}
The Api object just creates the Axios request
Thanks,
Ben

Answer 1

https://www.codegrepper.com/code-examples/javascript/vuejs+vscode+unbound+breakpoint
After a whole day of searching this solved my problem
{
"version": "0.2.0",
"configurations": [
{
"name": "WSL Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*"
}
}
]
}

Answer 2

When I had Unbound Breakpoints in VSCode I ended up needing to start the process with the --inspect or --debug-brk=5858 flag. Beyond that, launch.json gave me lots of trouble, and these resources helped
https://code.visualstudio.com/docs/nodejs/nodejs-debugging
https://code.visualstudio.com/docs/nodejs/debugging-recipes
https://github.com/microsoft/vscode-recipes/tree/master/nodemon
https://code.visualstudio.com/docs/typescript/typescript-debugging
launch.json examples:
{
"type": "node",
"request": "attach",
"name": "Node: Nodemon",
"processId": "${command:PickProcess}",
"restart": true,
"protocol": "inspector",
},
{
"name": "Launch tests via NPM",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script", "testDebug"
],
"port": 5858
}
package.json
"scripts": {
"start": "NODE_PATH=./src DEBUG=express:* NODE_ENV=dev nodemon -w src --ext ts --exec node --inspect -r tsconfig-paths/register -r ts-node/register src/index.ts",
"testDebug": "NODE_ENV=test ts-mocha --debug-brk=5858 --paths -p tsconfig.json",
}
},

Answer 3

Well, it's not really an answer but I've restarted my Node server a couple of (more) times and now it stops at the breakpiont. I hope that the problem doesn't return. Now he doesn't show the value of the variables for some reason but I guess that's another problem.
Thanks for the help :)
Ben

Answer 4

I had the same issue in my vueJS project. Something to try before making any changes to files etc which 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.

Answer 5

As of May 2022...
A note if you're using vscodium and firefox you need to install firefox-devtools directly from the marketplace: https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug
Beyond that the launch.json config is standard:
{
"name": "Vue:Client",
"type": "firefox",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src",
"pathMappings": [
{
"url": "file://",
"path": ""
}
]
},
The extension suggested I insert those pathMappings.
See https://github.com/firefox-devtools/vscode-firefox-debug/issues/267