必须通过chrome开发者工具network面板启用网络节流才能真实模拟弱网,操作前提是打开工具、切换network标签并刷新页面使请求出现;预设slow 3g可快速验证,自定义需设置下载/上传速率及延迟;务必禁用缓存并可用命令菜单快捷切换。

要让网页在真实弱网条件下暴露出加载卡顿、白屏超时或接口失败等问题,必须通过Chrome开发者工具的Network面板启用网络节流功能,否则所有请求都会走本地高速通道,测试毫无意义。
打开开发者工具并进入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以上——没跳,说明节流没生效。
添加自定义弱网配置
当预设档位无法复现你手头那个“2G信号满格但延迟飙到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回车即可启用;想快速关掉?同上打开命令菜单→输入no throttle→回车快速恢复默认网络行为。











