必须先启用 Safari 开发者菜单才能使用 Network 面板节流功能:Safari → 设置 → 高级 → 勾选“在菜单栏中显示‘开发’菜单”;若未出现,需确认 macOS 为 Sequoia 或更新版本,否则需开启“开发者模式”并重启 Safari。
要验证前端页面在弱网高延迟环境下的首屏渲染、资源排队、TTFB响应和错误降级表现,必须让 Safari 真实施加可控的带宽限制与往返延迟,而非仅靠肉眼观察加载时间变化。
启用 Safari 开发者菜单并进入 Network 面板
没有“开发”菜单,Network 面板就不可见,节流功能完全无法调用。这是所有后续操作的前提,跳过将导致整个流程失败。
打开 Safari → 顶部菜单栏点击“Safari” → “设置” → 切换到“高级”标签页 → 勾选【在菜单栏中显示“开发”菜单】。
关闭设置窗口,确认顶部菜单栏已出现“开发”项;若未出现,请检查 macOS 系统是否为 Sequoia 或更新版本——旧系统需先在“隐私与安全性”中开启“开发者模式”并重启 Safari。
访问任意网页(如 example.com),按 Option + Command + I 打开 Web 检查器 → 点击顶部标签页中的“网络”(Network)。
使用内置 Slow 3G 节流模拟高延迟弱网
此方法最快捷,适用于快速验证 TTFB 延长、资源阻塞、骨架屏触发时机等行为,但仅作用于当前标签页且必须在刷新前启用。
方法一:图形界面操作
在网络面板底部找到 Throttling 下拉菜单 → 选择“Slow 3G”(不是“No throttling”)→ 勾选右上角的“Disable cache”(禁用缓存)。
【务必在启用节流后、刷新前勾选禁用缓存,否则 Safari 可能从内存返回资源,导致延迟不生效】
按下 Command + R 刷新页面 → 观察 Waterfall 时间轴中每个请求的“Waiting (TTFB)”是否稳定在 200–500ms 区间;若仍为个位数毫秒,说明节流未真正激活或缓存干扰仍在。
通过 macOS Network Link Conditioner 全局限速并注入高延迟
当需要测试 DNS 解析超时、TCP 握手失败、SSL 协商卡顿等底层链路问题时,内置节流无能为力,必须升级到系统级工具。它会影响 Safari、终端 curl、甚至 Xcode 的网络请求。
第一步:安装并启用 Network Link Conditioner
打开“系统设置” → “网络” → 右下角点击“详细信息…” → 切换到“代理”标签页 → 滚动到底部,点击“配置网络链接调节器” → 若提示未安装,点击“安装”按钮下载并运行配套配置工具(macOS 自带,无需额外下载)。
第二步:创建自定义高延迟配置
打开“网络链接调节器”应用(位于 /Applications/Utilities/)→ 在“Interface”下拉菜单中选择当前活跃网卡(如 Wi-Fi)→ 勾选“Enable” → 点击“Add”新建配置 → 命名如“High Latency 3G” → 设置参数:
Download: 75 KB/s(≈600 Kbps)
Upload: 20 KB/s
Latency: 【400 ms】(关键值,高于 Slow 3G 内置的 200 ms)
Packet Loss: 0.8%(可选,用于验证重传逻辑)。
第三步:应用并验证
在配置列表中选中刚创建的“High Latency 3G” → 回到 Safari,刷新目标页面 → 打开 Network 面板,任选一个请求,查看 Timing 标签页中的“DNS Lookup”、“Initial Connection”、“SSL”各阶段耗时是否同步延长;若仅“Waiting (TTFB)”变长而其他阶段不变,说明延迟未注入到 TCP 层,需检查 Interface 是否选对。
比你酷