谷歌浏览器如何禁用缓存调试前端页面

Chrome默认启用缓存机制导致JS/CSS修改无效，需全程禁用缓存：①DevTools中Network面板勾选Disable cache（须保持工具开启）；②隐身窗口临时验证；③安装Classic Cache Killer插件实现跨标签页一键开关。

前端开发时反复修改 JS/CSS 文件却看不到效果，页面仍加载旧版本资源，根本原因是 Chrome 默认启用缓存机制——禁用缓存不是清一次缓存就能解决的临时补救，而是要在调试全程切断浏览器对当前页面资源的缓存行为。

通过开发者工具实时禁用缓存（推荐）

这是最精准、最可控的方式，仅影响当前标签页在 DevTools 打开期间的行为，不影响其他页面或全局设置。

第一步：打开目标网页后，按 F12 或右键空白处选择「检查」，唤出开发者工具。

第二步：点击顶部导航栏的 Network 选项卡，确保该面板已激活。

立即学习“前端免费学习笔记（深入）”；

第三步：勾选左上角的 Disable cache 复选框 → 此时所有后续请求将跳过本地缓存，强制向服务器发起全新请求。

注意：该选项仅在开发者工具保持打开状态时生效；一旦关闭 DevTools，缓存自动恢复。不要误以为勾选后就一劳永逸——【必须保持 DevTools 窗口不关闭】。

用隐身窗口绕过缓存（快速验证用）

适合临时测试改动是否生效，无需配置，但无法保留断点、console 日志等调试上下文。

按 Ctrl + Shift + N（Windows/Linux）或 Cmd + Shift + N（macOS）新建隐身窗口。

在隐身窗口中访问同一网址 → 页面所有资源均从服务器重新拉取，不读取任何历史缓存。

这一步操作起来很简单，直接新开窗口就行，但【关闭该隐身窗口后，其缓存即被销毁】，下次再开仍是干净环境。

安装专用插件实现一键开关（长期高频调试者适用）

如果你每天要反复开启/关闭缓存，且常需多标签并行调试，手动勾选 Disable cache 易遗漏、易疲劳。

方法一：访问 Chrome 网上应用店，搜索 Classic Cache Killer，安装官方扩展（ID: kkmknnnjliniefekpicbaaobdnjjikfp）。

方法二：安装完成后，右上角出现绿色闪电图标 → 点击即可切换「缓存开启/禁用」状态。

该插件会拦截所有资源请求头，注入 Cache-Control: no-store，效果比 DevTools 更彻底，且跨标签页统一生效。