本地调试HTML和CSS的方法_chrome怎么把element里面的html代码和css不放在一个窗口-优快云博客

本文链接：https://blog.youkuaiyun.com/elang6962/article/details/70556978

本文介绍了解决CSS更改后浏览器缓存导致效果不更新的问题。通过使用cssrefresh和live.js等工具，可以实现在本地开发环境中对CSS进行实时预览，提高开发效率。文章详细解释了这些工具的工作原理及配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在本地调试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
长时间运行后，不管怎么改都不管用了，清除浏览器缓存后恢复