2012年9月12日水曜日

[WebStorm]Live Edit する方法

私が迷ったのでメモ。

※IntelliJ IDEA でも Live Edit できました。プラグインから Live Edit をインストールしてWebStorm と同じようにすればOKです〜。

■環境

WebStorm 5.0
Chrome21

■Live Edit の設定

View に Live Edit があるのでチェックしておく。

Preferences -> IDE settings -> Live Edit
にオプション2つあるので両方共チェックしておく。

WebStorm の右下のほうに EventLog があるのでこれを押下。

23:37:59 JetBrains Chrome Extension
         JetBrains Chrome Extension for Live Editing will be automatically installed after you restart Google Chrome.
         If you wish to install it manually without restarting Chrome, follow this procedure (link opens in a new Chrome window).

このように書いてるのでリンクをクリック。

ポートはそれぞれ変わるような気もしますが http://localhost:63363/index.html にリンクしました。

こんな画面が出ます。

ここに書かれている通り、 Chromeプラグイン jb.crx を名前を付けて適当なパスに保存する。

Chromeの 設定 -> ツール -> 拡張機能 で画面を開き、さっきの jb.crx ファイルをドラッグ・アンド・ドロップする。

これでプラグインをインストールできる。


Chrome21ではChromeウェブストア以外からはプラグインをインストールできないようなので、一旦自分のローカルマシン上にプラグインファイルをDLしてこれを拡張機能の画面へドラッグ・アンド・ドロップすることでプラグインをインストールできるみたいです。


あとは WebStorm に戻って View ー> Open in Browser で Chrome で HTML を開く。

こんな感じで表示されていれば Live Edit できます。


0 件のコメント:

コメントを投稿