测试机HTML5如何卸净_测试机卸净HTML5流程【实操】_技术教程

“卸净”HTML5缓存需同步清除四层：HTTP缓存（Ctrl+F5或禁用cache）、DOM存储（localStorage/sessionStorage.clear()）、IndexedDB（Application中删除）、Service Worker及Cache API（Unregister+Delete）。

测试机上“卸净”HTML5缓存，不是删一个文件就能完事——它分散在浏览器多个独立存储层里，漏掉任意一层（比如 Service Worker 或 IndexedDB），就可能让旧逻辑继续跑、数据残留、UI 表现错乱。

清除常规缓存 + 强制跳过缓存加载

这是最表层但高频出问题的一环：浏览器把 HTML/CSS/JS 当作静态资源缓存，哪怕你改了服务器上的文件，测试机仍可能拉旧版本。

快捷键硬刷最直接：Ctrl + F5（Windows/Linux）或 Cmd + Shift + R（Mac），绕过本地缓存发请求
若需彻底清空：按 Ctrl + Shift + Delete → 时间范围选“所有时间” → 仅勾选“缓存的图像和文件”，避免误删登录态
开发调试时，打开开发者工具 → Network 标签页 →
勾选 Disable cache，之后所有刷新都走网络（关掉开发者工具后失效）

手动清空 HTML5 存储机制（localStorage / sessionStorage / IndexedDB）

这些不会随常规缓存清理而消失，是测试机“看似清了却还留着旧数据”的元凶。尤其 localStorage 常被用来存用户偏好、token、mock开关等测试配置。

进目标页面 → F12 → 切到 Console → 执行：
```
localStorage.clear();
sessionStorage.clear();
```
要删结构化数据（比如离线列表、缓存的 API 响应）：开发者工具 → Application → 左侧展开 IndexedDB → 右键对应数据库 → Delete database
注意：sessionStorage 是页面级的，关掉标签页自动清；但测试中常开多个标签反复切，必须手动清

注销 Service Worker 并清空 Cache API 缓存

现代 PWA 或离线优先应用几乎必用 Service Worker，它能长期驻留后台、拦截请求、返回缓存响应——即使你删了浏览器缓存，它照样“自作主张”返回旧 JS。

开发者工具 → Application → 左侧点 Service Workers → 点 Unregister（如有“Skip waiting”按钮也点一下）
同一页面下，Application → Cache Storage → 展开查看是否有缓存名（如 v1-cache）→ 右键 → Delete

代码级清理（适合集成进测试脚本）：

caches.keys().then(keys => {
  keys.forEach(key => caches.delete(key));
});

验证是否真“卸净”：无痕窗口 + 检查 Network 请求头

别信“我点过了”，得看证据。很多团队卡在“以为清了，其实没清”，就是因为缺这步验证。

新开无痕窗口（Ctrl + Shift + N）访问页面：它不读任何已有缓存，也不写新缓存，是最干净的对照组
开发者工具 → Network → 刷新页面 → 看关键 JS/CSS 文件的 Status：要是 200（不是 200 (from disk cache) 或 304），说明确实从服务端拉的新资源
顺手检查响应头：Cache-Control: no-cache 或 max-age=0 是理想状态；若看到 max-age=31536000，说明服务器还在强缓存，得去后端配