Chrome DevTools 怎么模拟慢网速和高延迟

前端页面在办公室网络里加载正常，到了移动网络却出现首屏慢、接口等待久或 WebSocket 反馈滞后，先不要急着改代码。Chrome DevTools 的 Network 面板可以直接模拟慢网速和高延迟：先用 Slow 4G、Fast 4G 或 3G 做快速复现，再建立带 Download、Upload、Latency 的自定义配置，最后用 Waterfall 判断时间到底花在等待还是传输。

官方文档：https://developer.chrome.com/docs/devtools/network/reference/

1. 先建立没有旧请求干扰的基线

打开待调试页面，按 F12 或右键选择“检查”，切到 Network。确认左上角录制按钮处于开启状态，点击 Clear 清掉旧记录，再勾选请求表上方的 Disable cache。这个选项只在 DevTools 打开期间生效，目的是避免重复刷新时直接命中浏览器缓存。

接着正常刷新一次页面。请求表里应出现文档、脚本、样式和接口请求；如果表格仍是空的，先检查录制是否停止，或页面是否真的发生了导航。基线不要急着下结论，它只是帮助你把后面“网络被拖慢”的差异和首次访问本身区分开。

2. 用 Throttling 预设快速模拟慢网速

在 Network 面板顶部的 action bar 找到 Throttling 下拉框。选择 Slow 4G、Fast 4G 或 3G，然后重新加载页面。DevTools 会在 Network 面板旁显示警告图标，提醒当前条件已经被限速；此时不要把示意速度当作真实运营商的精确测速值，它更适合复现相对稳定的加载压力。

重新加载后重点看三处：文档请求是否先等待、脚本和图片的下载区间是否变长、接口是否出现排队。点击一个关键请求，打开 Timing 还能看到等待、连接、发送和接收等阶段。只看页面总耗时容易误判，Waterfall 才能告诉你慢在网络阶段还是慢在资源本身。

3. 为高延迟场景建立自定义配置

预设不够贴近问题时，点击 DevTools 右上角的设置入口，进入 Settings > Throttling。在 Network throttling profiles 区域点击 Add profile，填写一个能看懂的名称，例如“移动高延迟演示”，再设置 Download、Upload（单位 Kbps）和 Latency（单位毫秒）。保存后回到 Network 面板，在 Throttling 下拉框选中这个配置。

高延迟和低带宽是两个不同变量：只把 Download 调低，通常更容易观察传输变慢；把 Latency 调高，则更容易暴露“请求很多但每个请求都先等一段时间”的问题。调试接口串行调用时，优先记录延迟；调试大图片或脚本时，再比较下载速度的影响。若测试 WebSocket，Chrome 文档也说明 DevTools 可以对 WebSocket 连接进行限速。

4. 通过 Waterfall 把体感拆成可核对的证据

重新加载后先按 Fetch/XHR、JS 或 Img 过滤，减少无关请求。然后点击关键请求查看 Headers、Timing 和 Response，把请求名称、状态码、资源大小、总耗时和主要等待阶段记下来。Waterfall 默认按启动时间排列；长条前半段偏等待，后半段偏下载时，排查方向并不相同。

5. 恢复环境，避免把限速带出调试结论

完成对比后回到 Network 的 Throttling，选择 No throttling；如果后续要测真实缓存行为，再取消 Disable cache。重新加载一次确认警告图标消失，再重复关键路径。建议在记录中写明“预设/自定义参数 + 缓存开关 + 关键请求”，这样其他人能复现你的判断，也不会把 DevTools 的模拟结果误认为线上测速。

常见问题

为什么选择限速后页面还是很快？

先确认重新加载发生在限速配置生效之后，再看请求是否来自缓存。勾选 Disable cache 并清空旧记录后重试，同时检查 Network 面板旁是否出现警告图标。

只调高 Latency 能模拟所有慢网速吗？

不能。Latency 主要模拟请求往返等待，Download 和 Upload 决定传输速率。接口首包慢与大文件下载慢应分别调整并记录。

自定义配置保存后在哪里使用？

保存路径是 Settings > Throttling > Network throttling profiles；保存成功后回到 Network 顶部的 Throttling 下拉框选择它。