可通过Live Server插件设置"liveServer.settings.noCache": true禁用缓存;2. 浏览器开发者工具勾选Disable cache临时关闭缓存;3. 使用Ctrl+F5或Ctrl+Shift+R强制刷新页面;4. 在静态资源链接添加时间戳参数避免缓存。推荐组合使用插件设置与浏览器禁用缓存以确保实时更新。

在使用 VSCode 运行 HTML 文件时,浏览器缓存可能会导致页面没有显示最新修改的内容。为确保每次都能看到最新的代码效果,可以通过以下方法禁用缓存。
1. 使用 Live Server 扩展并禁用缓存
VSCode 中最常用的插件 Live Server 支持热重载,但默认可能启用浏览器缓存。可通过以下设置关闭:
- 打开 VSCode 设置(Ctrl + ,)
- 搜索 "live server.settings.ignoreLocalFileChanges"
- 勾选或设置为 true 禁用本地文件缓存监听
- 也可在 settings.json 中添加:
该设置会在启动服务器时阻止缓存静态资源。
2. 浏览器端临时禁用缓存
在开发调试阶段,直接在浏览器中关闭缓存更有效:
立即学习“前端免费学习笔记(深入)”;
- 按 打开开发者工具
- 勾选 Network 选项卡中的 Disable cache
- 保持开发者工具开启时,浏览器将不会加载缓存资源
此方法适用于 Chrome、Edge 等基于 Chromium 的浏览器。
3. 强制刷新页面绕过缓存
手动刷新时使用强制加载方式:
- Ctrl + F5 或 Shift + F5:强制重新加载页面和资源
- Ctrl + Shift + R:部分浏览器支持的无缓存刷新
适合快速验证修改是否生效。
4. 修改 HTML 文件请求参数(附加时间戳)
通过添加唯一查询参数防止读取缓存:
或使用时间戳动态刷新引用:
常用于 JS/CSS 文件引用,避免旧版本被缓存。
基本上就这些常用方法。推荐配合 Live Server 的 noCache 设置 + 浏览器开发者工具禁用缓存,开发体验最稳定。











