Debugging in WebStorm with Vue.js

Question

I'm debugging a Nuxt + Vue.js application and need to see the description of an object being passed to one of my components' methods. I'd also like to step through that method to see what's wrong with it.

I'm using WebStorm and have read the following from here :

I did what was instructed above and after running "npm run dev" and then hitting debug in WebStorm, my page loads in Chrome but the breakpoints I've set are never hit.

I know my method gets hit because I can see its faulty results in my Vue app running in Chrome.

I've tried using the Vue Devtools in Chrome as well, which is great, but doesn't provide the step-through functionality I'm looking for. Or if it does, I don't know about it.

Here's my Javascript debug configuration:

Could this be something to do with the order a Vue project is loaded into the browser? I'm still pretty new to Vue.js so any help would be appreciated.

Answer 1

I'd suggest setting up Nuxt to use devtool = 'source-map' for sourcemaps generation (see https://nuxtjs.org/api/configuration-build/#extend for example) to make sourcemaps more accurate. Works fine for me: