需要先安装 `Adobe Air`__ , Foxfox ,firebug(版本要求1.6+)
__: http://get.adobe.com/cn/air/

然后安装cssUpdater扩展,需要重启firefox:
https://addons.mozilla.org/en-US/firefox/addon/cssupdater/

继续下载安装cssUpdater.air,这是Adobe Air 程序
http://www.cssupdater.com/files/cssUpdater.air

获取序列号,注册一个帐号登录后会得到registration key,或者使用我的注册码 (beta_falconchen):
http://www.cssupdater.com/index.php?p=memberpage

回到cssUpdate.air中,输入上一步得到的key即可启动程序

Manage Projects里新建一个项目,命名为test.
从http://www.cssupdater.com/install下载两个测试文件::

Examples.css : http://www.cssupdater.com/files/cssUpdater.css
cssUpdater-test.html : http://www.cssupdater.com/files/cssUpdater-test.html

使用cssUpdate.air 的 `add local files` 把Examples.css添加进来,用firefox打开csscssUpdater-test.html , 切换到cssUpdater点击test connection,如果看到以下信息,说明连接成功。
在firebug中对csscssUpdater-test.html 进行样式修改,点击sync now, 刷新页面效果并没有消失,因为样式更改已经同步到了Examples.css,
这下Firebug不仅是所见即所得,而且可以同步更改使之变成了一个真正的样式编辑器,DreamWeaver 之流简直弱爆了有木有?

样式修改

样式修改

存在的问题:

cssUpdater不支持css属性替换,如果之前有一个属性是height:100px,你不能把它改成min-height:100px,因为如果这样做的话height:100px仍然会存在于原css文件,正确的做法是,在firebug里禁用height属性,然后增加新的min-height属性

- EOF -

评论

加载中