はじめに
- IntellJ IDEA で Angular や React など npm で開発サーバーを起動する JavaScript アプリケーションのデバッグを行う手順をまとめた。
- 開発サーバー設定については Angular は Angular CLI で、 React は create-react-app で作成したアプリケーションのデフォルト設定を想定して記載している。
環境
- macOS
- IntelliJ IDEA ULTIMATE 2017.2
手順
Chrome プラグインのインストール
- JetBrains IDE Support をインストールする
IntelliJ IDEA プラグインのインストール
- メニューの "Preferences" で "Plugins" を開く
- "NodeJS" プラグインをインストール
npm 実行設定の追加
- メニューの "Run" > "Edit Configurations" を開く
- "+" 押下で "npm" を選択
- Name を "npm start" とし、Command を "start" として "OK"
- メニューの "Run" > "Run" で作成した "npm start" を実行
- 以上の手順は Angular, React 共通
デバッグ設定の追加
- メニューの "Run" > "Edit Configurations" を開く
- "+" 押下で "JavaScript Debug" を選択
- 接続先の URL を入力して "OK"
- Angular なら Name を "localhost:4200" とし、URL を "http://localhost:4200" とする
- React なら Name を "localhost:3000" とし、URL を "http://localhost:3000" とする
- メニューの "Run" > "Debug" で作成したデバッグ設定を選択して実行
- 前記の "npm start" 実行中に行う
- ブラウザで対象の URL が開かれて Chrome プラグイン経由でデバッグ情報が IDEA に引き渡される
- コードにブレークポイントを設定して正常にデバッガが利用できることを確認する。