vscode上でlaunch.jsonを作成して設定をし、Next.jsをデバッグしてブレイクポイントの設定や対話実行、replを行えるようにする設定を解説、紹介します。

ここ数ヶ月SPAのSaaSアプリをreactで作っていたところなのですが、SPA特有のページ速度の問題とか、APIのスロットリングやキャッシュ、webpackのbundle.jsの分割、split chunks、最適化問題という深淵に足を踏み入れ、絶望しかけていた。

そのところSSR・サーバーサイドレンダリングのことを思い出し、そうだ、next.js試そうと思いったのが先週、既存のコードをリファクタリングしながらnext.jsに移行していき、やはり出てくる問題がデバッグとブレイクポイントの問題です。

node.jsプログラムのデバッグ自体は前からやっているので、npxで以下のようにlaunch.jsonを書いてデバッグを起動していました。

{
  "type": "pwa-node",
  "request": "launch",
  "name": "Nextjs",
  "program": "/home/yuis/.nvm/versions/node/v17.9.0/bin/npx",
  "args": [
    "next",
    "dev",
  ],
  "console": "integratedTerminal",
},

だいたいのnode.jsプログラムはシンプルであれば上記で動くのですが、next.jsはブレイクポイントの起動がすごい遅かったり、ブレイクポイントが動くときと動かないときがあって不安定なのが目立ちました。

そこで少しggってみると公式のドキュメントがvscodeでのデバッグにメンションしているのを見つけました。

Advanced Features: Debugging | Next.js

そこに3つ設定が置いてあるのですが、うまい具合に動作したのは下記の3つ目。

{
  "name": "Next.js: debug full stack",
  "type": "node-terminal",
  "request": "launch",
  "command": "npm run dev",
  "console": "integratedTerminal",
  "serverReadyAction": {
    "pattern": "started server on .+, url: (https?://.+)",
    "uriFormat": "%s",
    "action": "debugWithChrome"
  }
}

2つ目のクライアントサイドのやつのchromeにattachするやつは試してません。クライアントサイドのjavascriptのデバッグはソースマップでreactのソースコードになっていますから、chromeのデベロッパーツールからデバッグできます。これをわざわざvscodeでやると、経験上、動作が重くなります。

上記の3つ目のものはブレイクポイントが不安定といったこともなく、ページをリロードするにしてもurlルートを変えるにしてもエラー前のコードに入れるにしても起動してくれるので、ストレスがないです。

そしてまた、おそらくproduction環境のデバッグについてもnpm run devをnpm run startもしくはnpx next startに変えれば同じ要領で動くはずです。

production環境のデバッグではbuildを自動化すると便利です。

# ./.vscode/launch.json
"preLaunchTask": "build",

# ./.vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "command": "npm",
      "args": [
        "run",
        "build"
      ],
      "group": "build",
    }
  ]
}

ちなみにvscodeのバージョンは1.64.2です。22年2月のバージョンなので6ヶ月前ですね…自動アップデート無効にしてますから気がつくと古くなります。デバッグが不安定なのはそのせいかもしれないし違うかもしれない。

ただ新しいバージョンだから不安定になる、というのもよくありますので、不安定な場合には上記のlaunch.jsonとこのvscodeバージョンで固定で試してみるとよいかもしれません。