知ってる人も多いかもしれないけど、Chromeのブラウザー開発者ツールでデバックができる。
#方法
ツールを開いて、「ソース」タブからソースコードが書かれたファイルを選択すると、デバック画面が表示される。
#使用感
ブレークポイントなども設定でき、使い方はVScodeのそれとほぼ変わらない。
クライアントサイドにあるコードは設定など不要でデバックできる。
ReactなどのSPAはブラウザにほぼ全てのソースコードがある場合が多いため、VScodeでlaunch.jsonを設定するのがめんどくさければこちらでもいいかも。
Next.jsの公式サイトにも記載されている方法なのでぜひ使ってみてください。
ちなみにサーバーサイドのデバックもNext.jsならできるっぽい。方法は下記の記事でどうぞ。
#参考文献
https://nextjs.org/docs/advanced-features/debugging#debugging-with-chrome-devtools