在开发者工具Network面板勾选Disable cache可禁用当前会话缓存，强制浏览器跳过缓存读取并写入，每次请求均从服务器获取最新资源，但需在刷新前启用且保持DevTools开启。
开发者工具里怎么禁用缓存
禁用缓存是前端调试最常用、最即时的方法，它不删本地文件，只让当前会话所有请求跳过缓存读取服务器最新资源。关键在于 Network 面板的 Disable cache 开关必须在刷新前勾选，且开发者工具窗口不能关闭——一旦关掉，缓存自动恢复。
- 按
F12或Ctrl + Shift + I打开开发者工具 - 切换到
Network选项卡（不是 Elements 或 Console） - 勾选顶部的
Disable cache复选框（Chrome/Edge 显示为开关，Firefox 在设置齿轮里） - 刷新页面（
Ctrl + R即可，无需强制刷新） - 注意：如果页面已加载完成再勾选，需手动刷新一次才生效
为什么 Ctrl+F5 有时没用
Ctrl + F5（Windows）或 Cmd + Shift + R（Mac）确实能绕过缓存，但它的效果受两个隐藏条件限制：一是当前标签页未启用 Disable cache，否则快捷键行为会被覆盖；二是服务器返回了强缓存响应头（如 Cache-Control: immutable, max-age=31536000），浏览器可能仍复用本地资源并仅做条件验证（304 Not Modified）。
- 遇到“按了 Ctrl+F5 还是旧内容”，先检查 Network 面板里 HTML 请求的状态码是不是
304 - 如果是
304，说明服务器认定资源未变，此时禁用缓存或清空站点数据更可靠 - 某些浏览器（如新版 Edge）在后台标签页中会延迟执行硬刷新，建议聚焦目标标签页再操作
清除特定网站的缓存和存储数据
只清全局缓存可能漏掉 Cache Storage 或 Service Worker 缓存的内容，尤其是用了 PWA 或离线优先策略的页面。这类缓存不会被 Ctrl + Shift + Delete 默认清理，必须进站点设置单独处理。
阿拉丁·前端工程工坊把「前端只会写页面、规范停在文档里、脚手架手敲、构建靠抄、性能靠猜、可访问性靠忘」从「手动搭项目、抄配置、肉眼查规范」升级成一条本地工具链——多框架脚手架生成(React/Vue3/Svelte + Vite)、可复用组件生成(Props 类型+样式+示例)、规范落地检查(lint-lite:命名/未用变量/console残留/TS any/目录结构)、构建配置生成与产物体积预算、性能审计(依赖体积/重复/懒加载/Lighthouse 清单)、可访问性(a11y)校验(alt/aria
- 地址栏输入
chrome://settings/siteData（Chrome/Edge）或about:preferences#privacy→ “Cookies and Site Data” → “Manage Data…”（Firefox） - 搜索目标域名（如
localhost或dev.example.com） - 逐项删除：
Cache Storage、Service Workers、Local Storage（HTML 页面逻辑可能依赖其中状态） - 删完后重启浏览器，再打开页面——这是解决“改了 HTML 却始终不生效”的终极手段之一
本地开发时怎么避免反复手动清缓存
每次改完 index.html 都要清缓存，本质是开发流程卡点。真正省事的做法是在服务端或构建层加一层控制，而不是靠人工干预。
- 用
live-server启动时加--no-cache参数：npx live-server --no-cache - Vite 项目默认禁用缓存，但若用
npm run build后本地打开file://协议，仍会触发浏览器强缓存——务必用vite preview启动 - Webpack Dev Server 可配
headers: { 'Cache-Control': 'no-store' }，直接让响应头拒绝缓存 - 临时方案：在 HTML 的
里加，但注意该 meta 对主 HTML 文档本身无效，只影响子资源
实际调试中最容易被忽略的是 Service Worker 持久驻留的问题：它可能把整套 HTML/CSS/JS 都劫持进 Cache Storage，即使你清了浏览器缓存、禁用了 Network 缓存，它依然照发旧版本。遇到这种情况，先去 Application → Service Workers 面板点击 Unregister，再刷新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
