Nuxt•4d ago

How to use vscode debugger in vue nuxt 2 project?

hi guys When I run the project with the debugger, I'm unable to set breakpoints successfully. This is causing me difficulties in effectively debugging my application. I've included the contents of my nuxt.config.js file below for your reference:

export default {
  // devtools: { enabled: true },
  build: {
    extend(config, ctx) {
      if (ctx.isDev) {
        config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
      }
    }
  },
  configureWebpack: {
    devtool: 'source-map'
  },
  site: {
    debug: true,
  },
  sourcemap: {
    server: true,
    client: true
  },
  ssr: false,
  cache: false,
  ... ... ...
}

export default {
  // devtools: { enabled: true },
  build: {
    extend(config, ctx) {
      if (ctx.isDev) {
        config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
      }
    }
  },
  configureWebpack: {
    devtool: 'source-map'
  },
  site: {
    debug: true,
  },
  sourcemap: {
    server: true,
    client: true
  },
  ssr: false,
  cache: false,
  ... ... ...
}

I've tried updating the webRoot and sourceMapPathOverrides configurations, as well as rebuilding the Nuxt.js project, but I'm still unable to set breakpoints successfully. Could you please provide any guidance or suggestions on how I can resolve this issue? Thank you in advance for your help. I look forward to your response.

1 Reply

'.ଓ•4d ago

and this is launch.json file

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "client: chrome",
      "runtimeExecutable": "C:/Program Files/Google/Chrome/Application/chrome.exe",
      "url": "http://localhost:3000",
      "resolveSourceMapLocations": [
        "${workspaceFolder}/**",
        "!**/node_modules/**"
      ],
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*",
        "webpack:///./comComponents/*": "${webRoot}/comComponents/*",
        "webpack:///./pages/*": "${webRoot}/pages/*",
        "webpack:///./layouts/*": "${webRoot}/layouts/*",
        "webpack:///./store/*": "${webRoot}/store/*"
      }
    },
    {
      "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"
      ]
    }
  ]
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "client: chrome",
      "runtimeExecutable": "C:/Program Files/Google/Chrome/Application/chrome.exe",
      "url": "http://localhost:3000",
      "resolveSourceMapLocations": [
        "${workspaceFolder}/**",
        "!**/node_modules/**"
      ],
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*",
        "webpack:///./comComponents/*": "${webRoot}/comComponents/*",
        "webpack:///./pages/*": "${webRoot}/pages/*",
        "webpack:///./layouts/*": "${webRoot}/layouts/*",
        "webpack:///./store/*": "${webRoot}/store/*"
      }
    },
    {
      "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"
      ]
    }
  ]
}

Gaming

Programming

How to use vscode debugger in vue nuxt 2 project?