公式のドキュメントに沿えばできますが、ドキュメントには載っていない流れを含めて説明します。
なお、この記事ではクライアント側でデバッグをすることを想定していますので、サーバーサイド側のデバッグをされる方は他の方の記事を参考にしてください。
① launch.jsonを開いて、公式ドキュメントのコードを貼り付ける
VSCodeの左側の虫のアイコンをクリックし、launch.jsonを開くを選択する。
選択したあとに、モーダルが出ると思いますが、すぐに上書きするためどれを選んでも構いません。
公式ドキュメントのコードをlaunch.jsonに貼り付ける。
{
"version": "0.2.0",
"configurations": [
{
"name": "Next.js: debug server-side",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev" // 起動する方法が違う場合、例えばyarn devの場合はyarn devに変更
},
{
"name": "Next.js: debug client-side",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000" // プロジェクトが立ち上がるURLが異なれば、そのURLに変更
},
{
"name": "Next.js: debug client-side (Firefox)",
"type": "firefox",
"request": "launch",
"url": "http://localhost:3000", // プロジェクトが立ち上がるURLが異なれば、そのURLに変更
"reAttach": true,
"pathMappings": [
{
"url": "webpack://_N_E",
"path": "${workspaceFolder}"
}
]
},
{
"name": "Next.js: debug full stack",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/node_modules/.bin/next",
"runtimeArgs": ["--inspect"],
"skipFiles": ["<node_internals>/**"],
"serverReadyAction": {
"action": "debugWithEdge",
"killOnServerStop": true,
"pattern": "- Local:.+(https?://.+)",
"uriFormat": "%s",
"webRoot": "${workspaceFolder}"
}
}
]
}http://localhost:3000の部分は、プロジェクトのURLが例えばhttp://localhost:3000/todoのような場合はそのように記載します。
② 処理を止めたい部分にブレークポイントを置き、デバッガを起動する。
VSCodeで適当なファイルを開き、行番号の左側にカーソルを移動させると赤い丸が表示されるので、そこでクリックをしてブレークポイントを置く。
その行の変数に含まれる値がデバッグをした際に表示されます。
そして、虫のアイコンをクリックしたら出てくる、VSCodeの左側のサイドバー上部にある、選択メニューを「Next.js: debug client-side」を選択し、▷をクリックする。
③ プロジェクト内のリンクをクリックして、デバッグができているか確認する。
▷をクリックすると、chromeでプロジェクトが立ち上がります。
そのプロジェクトの中で、ブレークポイントを置いた行に処理が走りそうな部分をクリックするとデバッグができるようになるはずです。
あとは、VSCodeを見ながらいろいろ触ってみてください。