最近Reactを会社でやることになり調べた内容をここにアウトプットしておきます。
ReactアプリをVisual Studio Code（VS Code）でデバッグするには、以下の手順で簡単にセットアップできます。
1. 開発サーバーを起動する
まず、ターミナルでReactアプリの開発サーバーを起動します。
例：
npm start
Viteの場合は
npm run dev
これで通常、http://localhost:3000（Viteは5173など）でアプリが動作します。
2. launch.jsonを作成する
VS Codeの左側の「実行とデバッグ」アイコンをクリックし、「launch.jsonファイルを作成」を選択します。
デバッグ対象に「Web App (Chrome)」や「Web App (Edge)」を選びます。
生成されたlaunch.jsonのurlを、起動している開発サーバーのURL（例：http://localhost:3000）に修正します。
例：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src"
}
]
}
プロジェクト構成によってwebRootは調整してください。
3. ブレークポイントを設定する
デバッグしたいコードの行番号の左側（エディタのガター）をクリックして、赤い丸のブレークポイントを設定します。
4. デバッグを開始する
F5キーを押すか、「デバッグの開始」ボタンをクリックします。
自動的にChrome（または選択したブラウザ）が起動し、指定したURLでアプリが開きます。
5. デバッグ操作
- ブレークポイントで処理が停止します。
- 変数の値を確認したり、ステップ実行、コールスタックの確認ができます。
- 必要に応じて変数の値を書き換えることも可能です。
補足
- 開発モードではReactのStrictModeにより、レンダリングが2回行われるためブレークポイントが2回止まることがあります。
- ブレークポイントが効かない場合は
launch.jsonのwebRootやurlの設定を見直してください。
この手順で、VS Code内で効率的にReactアプリのデバッグが可能です。ブラウザとエディタを行き来せず、コードの修正や変数の確認が一元的にできます。