本地调试HTML和CSS的方法

来源：互联网发布：用户画像常用算法编辑：程序博客网时间：2024/06/05 12:04

在本地调试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时点一下书签就会运行，此时只有关闭浏览器才会停止刷新。拖拽书签见图：

mark

这类方法我遇到过两种不好使的情况：

在style.css中还import了其他的css，这时我修改其他的css就可能出现不刷新的情况，需要手动F5
长时间运行后，不管怎么改都不管用了，清除浏览器缓存后恢复

0 0