要真实复现弱网卡顿需强制Chrome走慢速网络:先开DevTools并启用设备模拟(Ctrl+Shift+M/Cmd+Shift+M),选设备后刷新页面;再打开Network面板,启用Slow 3G节流并勾选Disable cache,最后强制刷新验证Timing延迟。

要真实复现用户在地铁隧道、电梯间或偏远地区刷不出健康码、扫码支付总超时的卡顿体验,必须让Chrome浏览器强制走慢速网络通道,否则所有请求都跑本地高速回环,测出来的加载时间毫无参考价值。
先打开设备模拟模式并确认页面已适配
这一步操作起来很简单,直接按快捷键就行:Windows/Linux 用户按 Ctrl+Shift+M,macOS 用户按 Cmd+Shift+M。如果快捷键没反应,说明开发者工具还没打开,先按 Ctrl+Shift+I(或 Cmd+Option+I)调出 DevTools,再点左上角那个手机+平板图标。
注意:必须在已打开目标网页的标签页里操作,否则切换后页面不会自动刷新适配。进入设备模拟界面后,顶部下拉菜单默认显示“Responsive”,点击右侧箭头展开设备列表,从 iPhone 14 Pro、Pixel 8 等预设中任选一个 → 页面视图会立即缩放,但此时服务器仍可能返回桌面版 HTML,因为 UA 字符串和视口参数尚未被实际用于网络请求。必须手动刷新页面(F5 或 Cmd+R/Ctrl+R),才能让浏览器带着新的 User-Agent 和 viewport 宽高重新发起请求,服务器据此返回真正的移动端页面结构。
启用网络节流功能
Network 面板是节流生效的前提,不打开它,所有设置都是摆设。在设备模拟模式下,按 Ctrl+Shift+I(或 Cmd+Option+I)确保开发者工具已激活 → 点击顶部标签栏中的 Network 选项卡 → 【务必刷新一次页面】,确保面板里出现至少一条请求记录,否则左上角的节流下拉菜单会灰显不可点。
在 Network 面板左上角找到标有 “No throttling” 的下拉菜单(若没显示,请先确认左上角录制按钮 ▶️ 是红色且已启用)→ 点击下拉箭头,选择 Slow 3G → 页面顶部立刻出现黄色提示条 “Network throttling is enabled”。
禁用缓存确保节流真实生效
浏览器缓存会绕过网络请求,导致你明明选了 Slow 3G,图片却秒出——这不是弱网,是缓存骗了你。
在 Network 面板顶部工具栏中,勾选 Disable cache 复选框,且该操作必须在启用节流后、刷新页面前完成。
这一步操作起来很简单,直接勾选就行,但漏掉就等于白测。
强制刷新验证弱网效果
第一步:确认当前节流模式已激活(如 Slow 3G),且 Disable cache 已勾选;
第二步:按 Ctrl+R(Windows/Linux)或 Cmd+R(macOS)强制刷新页面;
第三步:观察 Network 面板中 JS、CSS、图片等资源的 Timing 栏,Loading 时间应明显拉长(例如从 200ms 跳到 2.3s 以上);
第四步:若未跳变,说明节流未生效——请回头检查是否漏刷页面、是否未勾选 Disable cache、或是否误在 Elements/Console 等非 Network 面板操作。










