Skip to content

Instantly share code, notes, and snippets.

@bcnzer
Created December 25, 2019 00:40
Show Gist options
  • Save bcnzer/cb05d6bb088760811f366d54cbd8f7f4 to your computer and use it in GitHub Desktop.
Save bcnzer/cb05d6bb088760811f366d54cbd8f7f4 to your computer and use it in GitHub Desktop.
VS Code launch.json to enable debugging of Nuxt.js apps. Note a further change is required in your nuxt.config.js
{
"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"]
}
]
}
@JoeEarly
Copy link

JoeEarly commented Feb 7, 2021

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'
      }
    }
  },

@RobbieTheWagner
Copy link

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.

@aluferraz
Copy link

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

@aluferraz
Copy link

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

@RobbieTheWagner
Copy link

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?

@aluferraz
Copy link

aluferraz commented Feb 15, 2022

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'
    }
  }
}

@PlusA2M
Copy link

PlusA2M commented Jun 27, 2022

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

@JonathanSchndr
Copy link

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

@ssyberg
Copy link

ssyberg commented Feb 28, 2023

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.

@snowdream
Copy link

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"
      ]
    }
  ]
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment