在本地调试html和css代码时，每次更改完需要清除浏览器缓存，才能看到更改的效果，否则直观看起来就像是css文件引入失效一样，在网上查询后，找到以下两种方法：
像个谷歌开发者一样工作
先把当前的html和css加载，用chrome打开，按F12，在Elements这里显示的是html代码，页面下方是css代码
在css代码这里修改，会实时反应到页面，最后将自己满意的效果修改到本地的css代码中即可。
这样操作看起来挺省事，但是实际使用时，鼠标总点不到CSS区域中要修改的部分，浪费时间不说，心情还挺焦躁。
真正方便的还是工具
cssrefresh和live.js，这两个工具会不停的读取最新的css并加载，缺点是命令行中一直在刷新，有时候会找不到真正的调试信息。两个工具都支持js引入和书签栏的方法。
- js引入法：创建一个js文件夹，与css文件夹同级，如下图。
在网站上下载js文件到js文件夹，并在html代码中添加：
<head>
<link rel="stylesheet" type="text/css" href="{% static 'blog/css/style.css' %}" />
**<script type="text/javascript" src="{% static 'blog/js/cssrefresh.js' %}"></script>**
...
</head>
这里的js必须添加在css的后面才会起刷新作用。修改css代码后保存，很快就会自动刷新
- 书签栏：将其拖拽到书签栏，在调试html时点一下书签就会运行，此时只有关闭浏览器才会停止刷新。拖拽书签见图：
这类方法我遇到过两种不好使的情况：
- 在style.css中还import了其他的css，这时我修改其他的css就可能出现不刷新的情况，需要手动F5
- 长时间运行后，不管怎么改都不管用了，清除浏览器缓存后恢复
473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
