【Next.js和訳】Advanced Features/Debugging
この記事について
この記事は、Advanced Features/Debuggingの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
デバッグ
このドキュメントでは、Chrome DevToolsまたはVSCode debuggerを使用して、ソースマップを完全にサポートしながら Next.js のフロントエンドとバックエンドのコードをデバッグする方法について説明します。
この方法では、まずターミナルで Next.js のアプリケーションをデバッグモードで起動し、そこにインスペクタ（Chrome DevTools または VS Code）を接続する必要があります。
Next.js アプリケーションのデバッグに必要なのは、Node.js デバッガを公開し、インスペクタークライアントを起動することだけなので、他にも方法があるかもしれません。詳細はNode.js documentationに記載されています。
Step 1: Next.js のデバッグモードを開始
Next.js は Node.js のアプリケーションなので、--inspectというフラグを下層の Node.js プロセスに渡すだけで、デバッグモードで起動することができます。
まず、Next.js を inspect フラグ付きで起動します。
NODE_OPTIONS='--inspect' next dev
もし、npm run dev や yarn dev (参照: Getting Started) を使用している場合は、package.json にある dev スクリプトを更新してください。
"dev": "NODE_OPTIONS='--inspect' next dev"
inspect フラグをつけて Next.js を起動すると、次のようになります。
Debugger listening on ws://127.0.0.1:9229/0cf90313-350d-4466-a748-cd60f4e47c95
For help, see: https://nodejs.org/en/docs/inspector
ready - started server on http://localhost:3000
Step 2: デバッガに接続する
Chrome DevTools の使用
Google Chrome で新しいタブを開き、chrome://inspectにアクセスすると、"Remote Target "セクションに Next.js アプリケーションが表示されているはずです。ここで「inspect」をクリックすると、今後のデバッグ環境となる画面が表示されます。
Visual Studio Code でのデバッガーの使用
VS Code のattach modeを使って、手順 1 で起動したデバッガに VS Code のインスペクタを添付してみます。
プロジェクトのルートに以下の内容で .vscode/launch.json という名前のファイルを作成します。
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach to application",
"skipFiles": ["<node_internals>/**"],
"port": 9229
}
]
}
ここで F5 キーを押すか、コマンドパレットから Debug: Start Debuggingをコマンドパレットから選択すると、デバッグセッションを開始することができます。
Step 3: ブレークポイントを置いて、何が起こるかを監視
これで、debuggerステートメントを使って、バックエンドやフロントエンドのコードをいつでも一時停止することができ、コードをより正確に観察、デバッグすることができます。
現在のページを更新したり、ページのリンクをクリックしたり、API ルートを取得したりして基本的なコードをトリガーすると、コードが一時停止され、デバッガーウィンドウが表示されます。
JavaScript デバッガの使い方については、以下のドキュメントを参照してください。
Discussion