解放你的 ALT(CMD)+TAB 键吧

做前端开发的童鞋们,最常敲的一组键就是 alt(cmd)+tab 然后紧接着是 F5 或者 ctrl(cmd) + r 了吧。这是在干什么?写好一段样式看看效果啊。

那我们能不能边写样式,边让浏览器自动加载最新的 css 呢?当然是可以的了,业界已经有很多这样的工具了。比如国内前段时间曾经成功推广过的 F5 ,还有国外的 live.js xrefresh 等工具。

但是这些工具都没有适合我的。F5 需要用它提供的 HTTP 服务,但是对于一个大型站点来说,静态资源都是单独管理的,页面上一般都写的绝对 URL 使用 cookie free 的域名或者 CDN 的域名。为了开发方便,我们一般会用 apache 在本地搭一个 style 环境,像我们现在,因为经常需要跨应用访问 css, js 这些,本地环境不一定有这些文件,还需要用 url rewrite 把这些文件 rewrite 到一个公共环境去。这些复杂功能都是 F5 所不能提供的。live.js 只能对 css 和 page 同域才有效,而且还不支持 @import ,xrefresh 也需要使用它提供的 HTTP 服务。而且这些工具都有一个共同点,是都需要往页面插入一段它的 js 。

于是,我就自己造了一个,优先满足我的需求,那就是要做到服务器无关,编辑器无关。然后要支持 css 和 page 不同域,支持 @import 。而我平时又使用 chrome 开发,那就写一个 chrome 插件好了。而且由于使用了浏览器插件技术,所以我也可以做到不在页面插入任何 JS,不改变任何 DOM 结构,尽量保证安全,不影响页面功能。

现在这个项目的源码托管在 github :https://github.com/allenm/css-auto-reload , 欢迎各位提 BUG和建议,或者来写一个其他浏览器的插件。

如果你和我一样喜欢使用 chrome 开发,那就直接来这里 https://chrome.google.com/webstore/detail/fiikhcfekfejbleebdkkjjgalkcgjoip 安装,使用很简单,只要点击插件图标,就会点亮图标,表示正在对当前标签页进行监控,再次点击会关闭监控。

详细介绍和使用说明可以看上面 github 项目的介绍。另外我还录了一段操作视频,你可以先看看,再决定要不要试试这个工具。

 

如果使用后觉得好用,确实对你有所帮助,不要忘记向你身边的 web developer 们介绍下哦,有心情的话,可以去 chrome web store 上面给我个好评哦。