Chrome 开发者工具如何模拟离线网络：Network 面板设置与恢复检查

排查“网页在弱网或断网时会发生什么”时，直接拔网线往往会把测试环境一起弄乱。Chrome 开发者工具可以在当前标签页里模拟离线：打开 Network 面板，在网络限制选项中选择 Offline，再重新加载页面；恢复时切回 No throttling 并再次加载，地址栏页面恢复可访问就是完成核对。

先打开 Network 面板并确认请求列表

在目标网页上按 F12 或右键选择“检查”，然后点击顶部的 Network。面板出现请求列表后再继续；如果列表为空，先勾选保留日志或刷新一次页面，让入口状态可见。

第 1 步：从网络限制菜单选择 Offline

操作路径是：Network 面板 → 网络限制下拉框 → Offline。如果下拉框没有显示，打开 Network conditions 设置，让网络限制控件出现在面板工具栏。选择后不要急着判断，先确认控件文字已经变成 Offline。

第 2 步：重新加载并检查失败状态

按 Ctrl+R 或点击刷新按钮。Network 列表中的文档和资源请求应显示失败、取消或无法完成等离线迹象；如果页面使用了 Service Worker，也可能看到缓存响应，这时要结合请求状态和页面内容判断，不能只看页面是否仍有文字。

第 3 步：恢复 No throttling 并复查页面

测试完成后按相同路径打开网络限制下拉框，选择 No throttling，再重新加载页面。可见成功状态是页面资源重新返回，Network 中的文档请求不再持续失败；这一步不要省略，否则当前标签页会一直保持离线模拟。

常见问题

选择 Offline 后为什么页面看起来没有变化？

页面可能已经从浏览器缓存或 Service Worker 返回内容。重新加载并观察 Network 请求状态，才能确认离线模拟是否生效。

测试结束后还要不要关闭开发者工具？

不需要，但必须把网络限制恢复为 No throttling，再刷新一次目标页面。

Offline 和 Slow 3G 是一回事吗？

不是。Offline 用来观察完全无网络时的失败与兜底，Slow 3G 用来观察延迟和低带宽条件下的加载过程。

最后确认

完成一次离线测试，至少要留下三类证据：Network 面板入口、Offline 控件已选中、恢复 No throttling 后的成功加载。三张官方截图分别对应这三个检查点，按步骤放置，读者可以对照控件文字和请求列表复核操作。