【Next.js和訳】Advanced Features/Debugging
この記事について
株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。
この記事は、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
NODE_OPTIONS='--inspect' npm run dev や NODE_OPTIONS='--inspect' yarn dev を使っても動作しませんのでご注意ください。これは、同じポートで複数のデバッガを起動しようとするもので、npm/yarnプロセス用とNext.js用のものがあります。すると、コンソールに Starting inspector on 127.0.0.1:9229 failed: address already in use というようなエラーが表示されます。
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