PyCharm+Google ChromeでCSS-X-Fireを使ってみる
PyCharmにCSS-X-Fireというプラグインがあります。
http://code.google.com/p/css-x-fire/
Firebugで編集した確認したcssをそのまま、実際のcssファイルに持ってくることができます。
Firefoxで使うのが普通みたいですが、Firebug liteを使えばChromeでも使えるということなので、試してみました
Firebug liteのインストール
CSS-X-Fireプラグインを入れてPycharmを再起動すると、こんなダイアログがでます
OKを押すとFirefoxのプラグインについての説明ページが表示されます。
http://localhost:6776/files/about.html
chromeの場合はこっちというリンクがあるので、そちらを踏むとfirebug liteについての説明ページが表示されます
http://localhost:6776/files/lite.html
このページにあるCSS-X-Fireのbookmarkletをブックマークします
さらにFirebug liteのページに遷移してFirebug liteのbookmarkletをブックマークします
http://getfirebug.com/firebuglite
これで準備OKです
使い方
Google App Engineのhtmlを表示するだけのアプリを動かして試してみます。
https://github.com/yuhei0718/simple_gae_sample
動かしてトップページを見てみるとこんな感じです。
http:/localhost:8080
firebug liteとcss-x-fireのbookmarkletを実行します。
cssの編集が完了したらpycharm側で左下のCSS-X-Fireをクリックします
CSS-X-Fire Incomming chanesというウィンドウが表示されます
Apply all changesボタンを押すと、Firebug liteで編集したスタイルが、pycharmで編集しているcssファイルに反映されます。
これでブラウザをリロードしても、Firebug liteで編集したスタイルは維持されてます。
