Vue.js debugging can't set/hit breakpoints

[alexweininger]

Vue.js and the VS Code debugger have a long history of simply not working well, as noted in the docs. The issue stems from the way Vue.js creates source maps.

It's really inconsistent and seems like many users are still having issues setting/hitting breakpoints using the built-in JavaScript debugger in .vue files.

I'm not sure we can fix on our end, however I want to track it here because I'm hopeful we can get some help from other teams to solve the issue.

[alexweininger]

Adding some more context to this issue.

Original user comment/issue https://dev.to/victorioberra/comment/1jnfe

I tried this with Vue and when I set a breakpoint in the App.vue it just says "unbound breakpoint" and will not pause the debugger. Does it work for you?

---

Here is my original reply https://dev.to/alexweininger/comment/1jni6

It looks like there are some issues with debugging Vue.js in VS Code due to how Vue.js generates source maps.

There is a snippet about that here on the VS Code docs: https://code.visualstudio.com/docs/nodejs/vuejs-tutorial#_debugging

Note: There are currently issues with the sourcemaps generated by vue-cli, which cause issues with the debugging experience in VS Code. See https://github.com/vuejs/vue-loader/issues/1163.

Debugging works for me, however I have to set breakpoints from the Chrome devtools, which is not the best experience.

You could also try this VS Code Vue.js debugging recipe: https://github.com/Microsoft/vscode-recipes/tree/master/vuejs-cli

---

User replied that they had got it halfway working, but never got it 100% working. https://dev.to/victorioberra/comment/1jnk4

I created a vue.config.js and put the following in it:

module.exports = {
  configureWebpack: (config) => {
       config.devtool = 'source-map'
   },
};

And it kind of worked, breakpoints worked but they would only be created at the end of methods. So definitely seems to be a source maps issue.

Thanks for the reply!

So it looks like there is still investigation to do and a fix to find.

[anthonychu]

If you need an example that works: https://github.com/anthonychu/static-web-apps-chat/tree/main/frontend