0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

VSCodeでReact/Viteのプロジェクトをデバッグする

Last updated at Posted at 2024-10-14

VSCodeでReact/Viteのプロジェクトをデバッグする

今まで、Reactをデバッグするときは、

  • npm run devで開発サーバを起動
  • ターミナルに表示されたURLを ctrl+clickでブラウザを開く
  • F12キーで、デバッグツールを起動して、console.logで値を確認

といった感じでした。

これでもいいのですが、コード上にブレークポイントを置いて、F5キーで実行としたかったので、やってみました
ちょくちょく使いそうなので、メモっておきます。
デバッガの終了にあわせて、開発サーバも停止したいのですが、気が向いたときに対応します。

手順

  • .vscodeフォルダにlaunch.jsontasks.jsonを配置する
  • F5キーで開発サーバとブラウザ/デバッガが立ち上がる
  • デバッグする
  • デバッガ終了する
  • 開発サーバを停止する

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}",
      "preLaunchTask": "npm-run-dev"
    }
  ],
  "compounds": [
    {
      "name": "Start Dev Server and Debug",
      "configurations": ["Launch Chrome against localhost"],
      "preLaunchTask": "npm-run-dev",
      "stopAll": true
    }
  ]
}

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "npm-run-dev",
      "type": "npm",
      "script": "dev",
      "detail": "Start development server",
      "isBackground": true,
      "problemMatcher": [
        {
          "pattern": [
            {
              "regexp": ".",
              "file": 1,
              "location": 2,
              "message": 3
            }
          ],
          "background": {
            "activeOnStart": true,
            "beginsPattern": ".",
            "endsPattern": ".*Local:.*"
          }
        }
      ]
    }
  ]
}
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?