chrome devtools offline模式是唯一可靠、可复现的前端离线测试方式：按f12打开工具→切至network面板→顶部下拉选offline，此时navigator.online立即变false、offline事件触发、所有网络请求失败。
直接用 Chrome DevTools 的 Offline 模式，是唯一可靠、可复现的前端离线测试方式。手动拔网线、关 WiFi 或禁用网卡，反而容易触发操作系统级缓存、DNS 预加载或浏览器兜底行为，导致 navigator.onLine 不变、事件不触发、请求不失败——根本测不准。
Chrome DevTools 怎么开 Offline 模式
这是最常被跳过的一步：不是随便点个按钮就行，得进对面板、选对下拉项。
- 按
F12打开 DevTools，切到Network面板（不是 Application 或 Console） - 在面板顶部工具栏，找到网络条件选择器（通常显示
Online或当前网速，如Fast 3G） - 点击它，从下拉菜单中选择
Offline✅（不是勾选 “Disable cache”，那是另一回事） - 此时页面会立即断网：所有后续 fetch/XHR 失败、
navigator.onLine变为false、offline事件触发
为什么 navigator.onLine 有时不响应 Offline 切换
不是 DevTools 失效，而是你的监听逻辑没写对位置或时机。
-
offline和online是全局事件，但必须在 Service Worker 激活前、页面加载早期就绑定，否则可能错过首次状态变更 - 别只监听
window：有些浏览器（如 Safari）需同时监听document或navigator，稳妥写法是：window.addEventListener('offline', () => console.log('offline'));<br>window.addEventListener('online', () => console.log('online')); - 如果用了 Service Worker，
navigator.onLine仍可能返回true—— 因为它是浏览器级 API，和 SW 无关；真正该看的是 fetch 是否失败、cache 是否命中 - 隐私模式（无痕窗口）下，Safari 和部分旧版 Edge 会禁用
navigator.onLine监听，测试务必用普通窗口
Offline 模式下 fetch 请求为啥还成功
不是 DevTools 没生效，而是你没关掉浏览器缓存，或者请求被 Service Worker 拦截并返回了缓存。
- 确认 Network 面板左上角已勾选
Disable cache：否则浏览器可能直接从内存/磁盘缓存返回资源，看起来“没断网” - 检查 Application → Service Workers 面板：如果看到 “Active” 状态，说明你的
sw.js正在拦截请求；caches.match(event.request)返回了缓存，fetch 就不会发出 - 想验证真实断网行为？临时注释掉
fetch事件监听器，或在fetch里加console.log(event.request.url, event.request.destination)看是否真被拦截 - POST / PUT 请求默认不走缓存，但若你在 SW 里写了
event.respondWith(caches.match(...))且没判断event.request.method，就会错误返回空缓存，造成静默失败
Offline 测试必须清环境再验证
很多人测完一次就以为 OK，结果上线后离线白屏——因为旧 Service Worker 还在控制页面，缓存列表早已过期。
- 每次改完
sw.js，先去 Application → Service Workers 面板，点Unregister清掉旧 SW - 勾选
Update on reload，然后硬刷新（Ctrl+Shift+R或Cmd+Shift+R），确保新脚本注册并 install - 再切回
Offline，打开 Network 面板，看所有请求是否都标红并显示net::ERR_FAILED；如果不是，说明还有资源没预缓存或路径写错 - 特别注意带斜杠的路径：
/api/status和/api/status/是两个不同 URL，缓存时漏掉一个，离线就 404
离线不是“断网就能用”，而是缓存策略、路径精度、生命周期管理三者咬合的结果。DevTools 的 Offline 模式只是开关，背后每一条缓存路径、每一个 fetch 分流判断，都得亲手对齐真实依赖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
