如何在Google Chrome开发者工具中模拟弱网环境进行测试？

你是不是也碰到过这种情况——明明Chrome开发者工具打开了，Network面板也点出来了，可模拟出来的“弱网”效果总觉得不对劲？这里头有个很关键的细节，很容易被忽略。

必须启用Chrome开发者工具Network面板的网络节流功能，才能真实模拟弱网环境。操作顺序是这样：F12打开工具→切至Network→刷新页面确保有请求→下拉选择Slow 3G或自定义配置→勾选Disable cache→强制刷新验证。

想真实复现用户在地铁隧道、电梯间或偏远地区刷不出健康码、扫码支付总超时的卡顿体验，必须让Chrome浏览器强制走慢速网络通道。否则所有请求都跑本地高速回环，测出来的加载时间毫无参考价值。

打开Network面板并激活监控

这一步不完成，后续所有节流设置都无效。在目标网页按F12（Windows/Linux）或Command Option I（macOS）打开开发者工具→点击顶部标签栏中的Network选项卡→

用预设模式快速启用Slow 3G

这个方法适合5秒内完成基础验证，不用算参数，直接复现城市移动弱网的典型表现。

第一步：在Network面板左上角找到标有“No throttling”的下拉菜单（若没显示，请先确认左上角录制按钮▶️是红色且已启用）；

第二步：点击下拉箭头，选择Slow 3G；

第三步：页面顶部立刻出现黄色提示条“Network throttling is enabled”；

第四步：按Ctrl R（Windows/Linux）或Cmd R（macOS）强制刷新，观察JS加载时间是否从200ms跳到2.3s以上——没跳，说明节流没生效。

添加自定义弱网配置

当预设档位无法复现你手头那个“信号满格但延迟飙到2秒”的现场问题时，就得手动建模了。

方法一：点击Network面板右上角⋮菜单→Throttling → Custom → Add；

方法二：在节流下拉菜单中直接选Custom→右侧点Add；

方法三：在Network面板顶部工具栏中，点击No throttling→选Custom→Add custom profile链接。

填入名称（如“Edge_2G_HighLatency”）、Download（建议填150 kbps）、Upload（填50 kbps）、Latency（填1800 ms）→点击Add保存。新配置会立刻出现在节流菜单里，下次点一下就能切换。

禁用缓存确保节流真实生效

浏览器缓存会绕过网络请求，导致你明明选了Slow 3G，图片却秒出——这不是弱网，是缓存骗了你。

在Network面板顶部工具栏中，勾选Disable cache复选框，且该操作必须在启用节流后、刷新页面前完成。

这一步操作起来很简单，直接勾选就行，但漏掉就等于白测。

用命令菜单秒切节流模式

聚焦开发者工具任意面板→按Ctrl Shift P（Windows/Linux）或Cmd Shift P（macOS）→输入throttle→从列表中选择Network Throttling: Slow 3G回车即可启用；想快切其他档位，直接输入对应名称回车。