かんがるーさんの日記

最近自分が興味をもったものを調べた時の手順等を書いています。今は Spring Boot をいじっています。

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 は ChromeFirefox でやるものと思っていましたが、IntelliJ IDEA でやると Java と同じ画面で debug が出来るので、とても使いやすいです。この機能はオススメです!!
    • (2017/12/19) NodeJS Plugin のインストールと設定が必要でしたが、漏れていたので追記しました。

参照したサイト・書籍

  1. webpack - Devtool
    https://webpack.js.org/configuration/devtool/

  2. WebStorm 2017.3 Help - Debugging JavaScript in Chrome
    https://www.jetbrains.com/help/webstorm/debugging-javascript-in-chrome.html

目次

  1. NodeJS Plugin をインストールする
  2. Run/Debug Configurations から Attach to Node.js/Chrome と Node.js を設定する
  3. webpack.config.js の設定を変更してソースマップを出力する
  4. Tomcat と Browsersync を起動して入力画面1を表示する
  5. IntelliJ IDEA で input01.js を debug する
  6. 非同期のコードも debug できる
  7. Jest で実行するテストも debug できる

手順

NodeJS Plugin をインストールする

IntelliJ IDEA で Javascript を debug するには NodeJS Plugin が必須ですのでインストールします。

IntelliJ IDEA のメインメニューから「File」-「Settings...」を選択し「Settings」ダイアログを表示します。ダイアログが表示されたら、画面左側のツリーから「Plugins」を選択します。選択後、画面右側上部にある検索フィールドに nodejs と入力し Plugin がインストールされていなければ、画面下の「Browse repositories...」ボタンをクリックします。

f:id:ksby:20171219004949p:plain

「Browse Repositories」ダイアログが表示されます。画面左側のリストに表示されている「NodeJS」を選択し、「Install」ボタンをクリックします。

f:id:ksby:20171219005240p:plain

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 のバージョンと一致していることを確認します。

f:id:ksby:20171219011245p:plain

次に「Defaults」の下にある「Node.js」を選択し、画面右側の「Browser / Live Edit」タブをクリックします。

f:id:ksby:20171219011446p:plain

画面が切り替わったら「After launch」と「with JavaScript debugger」をチェックした後、「OK」ボタンをクリックしてダイアログを閉じます。

f:id:ksby:20171219011701p:plain

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 で起動しています)。

f:id:ksby:20171218011647p:plain

npm run springboot コマンドを実行して webpack や Browsersync を起動します。

f:id:ksby:20171218011942p:plain

Chrome を起動して http://localhost:9080/inquery/input/01/ にアクセスして画面が表示されることを確認します(この時の画面は動作確認をしているだけで debug 時には使用されません)。

f:id:ksby:20171218012441p:plain

IntelliJ IDEA で input01.js を debug する

IntelliJ IDEA 内で src/main/assets/js/inquiry/input01.js をエディタで開いた後、エディタ内でコンテキストメニューを表示して「Debug 'input01.js'」を選択します。

f:id:ksby:20171218012809p:plain

「Edit configuration」ダイアログが表示されますので、「Browser / Live Edit」タグをクリックして、

f:id:ksby:20171218013034p:plain

中央の入力フィールドに画面のURL(今回は http://localhost:9080/inquery/input/01/)を入力した後、「Debug」ボタンをクリックします。

f:id:ksby:20171218013240p:plain

IntelliJ IDEA の画面下に input01.js JavaScript の画面が表示され、

f:id:ksby:20171218013358p:plain

Chrome が起動して http://localhost:9080/inquiry/input/01/ にアクセスします。

f:id:ksby:20171218013608p:plain

この時に IntelliJ IDEA のメインメニューから「Run」-「Edit Configurations...」を選択して「Run/Debug Configurations」ダイアログを表示すると、「JavaScript Debug」と「Node.js」が追加されています。ということは、Javascript の実行は Node.js で行っているのでしょう。

f:id:ksby:20171218013936p:plain f:id:ksby:20171218014032p:plain

debug してみます。まず input01.js の nameValidator メソッドに breakpoint をセットします。

f:id:ksby:20171218014233p:plain

入力画面1の「お名前(漢字)」の「姓」の入力フィールドにカーソルをセットしてから TAB キーを押して blur イベントを発生させます。

f:id:ksby:20171218014416p:plain

そうすると Chrome 上は「Paused in debugger」が表示されて、

f:id:ksby:20171218014549p:plain

IntelliJ IDEA の画面では breakpoint をセットした行で処理が止まります。また Java で debug した時と同様にエディタ上に変数の内容が表示されたり、画面の下に呼び出されたメソッドや変数とその値が表示されます。

f:id:ksby:20171218014747p:plain

「Step Over」ボタンをクリックすれば処理が先に進んで、新たに定義した変数が画面下に表示されますし、

f:id:ksby:20171218015200p:plain

form.convertAndValidate メソッドのところで「Step Into」ボタンを押せば、Form.js に移動して引き続き debug が出来ます。input01.js だけでしか debug できないということはないようです。

f:id:ksby:20171218015523p:plain

非同期のコードも 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'」を選択します。

f:id:ksby:20171218021845p:plain

「Edit configuration」ダイアログが表示されますので、「Browser / Live Edit」タブをクリックしてから http://localhost:9080/inquiry/input/02/ を入力して「Debug」ボタンをクリックします。

f:id:ksby:20171218022123p:plain

今度は画面の下に input02.js JavaScript の画面が表示され、

f:id:ksby:20171218022435p:plain

Chromehttp://localhost:9080/inquiry/input/02/ にアクセスして入力画面2の画面が表示されます。

f:id:ksby:20171218022550p:plain

input02.js の ajax の結果を受け取る非同期の処理の部分に breakpoint を設置します。

f:id:ksby:20171218022749p:plain

Chrome 上で郵便番号を入力してカーソルを住所に移動します。そうすると「Paused in debugger」が表示されて、

f:id:ksby:20171218023001p:plain

IntelliJ IDEA の方では breakpoint の所で処理が止まります。

f:id:ksby:20171218023132p:plain

Jest で実行するテストも debug できる

Jest 用に書いたテストに breakpoint を設置して、

f:id:ksby:20171219012625p:plain

Debug 実行します。

f:id:ksby:20171219012738p:plain

テストが実行されて breakpoint のところで処理が止まります。画面の下には呼び出されたメソッドや、変数と値が表示されます。

f:id:ksby:20171219012856p:plain

「Step Over」をクリックすれば1つずつ処理を進めて動作を確認することができます。

f:id:ksby:20171219013206p:plain

履歴

2017/12/18
初版発行。
2017/12/19
以下の章を追記しました。
* NodeJS Plugin をインストールする
* Run/Debug Configurations から Attach to Node.js/Chrome と Node.js を設定する
* Jest で実行するテストも debug できる