[WSL] VS CodeでNext.jsのデバッグ

#環境

• WSL Ubuntu 16.04.6 LT
• Next.js 9.1.7

#手順

Microsoft公式を参考にしますが、一部アレンジする必要があります。

それは以下の2点です。さくっと終わります。

• launch.jsonを変更
• VS CodeでRemote Debugを可能にする設定

以下、それぞれの手順です。

launch.jsonを変更

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Next: Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "skipFiles": [
        "${workspaceFolder}/node_modules/**/*.js",
        "<node_internals>/**/*.js"
      ]
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Next: Node",
      "runtimeExecutable": "${workspaceFolder}/node_modules/next/dist/bin/next",
      "port": 9229,
      "env": {
        "NODE_OPTIONS": "--inspect"
      },
      "skipFiles": [
        "${workspaceFolder}/node_modules/**/*.js",
        "<node_internals>/**/*.js"
      ]
    }
  ],
  "compounds": [
    {
      "name": "Next: Full",
      "configurations": [
        "Next: Node",
        "Next: Chrome"
      ]
    }
  ]
}

参考：https://spectrum.chat/next-js/general/debugging-in-vscode~f93e5e29-6cce-4b43-8fed-e5a6d302d04e

VS CodeでRemote Debugを可能にする設定

こちらの記事を参考に設定するだけです。