Css-auto-reload
A simple but useful chrome extension for web developers, helps you automaticly reload the css files in the browser after you modify them, without ruining your codes.
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:// 打开的页面（需要一定的配置，请看下边)
暂不支持:
- 不支持页面中的 iframe 内的 css 变化
使用说明:
先去 chrome 应用商店安装此 chrome 插件，地址：https://chrome.google.com/webstore/detail/css-auto-reload/fiikhcfekfejbleebdkkjjgalkcgjoip/reviews
安装完成可以看到一个这样的图标：
chrome 切换到你想监控 css 变化的标签页，然后点击插件图标，插件图标会变成彩色的
当图标处于彩色状态说明正在监控中，你可以再次点击关闭监控，关闭后，图标变成灰色
操作演示视频:
file:// 配置
需要打开chrome 插件页面,在地址栏输入：“chrome://chrome/extensions/”, 回车, 找到 css auto reload ,勾上“允许访问文件网址”. 另外此模式下，如果 css 使用的相对路径，则不支持 @import .
version 1.1.0 changelog:
- 对 chrome-extension:// 开头的 css 不做处理，减少请求数，同时避免 server 端报 404 。
- 增加了 file:// 打开的页面的部分支持，需要一些设置
Introduce the css auto reload ：
Css auto reload is a chrome extension for web developers . It helps you automaticly reload the css files in the browser after you modify them, without ruining your codes. It's very suitable for the multi screens work environment.
Features:
- You only need install a chrome extension , don't need a special http server or modify your page specially.
- Just click the icon on the browser to start / stop watch the css changes , very simple.
- It don't change your page's DOM , or execute any js code in your page's context.
- It won't reload css before you change your css , so the netpanel in developers tools is clean.(Except the file:// page)
- Support the condition that the css's domain is different from the page's domain.
- Support the relative css link and absolute css link.
- Support the @import .
- Partly support the page open by file:// .(need some config , see below)
Not Support yet:
- Not support the css in a iframe
How to use:
Go to the chrome webstore , and install this extension. The url is https://chrome.google.com/webstore/detail/css-auto-reload/fiikhcfekfejbleebdkkjjgalkcgjoip/reviews
Then you can see a icon like this:
Open the page which you are developing, and click the extension's icon , then the icon become a colorful one:
The colorful icon means the extension is working. You can click this icon again , then the icon become gray , which means stoping working.
Operation video:
file:// config
You need open the chrome extension page in your browser, enter in your address bar: "chrome://chrome/extensions/", press enter. Find the css auto reload extension, then making sure the "Allow access to file urls" option is checked . By the way , In this mode , if your css url is a relative url , it can't support the @import .
version 1.1.0 changelog:
- Don't handle the chrome-extension:// url , reduce the request number and clear away the 404 error on your server.
- Add part support of the file:// page, need some config