DEV Community

Discussion on: Debugging Azure Static Web Apps in VS Code

Collapse
alexweininger profile image
Alex Weininger Author

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:
code.visualstudio.com/docs/nodejs/...

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

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:
github.com/Microsoft/vscode-recipe...

I've created an issue on our repository:
github.com/microsoft/vscode-azures...

Feel free to add more details/input on that issue.

Collapse
victorioberra profile image
Victorio Berra

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

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

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!