必须通过HTTP服务（如Live Server）在浏览器中打开HTML页面，再按F12进入Network面板刷新查看；file://协议下因安全限制无法捕获完整网络请求。
怎么在 HTML 页面里看到真实的网络请求
HTML 本身不发请求，真正发起 HTTP 请求的是浏览器——你写的 <script></script>、、fetch() 或表单提交，都会触发浏览器底层的网络调用。想分析这些请求，必须用浏览器开发者工具，VSCode 或纯静态 HTML 文件本身不提供抓包能力。
常见错误现象：右键“在浏览器中打开” HTML 文件后按 F12，Network 面板为空或只显示 file:// 协议请求——这是因为浏览器出于安全限制，对本地文件（file://）禁用了大部分跨源请求和部分资源加载逻辑。
- 必须通过 HTTP 服务访问页面：用 VSCode 的
Live Server扩展、Python 的python -m http.server，或任何能起一个http://localhost:xxxx服务的工具 - 打开页面后，立刻按
F12→ 切到Network标签页 → 刷新页面，才能捕获完整加载链 - 若仍看不到 JS/AJAX 请求，检查是否勾选了
Preserve log，否则跳转或刷新会清空记录
Network 面板里哪些字段最关键
瀑布图（Waterfall）不是装饰，它是定位性能瓶颈的核心视图。重点关注三列：Status、Time、Waterfall 柱状图本身。
常见误读：把 Time 列数字当成“总耗时”，其实它只是从请求发起（Request Start）到响应结束（Response End）的时间，不含 DNS、TCP、TLS 等前置阶段——这些藏在 Waterfall 柱子的分段里。
-
Status列出现404或500，先点开对应请求，看Response Headers里的Content-Type是否为text/html；如果是，说明服务器返回了错误页面而非预期 JSON，前端可能误判为成功 -
Waterfall柱子左侧灰色细条（Stalled）过长，大概率是浏览器在排队——同一域名并发请求数超限（HTTP/1.1 默认 6 个），或遇到代理/证书验证阻塞 - 点击任一请求 →
Headers子页 → 检查Request Headers中的Referer和Origin，可快速识别是否因跨域被服务端拒绝（返回403或空响应）
为什么 fetch() 请求没出现在 Network 面板
它一定在，只是可能被过滤掉了。默认 Network 面板只显示“文档级”请求（HTML 页面本身），fetch()、XMLHttpRequest 属于 XHR 类型，需要手动筛选。
典型遗漏操作：写了 fetch('/api/user')，但 Network 面板顶部过滤器设为 All 时仍找不到——因为该请求可能被浏览器预检（preflight）拦截，或返回了重定向（302），而重定向后的请求未被展开。
- 在 Network 面板顶部搜索框输入
/api/，或直接选择过滤器XHR - 若仍无记录，检查控制台是否有
TypeError: Failed to fetch——这通常意味着 CORS 被拒，请求根本没发出去，Network 不会记录 - 启用
Disable cache后重试，避免因缓存导致 fetch 返回from cache而忽略真实网络行为
Waterfall 柱子颜色和分段怎么看懂
每根柱子由多个颜色区块组成，代表请求生命周期不同阶段。鼠标悬停即可看到各段含义，但几个关键段必须主动识别：
常见混淆：把 Content Download（绿色）当作“下载慢”，其实它只反映 TCP 数据流接收速率；真正卡住的往往是前面的 Queueing（浅灰）或 Connecting（橙色）。
-
Queueing时间长：说明请求被浏览器挂起，原因可能是同域名并发超限、渲染主线程繁忙（如 JS 正在执行大循环）、或 DevTools 本身开启太多监听 -
Connecting+SSL时间长：DNS 解析慢（查dnslookup）、TLS 握手失败（证书问题）、或服务端 TCP backlog 满 -
Waiting (TTFB)（深紫）高：服务端处理慢，与前端无关。此时应看服务器日志，而不是优化 JS
真正容易被忽略的是：Waterfall 只显示已发出的请求。如果某个 <script src="xxx.js"></script> 因路径错误 404，它不会触发后续依赖它的代码执行——但你可能只盯着 JS 报错，忘了回 Network 看这个 404 请求是否被掩盖在一堆字体/CSS 请求里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
