RubyMineのLiveEditでpowで起動したアプリのJSをデバッグする

powで起動したRailsアプリのJSをRubyMineでデバッグする方法。

こちらの機能の利用方法

事前準備

• LiveEditとデバッガーの設定
  • 最新のRubyMineはデフォルトでインストールされている
• Chromeに JetBrains IDE Support をインストールする

LiveEditとデバッガーの設定

インストール状態

• ⌘, → Plugins → 検索欄にLiveEdit でインストール状態を確認
  • インストールされていない場合はInstall JetBrains plugin からインストール
  • チェックがついて有効になっていることを確認する

Live Editの設定

• ⌘,　→　 Build, Execution, Deployment → Debugger →　LiveEdit を開く
• 以下の項目にチェックを入れる
  • Update application in Chrome
  • Highlight current element in browser on caret change

デバッガの設定

• RubyMineでデバッグしたいerbファイルを開く
• ツールメニューのRun → Edit Configurations... をクリック
• 表示されるウィンドウで+をクリックし、JavaScript Debugを選択
• 以下のように設定する

項目	設定値
name	任意の名前
URL	powのURL

Remote URLs of local filesにデバッグしたいアプリケーションのファイルが表示されてること

Chromeに JetBrains IDE Support をインストールする

Chrome拡張のページからインストールする

デバッグの仕方

• powを起動して、プロセスが起動していることを確認する
  • powは一定時間アクセスがないと自動で停止するため、ウェブページにアクセスするなどして叩き起こす
• RubyMineのツールメニューRunからDebug...をクリックする
  • 表示される項目から上で作成したJavaScript Debugの名前を選択する
• ブラウザからデバッグしたいウェブページを表示する
• RubyMineのデバッグコンソールから、Scriptsタブを表示する
• powのURLでフォルダメニューが表示されるので、クリックして展開する
• デバッグしたerbファイルをクリックし、デバッグポイントを置く
• 再度ウェブページを開き直す
• デバッグポイントで止まることを確認する