Nuxt 2 & Nuxt 3 の VSCode デバッグ方法

Nuxt 2 の場合

1. .vscode/launch.json に chromeとnuxtの起動コマンドを追加

{
  "version": "0.2.0",
  "compounds": [
    {
      "name": "fullstack: nuxt",
      "configurations": ["server: nuxt", "client: chrome"]
    }
  ],
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "client: chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "userDataDir": false,
      "disableNetworkCache": true,
      "sourceMaps": true,
      "skipFiles": [
        "node_modules/**/*.js",
        "lib/**/*.js",
        "_nuxt/*.js",
        "<node_internals>/**"
      ],
      "sourceMapPathOverrides": {
        "webpack:///*": "${webRoot}/*"
      },
    },
    {
      "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"
      }
    }
  ]
}

2. nuxt.config.js に source-map を使用する設定を追加

export default {
  // 以下を追加する
  build: {
    extend(config, ctx) {
      if (ctx.isDev) {
        config.devtool = ctx.isClient ? "source-map" : "inline-source-map";
      }
    },
  },
}

サンプル
https://github.com/zorro901/nuxt2-vscode-debug-example

Nuxt 3 の場合

1 .vscode/launch.json に chromeとnuxtの起動コマンドを追加

{
  "version": "0.2.0",
  "compounds": [
    {
      "name": "fullstack: nuxt",
      "configurations": ["server: nuxt", "client: chrome"]
    }
  ],
  "configurations": [
    {
      "name": "client: chrome",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "server: nuxt",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "console": "integratedTerminal"
    }
  ]
}

サンプル
https://github.com/zorro901/nuxt3-vscode-debug-example