Spring Boot + npm + Geb で入力フォームを作ってテストする ( その41 )( IntelliJ IDEA で Javascript を debug する )
概要
記事一覧はこちらです。
Spring Boot + npm + Geb で入力フォームを作ってテストする ( その40 )( Form.js のテストを Jest で書く ) の続きです。
- 今回の手順で確認できるのは以下の内容です。
- 以前どこかで IntelliJ IDEA 2017.3 から Chrome の JetBrains IDE Support Extension をインストールせずに Javascript の debug が出来るようになるという記事を見かけたのですが、IntelliJ IDEA で Javascript の debug が出来るんだと思って今回バージョンアップしたので試してみたところ、すごい便利でした!
- Javascript の debug は Chrome か Firefox でやるものと思っていましたが、IntelliJ IDEA でやると Java と同じ画面で debug が出来るので、とても使いやすいです。この機能はオススメです!!
- (2017/12/19) NodeJS Plugin のインストールと設定が必要でしたが、漏れていたので追記しました。
参照したサイト・書籍
webpack - Devtool
https://webpack.js.org/configuration/devtool/WebStorm 2017.3 Help - Debugging JavaScript in Chrome
https://www.jetbrains.com/help/webstorm/debugging-javascript-in-chrome.html
目次
- NodeJS Plugin をインストールする
- Run/Debug Configurations から Attach to Node.js/Chrome と Node.js を設定する
- webpack.config.js の設定を変更してソースマップを出力する
- Tomcat と Browsersync を起動して入力画面1を表示する
- IntelliJ IDEA で input01.js を debug する
- 非同期のコードも debug できる
- Jest で実行するテストも debug できる
手順
NodeJS Plugin をインストールする
IntelliJ IDEA で Javascript を debug するには NodeJS Plugin が必須ですのでインストールします。
IntelliJ IDEA のメインメニューから「File」-「Settings...」を選択し「Settings」ダイアログを表示します。ダイアログが表示されたら、画面左側のツリーから「Plugins」を選択します。選択後、画面右側上部にある検索フィールドに nodejs
と入力し Plugin がインストールされていなければ、画面下の「Browse repositories...」ボタンをクリックします。
「Browse Repositories」ダイアログが表示されます。画面左側のリストに表示されている「NodeJS」を選択し、「Install」ボタンをクリックします。
Plugin がダウンロードされ、完了すると「Install」ボタンが「Restart IntelliJ IDEA」ボタンに変わりますのでクリックします。
「Settings」ダイアログに戻ったら「OK」ボタンをクリックします。ダイアログが閉じると「IDE and Updates」ダイアログが表示されますので「Restart」ボタンをクリックして IntelliJ IDEA を再起動します。
Run/Debug Configurations から Attach to Node.js/Chrome と Node.js を設定する
IntelliJ IDEA のメインメニューから「Run」-「Edit Configurations...」を選択し、「Run/Debug Configurations」ダイアログを表示します。
最初に「Defaults」の下にある「Attach to Node.js/Chrome」を選択し、画面右側の「Attach to」の設定がインストールしている Node.js のバージョンと一致していることを確認します。
次に「Defaults」の下にある「Node.js」を選択し、画面右側の「Browser / Live Edit」タブをクリックします。
画面が切り替わったら「After launch」と「with JavaScript debugger」をチェックした後、「OK」ボタンをクリックしてダイアログを閉じます。
webpack.config.js の設定を変更してソースマップを出力する
まずはソースマップを出力します。出力しないと IntelliJ IDEA で debugger の画面は表示されても、ソースファイルの実行中の行を指し示してくれません。
webpack.config.js を以下のように変更します。
.......... plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ], devtool: "inline-source-map" };
devtool: "inline-source-map"
を追加します。
Tomcat と Browsersync を起動して入力画面1を表示する
次に各サーバを起動します。まずは Tomcat を起動します(下の画面キャプチャは Debug with JRevel で起動しています)。
npm run springboot
コマンドを実行して webpack や Browsersync を起動します。
Chrome を起動して http://localhost:9080/inquery/input/01/ にアクセスして画面が表示されることを確認します(この時の画面は動作確認をしているだけで debug 時には使用されません)。
IntelliJ IDEA で input01.js を debug する
IntelliJ IDEA 内で src/main/assets/js/inquiry/input01.js をエディタで開いた後、エディタ内でコンテキストメニューを表示して「Debug 'input01.js'」を選択します。
「Edit configuration」ダイアログが表示されますので、「Browser / Live Edit」タグをクリックして、
中央の入力フィールドに画面のURL(今回は http://localhost:9080/inquery/input/01/)を入力した後、「Debug」ボタンをクリックします。
IntelliJ IDEA の画面下に input01.js JavaScript の画面が表示され、
Chrome が起動して http://localhost:9080/inquiry/input/01/ にアクセスします。
この時に IntelliJ IDEA のメインメニューから「Run」-「Edit Configurations...」を選択して「Run/Debug Configurations」ダイアログを表示すると、「JavaScript Debug」と「Node.js」が追加されています。ということは、Javascript の実行は Node.js で行っているのでしょう。
debug してみます。まず input01.js の nameValidator メソッドに breakpoint をセットします。
入力画面1の「お名前(漢字)」の「姓」の入力フィールドにカーソルをセットしてから TAB キーを押して blur イベントを発生させます。
そうすると Chrome 上は「Paused in debugger」が表示されて、
IntelliJ IDEA の画面では breakpoint をセットした行で処理が止まります。また Java で debug した時と同様にエディタ上に変数の内容が表示されたり、画面の下に呼び出されたメソッドや変数とその値が表示されます。
「Step Over」ボタンをクリックすれば処理が先に進んで、新たに定義した変数が画面下に表示されますし、
form.convertAndValidate
メソッドのところで「Step Into」ボタンを押せば、Form.js に移動して引き続き debug が出来ます。input01.js だけでしか debug できないということはないようです。
非同期のコードも debug できる
入力画面2には入力された郵便番号を使用して ajax で郵便番号検索APIを呼び出す処理を実装していますが、結果を受け取る非同期の処理の部分に breakpoint を設置しても debug ができます。
まず IntelliJ IDEA の画面下に表示されている「input01.js」と「input01.js JavaScript」の Window を左側にある×ボタンをクリックして閉じます。
次に IntelliJ IDEA 内で src/main/assets/js/inquiry/input02.js をエディタで開いた後、エディタ内でコンテキストメニューを表示して「Debug 'input02.js'」を選択します。
「Edit configuration」ダイアログが表示されますので、「Browser / Live Edit」タブをクリックしてから http://localhost:9080/inquiry/input/02/ を入力して「Debug」ボタンをクリックします。
今度は画面の下に input02.js JavaScript の画面が表示され、
Chrome で http://localhost:9080/inquiry/input/02/ にアクセスして入力画面2の画面が表示されます。
input02.js の ajax の結果を受け取る非同期の処理の部分に breakpoint を設置します。
Chrome 上で郵便番号を入力してカーソルを住所に移動します。そうすると「Paused in debugger」が表示されて、
IntelliJ IDEA の方では breakpoint の所で処理が止まります。
Jest で実行するテストも debug できる
Jest 用に書いたテストに breakpoint を設置して、
Debug 実行します。
テストが実行されて breakpoint のところで処理が止まります。画面の下には呼び出されたメソッドや、変数と値が表示されます。
「Step Over」をクリックすれば1つずつ処理を進めて動作を確認することができます。
履歴
2017/12/18
初版発行。
2017/12/19
以下の章を追記しました。
* NodeJS Plugin をインストールする
* Run/Debug Configurations から Attach to Node.js/Chrome と Node.js を設定する
* Jest で実行するテストも debug できる