LCL Engineers' Blog

バス比較なび・格安移動・バスとりっぷを運営する LCLの開発者ブログ

VS CodeでNext.jsをデバッグするやり方

この記事はLCL Advent Calendar 2020 - 23日目です。

qiita.com

フロントエンドエンジニアの川辺です。

もうすっかり年末ですね。 年末は毎年ソワソワしているのですが、私事ですが今年は12月末に子供が生まれる予定なので例年以上にソワソワしています。 赤ちゃんを迎える準備に忙しい日々を送っています。

弊社では11月から新規案件をNext.jsで実装しているのですが、Next.jsについてあれこれ調べてる中でNext.js公式サイトでVS Codeでデバッグする方法についてのドキュメントを見つけたので今日はそれを紹介しようと思います。

npx create-next-appを実行してnextを開発する環境が既にできている前提で進めていきます。

ステップ1 Next.jsをデバッグモードで起動する

まずはnextを起動する時にNODE_OPTIONS='--inspect'を渡すようにします。 具体的にはpackage.jsondevコマンドを以下のように書き換えます。

"dev": "NODE_OPTIONS='--inspect' next dev"

上記の設定が完了後にNext.jsを起動すると次のようなログを吐くようになります。

Debugger listening on ws://127.0.0.1:9229/e9b9c833-a66c-4fcd-88b5-fc7d877e4b63
For help, see: https://nodejs.org/en/docs/inspector
ready - started server on http://localhost:3000

下記がここまでの手順を終えた状態のキャプチャです。

f:id:kavis777:20201217181744p:plain

ステップ2 VS Codeのデバッガーを起動する

次にVS Code側(.vscode/launch.json)の設定をします。 .vscode/launch.jsonがディレクトリに存在しない人は以下のコマンドでファイルを作成してください。

$ mkdir .vscode
$ touch .vscode/launch.json

そして.vscode/launch.jsonに以下の内容をコピペしてください。

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

以下のように設定できていればバッチリです。

f:id:kavis777:20201217183556p:plain

ステップ3 ブレークポイントを貼って状態を確認する

ここまでできたら準備完了です。 npm run devが実行されている状態でVS Codeのデバックの画面に行ってLaunch Programを実行します。 ※ここでエラーになってしまう人は下の番外編の手順を試してみてください。

適当なところにブレークポイントを貼って画面をリロードしたらデバッグできるようになっているはずです。

f:id:kavis777:20201217190541p:plain

番外編 急にVS Codeのブレークポイントが効かなくなった場合

余談ですが、ある日突然Launch Program実行時に下記のようなエラーを吐いてブレークポイントが効かなくなってしまいました。

Could not read source map for file:///Users/{user}/my-app/node_modules/next/dist/compiled/path-to-regexp/index.js: ENOENT: no such file or directory, open '/Users/{user}/my-app/node_modules/next/dist/compiled/path-to-regexp/index.js.map'

f:id:kavis777:20201217185739p:plain

どうやらsource mapの読み込みがうまくいっていないようです。 調べてみたところvscodeのissuesで同様の現象を報告している人がいました。

この問題は.vscode/launch.jsonに以下の設定を追記することで解決しました。

"resolveSourceMapLocations": [
  "${workspaceFolder}/**",
  "!**/node_modules/**"
]

f:id:kavis777:20201217185324p:plain

終わりに

意外と簡単な設定でデバッグできるようになったと思います。

個人的にはTSを使うようになってからはそこまで頻繁にデバッグモードで値を確認しにいくことはなくなりました。

もう型のない世界には戻れなくなってきているのですがそれはまた別の機会に書こうと思います。