WebStormでReactアプリケーションの開発時、ブレークポイントで止まってくれないのでアレコレ対応したときのメモ。

前提条件

※ Web開発1ヶ月目の素人による記事です

実際の手順

まずメインメニュー->「実行」->「構成の編集」をクリックする。

左上の「+」ボタン（新規構成の追加）をクリックし、「JavaScript デバッグ」をクリックする。

「名前」は任意。
「URL」はViteが起動時に表示するURL。

ここまで設定したら、「OK」を押して戻ります。

そして、npm run dev でアプリケーションを実行した後に、先ほど作成したデバッグ構成を実行してください。
（Viteで開発サーバーを起動している状態でないと、デバッガーの接続先が存在しないためエラーが発生します。）

この状態でブレークポイントを貼るとちゃんと処理の実行時にブレークポイントで止まってくれるようになります。

以上。