Live Edit 機能とは
HTML/CSS などをデバッグする際、ブラウザをオートリロードしてくれる機能
Live Editing of HTML, CSS, and JavaScript
https://www.jetbrains.com/help/webstorm/2016.1/live-editing-of-html-css-and-javascript.html
環境
- MacOS X El Capitan: 10.11.4
- WebStorm: 2016.1
設定方法
Chrome Extension のインストール
https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji.
これだけでOK
細かな設定等は公式ページ参照
確認
適当なプロジェクトを開いて Chrome を起動。ブラウザ側でデバッグ用のタブが開く
デバッグを実行
あとはエディタ側で編集する度にブラウザ側も再描画される
上手く作動しない場合
Live Edit 機能が有効かどうか確認
Preferences -> Editor -> Plugins と辿り、 LiveEdit にチェックボックスが入っているか確認しましょう
