必须启用火狐内置网络节流功能，通过开发者工具→网络面板→选择slow 3g或自定义配置，并禁用缓存后强制刷新，才能真实模拟弱网验证首屏渲染、资源超时及骨架屏触发。
要在火狐浏览器中真实模拟弱网环境来验证前端页面首屏渲染卡顿、资源加载超时或骨架屏触发时机，必须启用其内置的网络节流功能——它不依赖插件、不修改代码、不走代理，但仅对当前标签页生效，且需手动刷新才能让节流参数作用于新请求。
启用火狐开发者工具并进入网络监控面板
这一步是后续所有操作的基础，未完成则节流菜单不可见。在目标网页按 Ctrl+Shift+I（Windows/Linux）或 Cmd+Opt+I（macOS）打开开发者工具 → 点击顶部标签栏中的网络（Network）选项卡 → 确保左上角录制按钮（●）为红色激活状态；若为灰色，点击一次使其变红，否则页面请求不会被捕获，节流下拉菜单也不会出现。
用预设档位快速启用Slow 3G弱网
适合5秒内完成基础弱网验证，无需计算参数。在网络面板右上角找到标有“No throttling”的下拉菜单 → 点击后选择Slow 3G → 页面顶部会立即显示蓝色提示条“Network throttling enabled” → 此时务必按 Ctrl+R（Windows/Linux）或 Cmd+R（macOS）强制刷新页面，否则已发出的请求不受节流影响，Waterfall 时间轴中所有请求仍显示毫秒级 TTFB。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
添加自定义弱网配置
当预设档位无法复现特定现场问题（如“信号满格但延迟飙到1.8秒”）时，必须手动建模。方法一：图形界面操作 → 在网络面板右上角节流下拉菜单中选择Custom → 点击右侧Add custom profile链接 → 弹窗中填入名称（如“Weak_2G_HighLatency”）、Download（建议填150 kbps）、Upload（填50 kbps）、Latency（填1800 ms）→ 点击Add保存。方法二：命令面板快捷调用 → 按 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（macOS）打开命令菜单 → 输入throttle → 选择“Network Throttling: Add Custom Profile” → 填写同上参数 → 回车确认。
配合禁用缓存确保节流真实生效
浏览器缓存会绕过网络请求，导致节流完全失效——你看到的加载时间仍是本地内存返回的毫秒级数值，毫无测试价值。在网络面板顶部工具栏中，勾选Disable Cache复选框 → 【务必在启用节流后、刷新前完成此操作】→ 再按 Ctrl+R 或 Cmd+R 强制刷新 → 观察 Waterfall 中每个请求的Waiting (TTFB)是否稳定在 200–500ms 区间；若仍为个位数毫秒，说明缓存未真正禁用或节流未激活。
验证节流是否真正起效
第一步：刷新后，在 Network 面板中任选一个 JS 文件 → 查看右侧详情栏的Timings标签页 → 展开Waiting (TTFB)项，确认数值是否显著高于无节流时（如从 12ms 跳至 328ms）。第二步：拖动 Waterfall 时间轴底部滑块，放大观察资源排队现象——弱网下图片和 CSS 会明显滞后加载，JS 执行被阻塞。第三步：关闭节流（切回 No throttling）→ 再次刷新 → 对比两次完整加载时间，差距应大于 3 倍；若差距小于 1.5 倍，说明节流未生效或缓存干扰仍在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
