VSCodeでデバッグ(React)

こんにちは、なかにしです。

Reactで開発する際、デバッガはあまり使用してこず、
基本的にconsole.logでごり押ししてきました。(すみません…)

現在はバックエンドのお仕事をしているのですが、ちゃんとデバッガを使って開発をしています。
これを機にフロント部分でもちゃんとデバッガ使おって思いましたのでまとめます。

設定
デバッグする
ちなみに
さいごに

設定

VSCodeでデバッガの設定をするには、ちょっとした設定が必要です。
まずReactをささっと書いて、F5キーを押します。

プルダウンでどれを使用してデバッグするかを聞かれます。
今回はChromeを使用してやっていくので、Chromeを選択します。

▽すると「launch.json」という名前で、
VScodeが自動で設定ファイルを作成してくれます。

項目としてはこれでOKなのですが、
この中の「url」の部分はReact側で立てるサーバーと合わせる必要があります。

今回はViteを使用してReactを作成しており、サーバーはlocalhost:5173なので
それに合わせて修正します。

{
  // 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}"
    }
  ]
}

これで準備完了です！