DeveWork

CSS Auto Reload:解放F5 键,自动刷新浏览器的前端利器(Chrome 扩展)

在进行前端开发的时候(本文具体而言是编辑CSS 文件时候),常常要做的是刷新浏览器查看修改后的样式。那么最常用到的就是F5 键了,以前在开发WordPress 主题的时候Jeff 都是傻傻按F5 刷新,一次开发下来F5 键的位置常常是油腻腻的,还担心坏了。不过,有了这个chrome扩展,一切都成为过去式;唉,相见恨晚啊~

CSS Auto Reload 介绍

css auto reload 是一款 chrome 开发者插件。它可以在你编辑 css 的时候,自动在页面上重新载入最新的 css 文件, 以达到立即展现你刚刚做的改变的目的。特别适合在双屏环境下进行 web 前端开发,使你不必在编辑器和浏览器之间不停的切换, 提高工作效率。

视频介绍

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

下载地址:

chrome商店下载     项目主页      Github

后记

去查看了下该插件的源代码,其本身核心功能就是用javascript 实现的,但我看不懂代码,想研究研究还是没戏了。事实上,这个功能确实是非常有用,如果你编辑过前端代码的话你就会知道,so,有需要的速速收藏吧~~