React のデバッグ設定

環境

• Windows 11
• Visual Studio Code
• React 18.3.1
• Create React App でアプリケーションを作成

設定のサンプルはこちら。

---

通常の設定

Create React App で作成した React アプリケーションを Visual Studio Code でデバッグする場合、 Debugging in the Editor にある通り、下記手順でデバッグできる。

1. launch.json に設定を追加。
2. npm start を実行。
3. F5 でデバッグ開始。

ただ、 npm start を実行すると F5 デバッグ開始前にデフォルトブラウザーが1つ立ち上がるため、不要な場合は .env.development ファイルを用意して、下記設定を追加する。

BROWSER=none

• .env ファイル(.env.development 含む)については Adding Development Environment Variables In .env を参照。
• BROWSER 変数については Advanced Configuration を参照。

一括起動の設定

npm start もまとめて F5 で実行したい場合、下記のように設定する。

launch.json

launch.json は下記のように設定する。

{
  "version": "0.2.0",
  "configurations": [
    {
      // 開発モードで App を実行する。
      "name": "Start Local Dev",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm start"
    },
    {
      // Chrome を起動する。
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      },
      // Start Local Dev が準備できるまで、起動を遅らせる。
      "preLaunchTask": "Delay startup"
    }
  ],
  "compounds": [
    {
      // "Start Local Dev"、 "Launch Chrome" を実行する。
      "name": "Debug all",
      "configurations": [
        "Start Local Dev",
        "Launch Chrome"
      ],
      "stopAll": true
    }
  ]
}

1. Start Local Dev は npm start を実行する。
2. Launch Chrome は Chrome を起動してデバッグ開始する。
3. 上記 Start Local Dev と Launch Chrome を F5 でまとめて実行できるように定義した Debug all を compounds に追加する。 "stopAll": true を設定しておくと、 Shift + F5 で全てデバッグ停止できる。

tasks.json

Delay startup を定義した tasks.json は下記の通り。

{
  "version": "2.0.0",
  "tasks": [
    {
      // 起動を遅らせる。
      "label": "Delay startup",
      "type": "shell",
      "command": "timeout 10",
      "presentation": {
        "close": true,
        "focus": false,
        "panel": "new",
        "reveal": "silent",
        "showReuseMessage": false
      }
    }
  ]
}

Start Local Dev と Launch Chrome を同時実行すると、 npm start がデバッグ可能状態になる前にブラウザーが起動することがある。 それを解決するために timeout 10 を設定したタスクをブラウザー起動前に "preLaunchTask": "Delay startup" で呼び出し、10秒待機させている。

設定後、デバッグ構成で Debug all を選択して F5 で実行すれば一括起動できる。