Unable to set a breakpoints to debug a NuxtJS app in VSCode

user_1729759 0
Viewed 2424

I'm trying to debug a Nuxt.JS app in VSCode, following instructions provided here the launch.json file is as follow:

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

But trying to set a breakpoint I receive the message: "breakpoint ignored because generated code not found (source map problem ?)"

I can't figure it out how to further modify the launch.json file or which option to add to nuxt.config.js.

vscode-debugger nuxt.js
1 Answers

Try this (client only):

launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

nuxt.config.js:

export default {
  build: {
    // Enable breakpoints
    extend (config, ctx) {
      if (ctx.isDev) {
        config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
      }
    }
  }
}
user_107272830
Related