VSCodeでnextjsのTurbopackでもデバッグする

結論

turbopackに対応したvscodeのlaunch.jsonがまだ公式ドキュメントに用意されてないのでここに残しておきます。

launch.json

{
  "version": "0.2.0",
  "compounds": [
    {
      "name": "Debug Start All",
      "configurations": ["Launch Chrome", "Start Nextjs"],
      "stopAll": true
    }
  ],
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "/turbopack/[project]/*": "${webRoot}/*"
      },
      "presentation": {
        "hidden": true
      }
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Start Nextjs",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "/turbopack/[project]/*": "${webRoot}/*"
      },
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev", "--", "--turbo"],
      "presentation": {
        "hidden": true
      }
    }
  ]
}

※pnpmの場合は、rutimeExecutableとruntimeArgsのワタシ型を変えるとうまくいきます

launch.json

~~ 省略 ~~ 
 "runtimeExecutable": "pnpm",
 "runtimeArgs": ["run", "dev", "--turbo"],
 ~~ 省略 ~~ 

turboモードとは

next devをたたくときのオプションで、--turboを渡すことです。
next dev --turboにするとturbopackを使って早く立ち上がってくれます。

launch.json

現在の公式ドキュメントに載っているlaunch.jsonはこちら

以下抜粋

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/.bin/next",
      "runtimeArgs": ["--inspect"],
      "skipFiles": ["<node_internals>/**"],
      "serverReadyAction": {
        "action": "debugWithEdge",
        "killOnServerStop": true,
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "webRoot": "${workspaceFolder}"
      }
    }
  ]
}