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.

lena · Accepted Answer · 2020-01-24 14:04:25Z

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:

answered Jan 24, 2020 at 14:04

lena

94.4k11 gold badges155 silver badges160 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

L.Nightman · Accepted Answer · 2023-03-16 02:55:10Z

0

This solution worked for me: https://blog.ostorlab.co/nuxt-debug-webstorm.html

build: {
    extend(config, ctx) {
      // config.devtool = 'eval-source-map'
      if (ctx.isDev && ctx.isClient) {
        config.devtool = 'eval-source-map'
      }
    }
  }

answered Mar 16, 2023 at 2:55

L.Nightman

691 silver badge5 bronze badges

Collectives™ on Stack Overflow

Debugging in WebStorm with Vue.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related