Nuxt.js debugging in Webstorm


To debug a Nuxt.js application using webstorm:

  • Configure devtool to use eval-source-map. Devtool is a webpack setting that controls source code mapping:
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {
      // config.devtool = 'eval-source-map'
      if (ctx.isDev && ctx.isClient) {
        config.devtool = 'eval-source-map'
      }
    }
  }
  • (Optional) Serve your application by adding an npm target to Webstorm:

alt text

  • Add a target to debug your Javascript point to your application URL:

alt text

  • Set your breakpoint and start debugging.

alt text