VSCodeでlaunch.json設定

これはスクールで学んでないよ！
なんで設定するのか、理解するためにまとめました。

VSCodeでlaunch.jsonを設定する理由

• VSCodeでデバッグを便利に行うため
• ブラウザを開き、ブレークポイントを設定することで、問題を見つけやすくなる
• バグを早期に発見し、コードの流れを理解しやすくなる → 開発効率の向上

---

設定しないとどうなる？

• ブラウザの開発者ツールに頼る必要があり、不便
• VSCode内で直接デバッグができないため、手間がかかり、作業時間が増えることもある

📌 結論：
launch.jsonを設定することで、デバッグの効率が大幅に向上し、開発の生産性も上がります。

---

例：Reactアプリのデバッグ設定

{
  "version": "0.2.0", // launch.jsonのバージョン（固定でOK）
  "configurations": [
    {
      "name": "Chromeでデバッグ", // 設定の名前（自由に変更可能）
      "type": "chrome", // Chromeブラウザでデバッグを行う
      "request": "launch", // 自動でブラウザを起動する設定（attachの場合は既存のプロセスに接続）
      "url": "http://localhost:3000", // デバッグ対象のURL（React開発サーバー）
      "webRoot": "${workspaceFolder}/src" // ブレークポイントのルートディレクトリ（srcフォルダ）
    }
  ]
}