【Next.js + VSCode】デバッグ環境をサクッと構築する

本記事ではNext.jsのデバッグ環境をVisual Studio Code(VSCode)を使ってローカル環境に作る方法を解説します。構築するデバッグ環境は、サーバーサイドとクライアントサイドの両方に対応させます。

目次

バージョン

ソフトウェアのバージョンは下記のとおりです。

Next.js 10.1.2
VSCode 1.55.0

デバッグ対象のソースコード

Next.js公式チュートリアルのソースコードを拝借し、これをデバッグします。

開発サーバーの起動オプション設定

package.jsonの以下の記述を赤字のとおり修正し、開発サーバーの起動オプションを設定します。

“dev”: “next dev”,
↓
“dev”: “NODE_OPTIONS=’–inspect’ next dev“

サーバーサイドのデバッグ

VSCodeのデバッグ設定

①プロジェクトディレクトリ直下に「.vscode/launch.json」を作成します。

ファイル作成

 

②作成したlaunch.jsonは以下のとおり記述します。Next.jsの公式ドキュメント(Link)そのままです。

{
    "version": "0.2.0",
    "configurations": [
        {
            // server side debug
            "type": "node",
            "request": "attach",
            "name": "Nextjs: Server",
            "skipFiles": ["<node_internals>/**"],
            "port": 9229
        }
    ]
}

デバッグの実行

①プロジェクトのルートディレクトリで以下のコマンドを実行して開発サーバーを起動します。

% npm run dev

 

②VSCode上でサーバーサイド処理にブレークポイントを設定します(46行目の左側をクリック)。

ブレークポイント_サーバーサイド

③下図1〜3の順に選択/クリックしてデバッガを起動します。2の選択はlaunch.jsonのnameの値になっています。
デバッグ開始_server
④ブラウザでアプリにアクセスすると②で設定したブレークポイントで無事に止まりました。
デバック一時停止_server

クライアントサイドのデバッグ

VSCodeのデバッグ設定

①launch.jsonに下記赤字部分を追記します。

{
    "version": "0.2.0",
    "configurations": [
        {
            // server side debug
            "type": "node",
            "request": "attach",
            "name": "Nextjs: Server",
            "skipFiles": ["<node_internals>/**"],
            "port": 9229
        },
        {
            // client side debug
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Nextjs: Client",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

デバッグの実行

①サーバーサイドでの手順と同様に開発サーバーを起動します。

②クライアントサイドの処理でデバッグが一時停止するかを確認するためlayout.jsにuseEffectを追記しブレークポイントを設定します(13行目)。

ブレークポイント_client

 

③下図1〜3の順に選択/クリックしてデバッガを起動します。程なくしてブラウザが自動起動します。

デバッグ開始_client

 

④ブラウザが起動するとすぐに②で設定したブレークポイントで無事に止まりました。

デバック一時停止_client

 

sponsor