2025年5月29日 / 最終更新日時 : 2026年2月13日 @yuuji_mimura React

Reactのデバッグ

今回は「React」を、VSCodeでデバッグできる様にセットアップします。ReactはBlazorなどと同じフロントエンドのユーザーインターフェイスを構築できるフレームワークになっています。Vue.jsと同じJavaScriptを使用していて、WEBアプリのフロントエンドとして最も使用されているフレームワークの様です。

Reactを使用するにはnpmというパッケージマネージャーが必要なのでNode.jsをあらかじめインストールしておく必要があります。Windows版のVSCodeをご使用の場合は、こちらのサイト様等を参考にしてNode.jsをインストールして下さい。WSL2をご使用の場合はこちらの記事等をご参照ください。

※(2026/02/09 追記) Next.jsのデバッグ方法を追加しました。

1 Reactプロジェクトを作成します
2 Reactプロジェクトをデバッグします
3 Next.js をデバッグするには

Reactプロジェクトを作成します

任意のフォルダ(react-app等)を作成してVSCodeで開きます。「Ctrl + @」と入力してターミナル画面を開いて以下の様に入力して、Reactプロジェクトのひな型を作成します。

npm create vite@latest . -- --template react

または以下の様にWindowsのターミナルに入力して、プロジェクトのひな型を作成することも出来ます。

npm create vite@latest react-app -- --template react

プロジェクトが作成されたら以下の様に入力して、必要なパッケージをインストールして開発用サーバーを起動します。

npm install
npm run dev

サーバーが起動すると以下の様な表示になりますので、「http://localhost:5173/」の部分をCtrlキーを押しながらクリックするとブラウザーが起動してトップページが表示されます。停止する場合はターミナル画面に「Ctrl + c」と入力します。

  VITE v6.3.5  ready in 258 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

開発用サーバーが待ち受けするポート番号を変更したい場合は、プロジェクトフォルダ内にある「vite.config.js」ファイルを開いて以下の様な設定を7行目あたりに追加します。(デフォルトは5173になっています。)

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3001,
  },
})

サーバーが起動している場合は、設定を保存するとすぐに待ち受けポートが変更されます。停止している場合は再度「npm run dev」と入力してサーバーを起動すると設定が反映されます。

Reactプロジェクトをデバッグします

プロジェクトフォルダ内に「.vscode/launch.json」というファイルを作成して、以下の様な設定を書き込みます。11行目の待ち受けポートを開発サーバーが待ち受けているポートに合わせます。12行目にReactのソースファイルの場所「/src」を追加します。

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "localhost に対して Chrome を起動する",
            "url": "http://localhost:5173",
            "webRoot": "${workspaceFolder}/src"
        }
    ]
}

「src」フォルダ内にある「main.jsx」ファイルを開いて6行目あたりにブレークポイントを設定します。「F5」キーを押すか、デバッグ画面の「実行とデバッグ」ボタンを押してデバッガーを起動すると設定したブレークポイントで停止します。

しかし以下の様にワークスペースフォルダを作成して、その中で複数のReactプロジェクトを管理している場合はこの設定ではブレークポイントで停止しない様です。

react-projects
  ├─react-app1
  └─react-app2

その場合は「.vscode/launch.json」ファイルの12行目を以下の様に修正して、「ブレークポイントを設定したファイルを最前面に表示して」デバッガーを起動すると停止する様です。

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "localhost に対して Chrome を起動する",
            "url": "http://localhost:5173",
            "webRoot": "${fileDirname}"
        }
    ]
}

どうしても停止しない場合は、ソースファイルに「debugger;」という文字列を追加しておくと必ず止まる様です。(ブレークポイントを設定していなくても停止します。)

Next.js をデバッグするには

おまけで、Next.jsのデバッグ方法もご紹介します。今回の実行環境は以下の様になっています。

Next.js・・・バージョン 16.1.6

まず任意のフォルダ(next-js-app等)を作成してVSCodeで開きます。「Ctrl + @」と入力してターミナル画面を開いて以下の様に入力して、Next.jsプロジェクトのひな型を作成します。

npx create-next-app@latest .

コマンドを入力するとどの様に作成するか聞かれますので、デフォルト設定を選択します。

PS C:\MAMP\htdocs\next-js-app> npx create-next-app@latest .
? Would you like to use the recommended Next.js defaults? » - Use arrow-keys. Return to submit.
>   Yes, use recommended defaults
    TypeScript, ESLint, Tailwind CSS, App Router
    No, reuse previous settings
    No, customize settings

次に「.vscode\launch.json」というファイルを作成して以下の様に記述します。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug full stack",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/next/dist/bin/next",
      "runtimeArgs": ["--inspect"],
      "skipFiles": ["<node_internals>/**"],
      "serverReadyAction": {
        "action": "debugWithChrome",
        "killOnServerStop": true,
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "webRoot": "${workspaceFolder}"
      }
    }
  ]
}

任意のファイル(app\page.tsxなど)を開いて、行番号の左側をクリックしてブレークポイントを設定します。あとは「F5」キーを押すか実行ボタンを押すと、ブラウザーが起動してブレークポイントで停止します。(npm run dev などの様にあらかじめサーバーを起動しておく必要はありません。)

余談ですが、このデバッグ方法で起動されたブラウザーは「自動操作可能なブラウザー」として起動されるため、「OAuth」 (一例では、ログイン時に「Google で続行」などと表示されている機能) を使用してログインしようとすると失敗します。

そのような場合は「”serverReadyAction”」項目を削除した設定を追加します。この設定でデバッガーを起動してから、手動で通常のブラウザーを起動して URL 欄に「localhost:3000」と入力するとデバッグ可能です。この場合も「npm run dev」などの様にあらかじめサーバーを起動しておく必要はありません。

    {
      "name": "Next.js: debug full stack no browser",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/next/dist/bin/next",
      "runtimeArgs": ["--inspect"],
      "skipFiles": ["<node_internals>/**"],
    }

以上です。よろしかったらお試しください。