Next.jsでServer Sideのconsole.logを見る
Next.jsはSSRとかSSGとかでServerSideのロジックを書ける
その際にconsole.logでデバッグしたいときににどうするか
VSCodeのdebuggerを使う
準備
.vscode/launch.json{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Next: Node",
"runtimeExecutable": "npm",
"cwd": "${workspaceFolder}/src",
"runtimeArgs": ["run", "debug"],
"console": "integratedTerminal"
},
]
}package.jsonに追記
package.json "scripts": {
"debug": "NODE_OPTIONS='--inspect' next"
},これは上記の
launch.json の runtimeArgs に対応しているそのprojectのlocalhostをVSCodeから起動する
なので普段みたいにCLIで
$ npm start はしないVSCodeのサイドバーの虫アイコンをクリックし、上の▶をクリックするとサーバーが起動する
URLは普通に localhost:3000
VSCodeのターミナルに表示される
ログを見る
ほしい値のところをbreak point設定したらそこで止まるので見れる
ブラウザのdev toolの、左上のNode.jsマークをclickすればサーバー側のdev toolが開かれる
こっちの方が楽
いつもどおりconsole.logを仕込む感じでやればいい
ただしこのlogはサーバー側のものであることに注意
例えばComponents内にconsole.logを仕込むとlogが表示されるが、これはSSRによるもの
参考
docs