Chrome DevTools清除缓存后页面还是加载旧资源怎么办？

萌新.东慧提问于 2026-02-13 18:38:28 阅读 19

工具

我在开发时修改了CSS文件，但页面样式没变化。通过Application面板右键清除缓存/图片，甚至重启了浏览器，发现Network面板还是显示304状态码。尝试过手动删除Storage里的Cookies和Local Storage也没用，页面就是加载旧版本的style.css文件…

检查Application→Resources里能看到旧的CSS内容，但服务器上已经是新文件了。难道是Service Worker在作怪？我明明没用过PWA相关代码啊…serviceWorker相关的配置该怎么排查？

Network标签显示的响应头里有这些：

Cache-Control: max-age=86400
Expires: Wed, 20 Sep 2023 12:00:00 GMT
ETag: "3gl45j"

我来解答赞 2 收藏

反馈

1 条解答

司徒东霞 Lv1

这个问题我之前踩过坑，血泪教训啊。你遇到的情况大概率是浏览器缓存机制和服务器配置共同导致的。

先说解决方案：你需要同时处理客户端和服务端的缓存策略。第一步在Chrome DevTools里，按住Shift键的同时右键点击刷新按钮，选择“清空缓存并硬性重新加载”，这个操作比普通的清除缓存更彻底。不过这只能解决一时的问题。

重点来了，从你的描述看，服务器返回了Cache-Control: max-age=86400和ETag这些响应头，这会让浏览器强制缓存资源一天。你需要修改服务器配置，比如在nginx里加上这样的配置：



location ~* .(css|js)$ {

    add_header Cache-Control "no-cache, must-revalidate";

}

另外关于Service Worker的问题，即使你没主动用PWA，有些框架可能会默认注册。去Application面板的Service Workers选项卡看看有没有正在运行的worker，如果有，点“Unregister”注销掉。

最后提醒一下，开发环境最好直接在HTML里给CSS文件加个版本号参数，比如这样：<link rel="stylesheet" href="style.css?v=1.0.1">，每次更新就改下版本号，简单粗暴有效。

这些方法组合起来基本能解决问题。别问我怎么知道的，都是被坑出来的经验。

2026-02-14 11:00