network面板为空需先确认三件事：devtools已打开且network页签高亮、左上角为红色实心录制圆点、刷新用ctrl+r或地址栏回车而非页面内跳转。
Network面板为空？先确认三件事再刷新
最常见的情况是：点了F12，切到Network标签页，一刷新——空的。不是没请求，是你根本没在“监听”。
必须同时满足以下三点：
- DevTools 确实已打开（不是右键“检查”但窗口被最小化或遮挡）
- 顶部标签栏中
Network页签处于高亮激活状态 - 左上角圆形按钮是 红色实心圆点（
●），灰色表示已暂停录制
快捷键 Ctrl+E（Windows/Linux）或 Cmd+E（macOS）可秒切录制状态，比点按钮快得多。刷新务必用 Ctrl+R 或地址栏回车，不能靠点击页面内链接跳转——后者不会触发完整重载链路。
fetch/XHR 请求找不到？默认不显示，得手动筛
写了 fetch('/api/user') 却在 Network 面板里翻遍 All 都看不到？不是没发，是它被归类为 XHR 类型，而默认 All 会混入大量 HTML、CSS、图片等干扰项。
正确做法是：
- 点击顶部预设过滤按钮：
XHR或Fetch（二者都覆盖现代 JS 请求） - 或在过滤框输入：
/api/（URL 子串匹配）、method:POST（限定方法）、status-code:401（查报错） - 若仍无结果，点开任一请求 →
Headers标签页 → 查Request Headers中的Origin和Referer，确认是否因跨域被服务端静默拦截（返回空响应或 403）
注意：fetch 的预检请求（OPTIONS）若失败，主请求根本不会发出，此时只看到一个灰掉的 OPTIONS 行——别忽略它。
Disable cache 和 Preserve log 不开，等于白调
不开 Disable cache，浏览器可能返回 200 (from memory cache)，你看到的响应头、时间、内容全是缓存副本，不是真实服务端行为；不开 Preserve log，页面一跳转（比如登录后重定向到 /dashboard），所有记录清空，SPA 场景下根本没法连贯追踪。
这两个选项不是“锦上添花”，而是底线配置：
-
Disable cache在后台标签页可能不生效，操作时确保目标页是当前活跃页 -
Preserve log开启后日志会累积，调试完记得右键清空，否则面板变卡 - 两者都开，才能真实还原接口调用链、重定向路径、缓存策略是否生效
看瀑布图（Waterfall）别只盯 Time 列数字
Time 列显示的是“请求发起→响应结束”的总耗时，但它掩盖了关键瓶颈。真问题藏在瀑布图柱子的分段颜色里：
- 左侧灰色细条（
Stalled）过长 → 浏览器排队：同域名并发超限（HTTP/1.1 默认 6 个），或代理/TLS 握手慢 - 中间红色段（
Blocking）长 → DNS 查询、TCP 连接建立慢，可能是网络质量或 host 配置问题 - 右侧绿色段（
Content Download）长 → 资源本身大，或带宽受限；但也要先确认Size列是否真大，避免误判 - 灰色段（
TTFB）长 → 后端响应慢，前端基本无能为力，该找后端查日志了
瀑布图里竖线堆叠越密，说明并行加载越多——但这不等于快，HTTP/1.1 下过多堆叠反而加剧阻塞；HTTP/2+ 下才真正受益于多路复用。这点容易被忽略，尤其在对比老项目优化效果时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
