この記事はLCL Advent Calendar 2020 - 23日目です。
フロントエンドエンジニアの川辺です。
もうすっかり年末ですね。 年末は毎年ソワソワしているのですが、私事ですが今年は12月末に子供が生まれる予定なので例年以上にソワソワしています。 赤ちゃんを迎える準備に忙しい日々を送っています。
弊社では11月から新規案件をNext.jsで実装しているのですが、Next.jsについてあれこれ調べてる中でNext.js公式サイトでVS Codeでデバッグする方法についてのドキュメントを見つけたので今日はそれを紹介しようと思います。
※npx create-next-appを実行してnextを開発する環境が既にできている前提で進めていきます。
ステップ１ Next.jsをデバッグモードで起動する
まずはnextを起動する時にNODE_OPTIONS='--inspect'を渡すようにします。
具体的にはpackage.jsonのdevコマンドを以下のように書き換えます。
"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
下記がここまでの手順を終えた状態のキャプチャです。
ステップ２ 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
}
]
}
以下のように設定できていればバッチリです。
ステップ３ ブレークポイントを貼って状態を確認する
ここまでできたら準備完了です。
npm run devが実行されている状態でVS Codeのデバックの画面に行ってLaunch Programを実行します。
※ここでエラーになってしまう人は下の番外編の手順を試してみてください。
適当なところにブレークポイントを貼って画面をリロードしたらデバッグできるようになっているはずです。
番外編 急に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'
どうやらsource mapの読み込みがうまくいっていないようです。 調べてみたところvscodeのissuesで同様の現象を報告している人がいました。
この問題は.vscode/launch.jsonに以下の設定を追記することで解決しました。
"resolveSourceMapLocations": [
"${workspaceFolder}/**",
"!**/node_modules/**"
]
終わりに
意外と簡単な設定でデバッグできるようになったと思います。
個人的にはTSを使うようになってからはそこまで頻繁にデバッグモードで値を確認しにいくことはなくなりました。
もう型のない世界には戻れなくなってきているのですがそれはまた別の機会に書こうと思います。
