概要
JetBrains IDE で React をデバッグする手順を書きます。
調べても最新のが出てこなかったので、、、
React に限らず、 パッケージマネージャーを使用して実行しているアプリケーションはこの方法で行けるはずです。
参考記事には Angular での実行方法も乗っています。（応用すれば Vue もいけると思われます）
これまでとの相違点
- JetBrains IDE Support という Chrome 拡張機能を使用しない
以前は必要だったみたいですが、手元で試したらなくても行けました。
前提条件
- 説明は macOS で行う
- 手順はメニューバーからの選択を始めとしているが、ショートカットやIDE上のアイコンからの操作も可能
- Node がインストールされていること
- Node のパッケージマネージャー（ex.
npm）がインストールされていること
手順
NodeJS プラグインのインストール
- Menu > IntelliJ IDEA > Preferences > Plugins を開く
-
NodeJSを検索し、インストール
npm 実行設定
- Menu > Run > Edit Configurations を開く
- 左上の
+> npm をクリック - 以下の項目を設定
- Name: 任意の名前（ex.
npm start by MyApp）を入力 - pakcage.json: アプリケーションの
pakcage.jsonを選択 - Command:
startを選択 - Node interpreter:
nodeのインストール先ディレクトリを選択 - Package manager:
nodeのパッケージマネージャー（ex.npm）のインストール先ディレクトリを選択
- Name: 任意の名前（ex.
-
applyをクリック後、OKをクリック
debug 実行設定
- Menu > Run > Edit Configurations を開く
- 左上の
+> JavaScript Debug をクリック - 以下の項目を設定
- Name: 任意の名前（ex.
debug on localhost:3000）を入力 - URL:
http://localhost:3000を入力
- Name: 任意の名前（ex.
-
applyをクリック後、OKをクリック
アプリケーションの実行
- Menu > Run をクリック
- 作成した実行設定（ex.
npm start by MyApp）をクリック
アプリケーションのデバッグ
- 任意の箇所にブレークポイントを設置
- Menu > Run > Debug をクリック
- 作成したデバッグ設定（ex.
debug on localhost:3000）をクリック
以上でデバッグツールが表示され、デバッグできれば完了です！