后续文章已发布㕬 众号【软件测试老吴】，关注并发送【浏览器】可阅读。

从“查看问题”到“制造场景”，成为掌控网络请求的测试导演

在上一期Network入门中，我们学会了如何抓包和分析接口，定位前后端问题。但那只是被动地“看”。

作为测试工程师，我们更需要主动“创造”各种测试场景：
如果接口慢了会怎样？如果接口返回错误数据会怎样？如果后端还没开发完，前端如何测试？

今天，我们将深入Network面板的高级Mock技巧，让你不仅能发现Bug，更能主动设计测试用例，覆盖各种异常和边界情况。

一、 模拟真实用户网络环境（Throttling）

你的应用在办公室Wi-Fi下飞快，但用户却在慢速的移动网络下使用。如何提前发现性能体验问题？

解决方案：网络模拟（Throttling）

1. 打开Network面板。
2. 找到右上角的 “Throttling” 下拉框（默认是NO throttling）。
3. 选择预设的 “Fast 4G” 或 “Slow 4G”。
4. 刷新页面，你会立即感受到加载变得极其缓慢。
   

高级用法：自定义网络配置文件
如果预设方案不满足需求，你可以：

1. 选择 Throttling 下拉框底部的 “Add…”。
2. 自定义下载速度、上传速度、延迟时间（Latency）。
3. 例如，设置延迟为1000ms，下载速度为100 Kbps，来模拟极差的网络环境。
   

测试场景：

• 发现加载策略缺陷：应用是否会在数据加载完成前显示“白屏”？
• 测试超时与重试机制：接口超时后，前端是否有友好的提示和重- 试按钮？
• 评估加载占位图：图片等大资源加载慢时，是否有占位图或骨架屏来提升用户体验？

二、 Request Blocking - 拦截资源与接口

测试场景： 某个关键的JS文件CDN加载失败了怎么办？依赖的第三方地图API挂掉了，会导致整个页面崩溃吗？

解决方案：请求阻塞（Block Request）

1. 在Network面板中，右键点击任意一个请求。
2. 选择 “Block request URL”。
3. 此时会弹出一个新的 “Request blocking” 选项卡，并显示已被阻塞的URL。你也可以在这里手动添加URL模式（支持通配符*）。
4. 刷新页面，所有匹配的请求都会被浏览器直接阻塞并标记为(blocked:other)。
   

测试价值：

• 测试异常降级能力：阻塞一个非核心的第三方脚本（如数据分析脚本），看主功能是否受影响。
• 验证资源加载失败处理：阻塞一个关键的CSS或JS文件，测试页面是否有降级UI或错误提示，而不是一片混乱或白屏。
• 排查问题依赖：快速判断页面问题是否由某个特定资源引起。

总结

通过本篇的高级功能，你已经从被动的“观察者”进化为了主动的“测试导演”。你可以模拟网络状态，从而对应用的健壮性、兼容性和用户体验进行进一步的验证。