打开Network面板前必须确认三件事：DevTools已打开、Network标签页被选中、左上角录制按钮为红色；否则无法捕获请求。
打开 Network 面板前必须确认的三件事
Chrome DevTools 的 Network 面板不会自动捕获所有请求——它只记录面板处于「开启且未暂停」状态时发生的网络活动。很多人以为刷新页面就一定能看到全部请求，结果发现 XHR 或 fetch 调用不见了，其实是因为面板没在监听状态。
务必检查以下三点：
- DevTools 是否已打开（不是仅靠右键“检查”但没点开）
-
Network标签页是否被选中（顶部标签高亮） - 左上角的「录制」按钮（
●）是否为红色（红色 = 正在录制；灰色 = 已暂停）
快捷键 Ctrl+E（Windows/Linux）或 Cmd+E（macOS）可随时切换录制状态，比点按钮更快。
过滤特定请求：按类型、域名、状态码快速定位
一个典型页面可能发出 50+ 请求，全靠滚动找效率极低。直接用 Network 面板顶部的过滤框，输入关键词就能筛出目标请求：
立即学习“前端免费学习笔记（深入）”；
- 输入
XHR或fetch，只显示脚本发起的 API 请求 - 输入
js或css，聚焦资源加载类请求 - 输入
status-code:404或domain:api.example.com，支持字段语法（官方文档称其为 “Filter expressions”） - 点击表头如
Size或Time可排序，快速发现大体积响应或慢请求
注意：过滤是实时的，但不会影响已记录的请求条目——只要没清空日志，筛选后切回 All 还能恢复查看。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
点击请求后重点看哪几块内容
单击某一行请求，在右侧打开的详情页里，真正影响调试效率的是这四个标签页：
-
Headers：确认Request Method是GET还是POST；检查Referer、Authorization等关键 header 是否携带；留意Content-Type是否匹配预期 -
Preview和Response：前者是格式化后的响应体（适合 JSON/XML），后者是原始字节流（适合二进制或编码异常时对照） -
Timing：展开后能看到各阶段耗时（blocked、dns、connect、wait、receive）。如果wait时间远高于其他项，大概率是服务端处理慢，而非网络问题 -
Initiator：显示谁触发了该请求（例如script.js:123或Other），对排查第三方 SDK 自动发请求特别有用
别忽略右上角的「Copy」按钮组——Copy as cURL 可直接复现请求，Copy request headers 能快速比对前后端 header 差异。
导出 HAR 文件用于离线分析或协作复现
截图或口头描述请求细节容易遗漏关键信息，而 HAR（HTTP Archive）文件是标准 JSON，包含完整时间戳、headers、body、timings，开发、测试、后端都能用同一份数据对齐问题。
导出操作很简单：
- 确保
Network面板正在录制（红色圆点）并完成一次完整操作（如登录+加载列表） - 右键请求列表空白处 →
Save all as HAR with Content（勾选with Content才包含响应体） - 文件保存后，可用在线工具如 HAR Viewer 直观浏览，或用 Python 的
haralyzer库做自动化分析
容易被忽略的一点：Save all as HAR 不会包含已禁用的请求（比如你手动禁用了某个 JS 文件的加载），所以导出前请确认所有目标请求都成功出现在列表中且状态码非 cancelled。
