分享自己做的 chrome 插件, css auto reload

[allenm]

做为一个 web developer ，在写 css 的时候，经常需要不断的切换窗口，刷新页面，查看效果，这个插件可以在你保存好 css 后，立即更新你页面上的样式，不用切换窗口、刷新。

操作视频：
http://v.youku.com/v_show/id_XMzU3MDc5NzI0.html

这个之前已经有一些类似的工具，但是有些不支持跨域，有些不支持 @import 进来的 css ，有些还要配置一个特殊的服务器端，可能会和当前工作环境冲突。

于是我就自己写了一个适合自己用的，看看特性吧：

只需要安装一个 chrome 插件，不需要特殊的服务器端，不需要特意改变你的页面
需要的时候，只需要点击一下插件栏的图标即可对当前页面开启监控，不需要的时候，再次点击以关闭
此插件不会更改任何 DOM 结构，也不会在你页面的 js 执行环境中执行任何 js ,绝不干扰你页面的任何代码
在你没改变 css 的时候，页面不会 reload css ，调试面板中网络一栏不会多出很多请求
支持 css 和 page 不同域的情况
支持 css 相对路径，绝对路径
支持 @import ， @import 进来的 css 如果发生了改变也会 reload

chrome extension 下载地址：https://chrome.google.com/webstore/detail/fiikhcfekfejbleebdkkjjgalkcgjoip

github 地址：https://github.com/allenm/css-auto-reload

欢迎使用，提建议和 BUG 。

[allenm]

其实已经发布到 webstore 好久了，只是今天刚修复了两个BUG，就想到来 V2EX 宣传下，看看有没有人能用上。

[gDD]

既然放到GitHub上了，那就 加个License吧，推荐MIT。

[allenm]

@gDD THX，有空了我给加个 License

[unstop]

可以让它也支持HTML甚至后端代码的修改刷新就更牛逼了。

[allenm]

@unstop 这个想做也是可以的。只是根据目前工作中观察到的情况，切换窗口，刷新页面，最多的时候，就是写 css 的时候。

[hzlzh]

我一直用 LiveReload.app 可以试试，效率很高，支持后端代码也

[deepure]

白天试了一下没生效，回头再试试

[allenm]

@deepure 可以描述下你在什么环境下使用吗？比如 HTML 是什么样的？server 端是什么样的。可以邮件交流 menghonglun [at] gmail.com

[Kaiyuan]

我记得之前看 css-tricks 有介绍过一个工具是你修改了本地文件之后 chrome 就马上刷新页面的。我就一直好奇为什么 Dreamweaver 不能直接调用浏览器直接即时预览效果。而且要转到浏览器本身浏览。

[allenm]

@Kaiyuan 现在用 Dreamweaver 的比较少了吧。用编辑器直接调用浏览器展示，这个也是可以做到的，只是用这种插件的形式，会更通用一点，和编辑器无关，和服务器无关。

[zern]

试试。。点了，为什么没有反应呢，一直忙

[allenm]

@zern 点的什么？什么一直忙？

[fly2never]

赞,虽然用不上...

[zern]

@allenm 点那个圈A的图标啊，点了没什么反应，有时候会出现忙。

[allenm]

@zern 点了是没反应啊，你要 coding 才能看到效果。看操作视频中的操作了吗？如果你改变了 css ，页面没有及时更新，你可以发邮件告诉我你当前的开发环境吗？比如 HTML 是什么样子的，服务器用的是什么。 menghonglun [at] gmail.com

[Kaiyuan]

@Kaiyuan 其实用 Dreamweaver 的一般都是设计师，相对来说并不擅长直接文本写代码，即使有 Sublime Text 2 这样的编辑器也是，所以需要一个即时预览方案，而 Dreamweaver 应该要集成这样的功能才对。LiveReload.app 不错，不过只有 Mac 版本，Windows 版本只是一个预览。

[dianso]

安装了！

[mmz0717]

我也安装来，但是没有效果！

[allenm]

@mmz0717 可以说说你的使用场景吗？

[allenm]

@mmz0717 方便的话，可以和我邮件或者 gtalk 沟通: menghonglun囧gmail.com