WebStormでReactアプリケーションの開発時、ブレークポイントで止まってくれないのでアレコレ対応したときのメモ。
前提条件
- Viteのreactテンプレート（With TypeScript）のプロジェクト
- 環境は以下
- WebStorm: 2025.1
- Node.js: 20.15.0
- React: 19.0.0
- TypeScript: 5.7.2
- Vite: 6.3.1
※ Web開発1ヶ月目の素人による記事です
実際の手順
まずメインメニュー->「実行」->「構成の編集」をクリックする。
左上の「+」ボタン（新規構成の追加）をクリックし、「JavaScript デバッグ」をクリックする。
「名前」は任意。
「URL」はViteが起動時に表示するURL。
ここまで設定したら、「OK」を押して戻ります。
そして、npm run dev でアプリケーションを実行した後に、先ほど作成したデバッグ構成を実行してください。
（Viteで開発サーバーを起動している状態でないと、デバッガーの接続先が存在しないためエラーが発生します。）
この状態でブレークポイントを貼るとちゃんと処理の実行時にブレークポイントで止まってくれるようになります。
以上。