Next.jsでデバッグ実行をしてみた

3644 ワード
next.js デバッグ VSCode デバッグ テキストリンク

自分用のメモです。
Next.jsを現在、勉強中で「デバッグってどうやるんだっけ？」という疑問から調べた内容をまとめてみました。

エディタ

  • VSCode

参考記事

Next.js公式
LCL Engineers' Blog

１. Next.jsをデバッグモードで起動する

Next.jsを起動する前に、package.jsonのdevコマンドを書き換えます。

package.json
"dev": "NODE_OPTIONS='--inspect' next dev"

設定後、Next.jsを起動するとログが出力されます。

ターミナル
Debugger listening on ws://127.0.0.1:9229/5802dfbe-fc8a-4a3f-9643-97d8ff316ba7
For help, see: https://nodejs.org/en/docs/inspector
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
ready - started server on http://localhost:3000

２. VSCodeの設定をする

launch.jsonがない場合は、作成してください。

ターミナル
$ mkdir .vscode
$ touch .vscode/launch.json

launch.jsonを次のようにします。

launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "port": 9229
    }
  ]
}

3. デバッグを行う

Next.jsを起動後、F5でデバッグ実行する。
ブレークポイントに設定した箇所で処理がストップする。