Zenn
🐈‍⬛

vscodeのDev Container環境でNext.jsをデバッグする方法

2023/01/21に公開
Docker
JavaScript
Next.js
TypeScript
VS Code
tech

vscodeのDev Container環境でNext.jsをデバッグする方法

Visual Studio CodeでDev Containerを使用したNext.jsの開発で、サーバーサイドのデバッグを行おうとしましたが、Next.jsのサイトに書いてある「NODE_OPTIONS='--inspect' next dev」ではデバッグができませんでした。

Dev Containerを使用している場合のNext.jsのデバッグ方法をまとめます。
ここで紹介する方法は、起動済みのプロセスにアタッチしてデバッグする方法です。

環境

確認した環境は以下の通りです。

  • Visual Studio Code 1.74.3
    • Dev Containers 0.266.1
  • Node.js 16.19.0
  • yarn 1.22.19
  • Next.js 13.1.1
  • typescript 4.9.4

設定

launch.jsonの作成

vscodeのデバッグ起動用設定ファイルであるlaunch.jsonを以下のように設定します。
remoteRootのディレクトリは、環境に合わせて変更します。

launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Next.js server debug",
            "port": 9229,
            "address": "localhost",
            "localRoot": "${workspaceFolder}",
            "remoteRoot": "/workspaces/SampleApp", // Docker内のアプリのディレクトリ
        }
    ]
}

package.jsonへデバッグ用タスクの追加

package.jsonのscriptsへデバッグ用プロセス起動用のタスクを追加します。

以下をscriptsへ追加します。

package.json
"debug": "node --inspect=0.0.0.0:9229 node_modules/next/dist/bin/next"

デバッグ

yarn debugを実行すると、デバッガーがアタッチできるnext.jsが起動します。

$ yarn debug
yarn run v1.22.19
$ node --inspect=0.0.0.0:9229 node_modules/next/dist/bin/next
Debugger listening on ws://0.0.0.0:9229/88bf9571-f151-4f33-be30-1396b9a48cff
For help, see: https://nodejs.org/en/docs/inspector
Debugger listening on ws://0.0.0.0:9230/05021c0d-696b-4386-80aa-b22571e87e53
For help, see: https://nodejs.org/en/docs/inspector
ready - started server on 0.0.0.0:3000, url: http://localhost:3000

vscodeから"Next.js server debug"のデバッグを開始すると、デバッガーがアタッチされます。
後はブレイクポイントを指定して実行すると、ブレークポイントで止まります。

参考

https://qiita.com/makoll/items/bc350d8b7a5454d720de
https://qiita.com/tailix/items/fe3804e7a58978741d56
https://blogenist.jp/2019/06/18/8607/

Discussion