前提
拡張機能を入れる
Chrome Extensionを導入する。
ローカルデバッグ
プロジェクト内にある HTML + js のような形であれば、HTMLファイルを右クリック→デバッグ実行でOK。
ビルトインサーバーが起動して、デバッグできる。
http://localhost:<built-in server port>/<project root>/<path to the HTML file relative to the project root>
リモートデバッグ
リモートと連動したデバッグも可能。
たとえばSpring-Bootで作成したアプリケーションの画面を操作しつつデバッグできる。
- Run/Debug Configurationsウインドウを開く(Run→Edit Configurations)
- 「+」で「JavaScript Debug」を追加
- Nameは適当に
- URLにリモートデバッグしたいURLを入力(ex:
http://localhost:18080/demo/
) - リモートが起動しているうえで、作ったConfigurationをデバッグ実行する
その他
- ChromeのDevlopper toolと共用はできない模様
余談
Spring-Boot + Thymeleafで開発している時、Thymeleafのキャッシュ( spring.thymeleaf.cache=false
)をoffにしても再起動しないと反映しなくて困っていた。
Then,after edit html template, must use CTRL+F9 to make the project.
MacだとCmd + F9 で明示的にリビルドが必要なだけだった。。