VS Code launch.json to enable debugging of Nuxt.js apps. Note a further change is required in your nuxt.config.js

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "client: chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///*": "${workspaceRoot}/*"
      }
    },
    {
      "type": "node",
      "request": "launch",
      "name": "server: nuxt",
      "args": ["dev"],
      "osx": {
        "program": "${workspaceFolder}/node_modules/.bin/nuxt"
      },
      "linux": {
        "program": "${workspaceFolder}/node_modules/.bin/nuxt"
      },
      "windows": {
        "program": "${workspaceFolder}/node_modules/nuxt/bin/nuxt.js"
      }
    }
  ],
  "compounds": [
    {
      "name": "fullstack: nuxt",
      "configurations": ["server: nuxt", "client: chrome"]
    }
  ]
}

Deosn't work for me. Error Could not read source map for internal/deps/acorn/acorn/dist/acorn.js: Invalid URL: internal/deps/acorn/acorn/dist/acorn.js and localhost refused to connect. This is my nuxt.config.js:

....
// Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {
     extend(config, ctx) {
        if (ctx.isDev) {
           config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
        }
     }
  }

And now it throw error:
Could not read source map for internal/deps/acorn/acorn/dist/acorn.js: Invalid URL: internal/deps/acorn/acorn/dist/acorn.js Could not read source map for file:///d:/myfolder/client/node_modules/vue-template-es2015-compiler/buble.js: ENOENT: no such file or directory, open 'd:\myfolder\client\node_modules\vue-template-es2015-compiler\buble-browser-deps.umd.js.map' Could not read source map for file:///d:/myfolder/client/node_modules/postcss-custom-media/index.cjs.js: ENOENT: no such file or directory, open 'd:\myfolder\client\node_modules\postcss-custom-media\index.cjs.js.map' Could not read source map for file:///d:/myfolder/client/node_modules/postcss-nesting/index.cjs.js: ENOENT: no such file or directory, open 'd:\myfolder\client\node_modules\postcss-nesting\index.cjs.js.map'

Help :(

@fahmiegerton Try this:

build: {
    extend(config, { isClient }) {
      // Extend only webpack config for client-bundle
      if (isClient) {
        config.devtool = 'source-map'
      }
    }
  },

I am unable to get this to work. I'm running my app with yarn dev then starting up fullstack: nuxt and all my breakpoints are mostly unbound. The ones that are bound, do not pause either.

in order to stop on async functions I have to put a "debugger;" in the code. If I try to use breakpoints, they stay unbounded

I've figured it out, try to use this options:

nuxt.config.jd:

const isDev = process.env.NODE_ENV === 'development'
const config = { ...
build: {
babel: {
compact: !isDev ,
sourceRoot : __dirname
},
extend(config, { isClient }) {
// Extend only webpack config for client-bundle
if ( isDev) {
config.devtool = isClient ? 'source-map' : 'inline-source-map'
}
}
}

And the built-in debugger of vscode will start working. Hope it helps

const isDev = process.env.NODE_ENV === 'development'
const config = { ...
  build: {
    babel: {
      compact: !isDev ,
      sourceRoot : __dirname
    },
  extend(config, { isClient }) {
    // Extend only webpack config for client-bundle
    if ( isDev) {
      config.devtool = isClient ? 'source-map' : 'inline-source-map'
    }
  }
}

@aluferraz which part of this helped?

I've already extracted only the relevant part.. You must disable compact (on development env), specify the source root and build source maps (on development env)

This away you can use VSCode builtin debugger and debug async functions without a problem

const isDev = process.env.NODE_ENV === 'development'
const config = { ...
  build: {
    babel: {
      compact: !isDev ,
      sourceRoot : __dirname
    },
  extend(config, { isClient }) {
    // Extend only webpack config for client-bundle
    if ( isDev) {
      config.devtool = isClient ? 'source-map' : 'inline-source-map'
    }
  }
}

@aluferraz Thanks a lot for the information! It works also on the latest version! ❤️

hmm this config allow me only to debug the app.js file :( all breakpoints stop in the app.js

hmm this config allow me only to debug the app.js file :( all breakpoints stop in the app.js

Same issue here, have yet to get this to work.

From :
https://nuxt.com/docs/guide/going-further/debugging

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "client: chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "server: nuxt",
      "outputCapture": "std",
      "program": "${workspaceFolder}/node_modules/nuxi/bin/nuxi.mjs",
      "args": [
        "dev"
      ],
    }
  ],
  "compounds": [
    {
      "name": "fullstack: nuxt",
      "configurations": [
        "server: nuxt",
        "client: chrome"
      ]
    }
  ]
}