Next.js + VS Code のデバッグ時にブレークポイントがとまらないときの対応方法
自分への備忘録。
基本的には、この記事の通りにやれば OK。
ただしプロジェクトのディレクトリ構成が次のような構成のときうまくいかない。
- ${workspaceFolder}
- .vscode
- launch.json (ここにデバッガ用の設定を書く)
- app_nextjs (ここに Next.js のアプリケーションが入っている）
- package.json
- node_modules/
- pages/
- ...
世の中のたいていの解説は、app_nextjs ディレクトリの下に .vscode が来る前提のもの。しかし、そうでない場合、正常にデバッガが起動しない。
Next.js アプリケーションがどこにあるのか伝える必要がある。
lanuch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Next.js サーバサイド用のデバッガ設定",
"type": "node",
"request": "attach",
"skipFiles": ["<node_internals>/**"],
"port": 9229,
"cwd": "${workspaceFolder}/app_nextjs"
},
{
"name": "Next.js クライアントサイド用のデバッガ設定",
"type": "pwa-chrome",
"request": "launch",
"url": "http://localhost:8888",
"webRoot": "${workspaceFolder}/app_nextjs",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack://_N_E/*": "${webRoot}/*"
}
}
]
}
- サーバサイド:
"cwd": "${workspaceFolder}/app_nextjs"を追加 - クライアントサイド:
"webRoot": "${workspaceFolder}/app_nextjs"と書き換え
Author And Source
この問題について(Next.js + VS Code のデバッグ時にブレークポイントがとまらないときの対応方法), 我々は、より多くの情報をここで見つけました https://zenn.dev/elm200/articles/e2c04df9f2a92a著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol