Network 面板是浏览器原生提供的调试工具，非HTML实现，需打开DevTools并开启录制后刷新页面才能查看真实网络请求；过滤、Preserve Log和Disable Cache是高效排查的关键。
Network 面板不是 HTML 写出来的，它是浏览器 DevTools 自带的调试界面，HTML 代码本身无法“做”出 Network 面板——你只能通过操作浏览器、触发网络请求，让这个面板显示数据。
Network 面板根本不是用 HTML 实现的
它由 Chrome/Edge 等浏览器原生提供，底层是 C++ 和 Blink 渲染引擎驱动的 UI，和网页 DOM 完全隔离。你在页面里写再多 <div> 或 fetch()，都只是“触发它记录”，而不是“构建它”。强行用 HTML 模拟一个功能完整的 Network 面板，既不可靠也不实用——没有请求拦截能力、没有真实 Timing 数据、没有 Initiator 调用栈、无法读取 Set-Cookie 或 Authorization 头。
想看 Network 面板，必须打开 DevTools 并刷新页面
常见误操作是：先打开页面，再打开 DevTools，结果看不到初始 HTML、CSS、JS 的加载记录。正确做法是：
- 按
F12或Cmd+Option+I（Mac）打开 DevTools，确保 Network 面板已选中 - 点击左上角红色圆点按钮，确认它处于「录制中」状态（红色实心）
- 按
Cmd+R/Ctrl+R刷新页面，或直接在地址栏回车重新加载 - 如果仍为空，检查是否误点了「Stop recording」（灰色圆点），或勾选了「Disable cache」但没刷新
过滤和定位关键请求的实用技巧
面对几十上百条请求，靠肉眼扫效率极低。真正高效的排查方式是组合使用 filter：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 查某个接口：在 filter 输入框直接输
login或/api/user，支持子串匹配 - 只看失败请求：
status-code:4xx或status-code:5xx - 查 JSON 接口：
mime-type:application/json - 查未加密请求：
scheme:http - 查带特定响应头的请求：
has-response-header:Content-Encoding - 查大于 100KB 的资源：
larger-than:100k
注意：filter 是「且」关系，空格分隔多个条件，比如 method:POST mime-type:application/json 只显示 POST 的 JSON 请求。
Preserve Log 和 Disable Cache 不是可选项，而是必开项
这两个开关直接影响你能否复现问题：
-
Preserve Log：不勾选时，页面跳转或刷新后 Network 记录全清空；勾选后能跨页面保留，方便追踪登录后跳转、SPA 路由切换等场景 -
Disable Cache：不勾选时，浏览器可能直接从内存缓存返回200 (from memory cache)，你看不到真实服务端响应；调试接口逻辑或缓存策略时，必须开启 - 特别提醒：
Disable Cache在后台标签页中可能不生效，建议在活跃标签页操作
Timing 图里的 Waiting (TTFB) 值异常高？先确认没被缓存干扰；Initiator 显示为 Other？大概率是异步脚本动态创建的请求，得配合 Preserve Log 追到源头。
