Nuxt.js debugging in Webstorm

How to debug Nuxt.js application on Webstorm

Fri 18 October 2019

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
Serve Nuxt.js

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

alt text
Debug Nuxt.js

  • Set your breakpoint and start debugging.

alt text
Breakpoint Nuxt.js


nuxt, debug, dev

We do newsletters, too

Get the latest news, updates, and product innovations from Ostorlab right in your inbox.