IntelliJ IDEA でJavaScriptをデバッグ

前提

拡張機能を入れる

Chrome Extensionを導入する。

chrome.google.com

ローカルデバッグ

プロジェクト内にある HTML + js のような形であれば、HTMLファイルを右クリック→デバッグ実行でOK。
ビルトインサーバーが起動して、デバッグできる。

http://localhost:<built-in server port>/<project root>/<path to the HTML file relative to the project root>

リモートデバッグ

リモートと連動したデバッグも可能。
たとえばSpring-Bootで作成したアプリケーションの画面を操作しつつデバッグできる。

  1. Run/Debug Configurationsウインドウを開く(Run→Edit Configurations)
  2. 「+」で「JavaScript Debug」を追加
  3. Nameは適当に
  4. URLにリモートデバッグしたいURLを入力(ex: http://localhost:18080/demo/ )
  5. リモートが起動しているうえで、作ったConfigurationをデバッグ実行する

その他

  • ChromeのDevlopper toolと共用はできない模様

余談

Spring-Boot + Thymeleafで開発している時、Thymeleafのキャッシュ( spring.thymeleaf.cache=false )をoffにしても再起動しないと反映しなくて困っていた。

Thymeleaf templates cache even when spring.template.cache: false · Issue #34 · spring-projects/spring-boot · GitHub

Then,after edit html template, must use CTRL+F9 to make the project.

MacだとCmd + F9 で明示的にリビルドが必要なだけだった。。

参考

IntelliJ IDEA 2016.3 Help :: Debugging JavaScript