💻

Next.js13（App Router）でVSCodeのデバッグツールを使う

2023/09/17に公開

プロジェクトを用意

適当にプロジェクトを用意します。

今回のサンプル

`.vscode/launch.json`の作成

上記リンク先の内容を参考にして.vscode/launch.jsonファイルを作成します。
launch.jsonの仕様についてはこちらを参照。

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

configurationsの内容はそれぞれ以下のようになってます。

サーバーサイドで実行されるコードのみをデバッグするケース
クライアントサイドで実行されるコードのみをデバッグするケース
サーバーサイドとクライアントサイドの両方を同時にデバッグするケース

実際に動作を確認してみる

サーバーサイドで実行されるコードのみをデバッグするケース

サーバーサイドでレンダリングされる場所にブレークポイントを貼る

`Next.js: debug server-side`を選択

`RUN AND DEBUG`の再生ボタンを押してDebuggerを起動

設定の"command": "npm run dev"が実行されてプロセスが作成されます。
Debuggerが自動でその作成されたプロセスにアタッチします。

エディタのCALL ATACKでDebuggerが走っていることがわかります。
また、エディタのLOADED SCRIPTSで色々読み込まれていることがわかります。

ブラウザで`http://localhost:3000`を開いてブレークポイント貼った画面を開く

そうするとちゃんとブレークポイントのところで停止してくれます。

※ この場合はクライアントサイドのコード（use clientが書かれているファイル）にブレークポイントを貼っても停止しません。

クライアントサイドで実行されるコードのみをデバッグするケース

クライアントサイドでレンダリングされる場所にブレークポイントを貼る

use clientが書かれているファイルのコードにブレークポイントを貼ります。

`Next.js: debug client-side`を選択

`RUN AND DEBUG`の再生ボタンを押してDebuggerを起動

Debuggerだけ起動した状態になります。

Debuggerによって別プロセスでChromeが起動しますが、Next.jsのプログラムがまだ実行されていないので何も表示されません。

`npm run dev`を実行してプログラムを起動

ブラウザをリロードするとページの内容が表示されます。

エディタのLOADED SCRIPTSで色々読み込まれていることがわかります。

Counterのページを開いて`Click me`をクリック

ちゃんとブレークポイントのところで停止しています。

※ この場合はサーバーサイドのコードにブレークポイントを貼っても停止しません。

サーバーサイドとクライアントサイドの両方を同時にデバッグするケース

ブレークポイントを貼る

ブレークポイントは前の例と同様の場所です。

`Next.js: debug full stack`を選択

`RUN AND DEBUG`の再生ボタンを押してDebuggerを起動

Debuggerによって別プロセスでChromeが立ち上がります。
設定の"command": "npm run dev"が実行されるのでページの内容も表示されます。

エディタのLOADED SCRIPTSで色々読み込まれていることがわかります。
serverReadyActionの"action": "debugWithChrome"によって、Browser Debugも起動していることがわかります。

ブラウザでサーバーサイドのブレークポイントを貼った場所を開く

ちゃんとブレークポイントで停止します。

ブラウザでクライアントサイドのブレークポイントを貼った場所を開く

こちらもちゃんとブレークポイントで停止します。
こちらはBrowser Debugのほうで検知しているのがわかります。

参考

Discussion