🔁
[Next.js] VSCodeで設定したブレークポイントがバインドされないときはブラウザでリロードしてみる
VSCode(筆者はCursor)で公式Docの通りlaunch.jsonを設定し、エディタ上でブレークポイントを置いて、Next.js: debug server-sideでデバッグを開始した。
しかし、設置したブレークポイントが以下のように「バインドされていないブレークポイント」となってしまった。
これの理由がわからずlaunch.jsonを微調整したりしていたが、ブラウザで該当のブレークポイントが置かれたページをリロード（APIならリクエスト）したところブレークポイントがバインドされ、ちゃんとその場所で止まるようになった。
Next.js(およびReact)に詳しくないので詳細はわかってないが、少なくとも自分の開発環境では、実際に該当コードにアクセスされたタイミングでコンパイルが走るようだった。
そのため、ブラウザでアクセスしてあげれば無事にデバッガがブレークポイントを認識できるようになったのだと思う。
Discussion