这一步务必要提前完成：先打开 Chrome 的 Network 面板并开启录制，否则按钮点击后触发的 API 请求以及对应的 JSON 响应数据，根本无法抓取。接着勾选 Preserve log，再执行目标操作，并用关键词进行筛选，同时确认状态码与返回类型；最后结合 Headers、Response 和 Preview 这几个标签页，把请求参数、请求头和返回结果逐项查看清楚。
如果想快速定位网页中某个按钮点击后发出的 API 请求，以及接口返回的 JSON 数据，必须在操作之前就打开 Chrome 的 Network 面板并确认已经开始捕获；否则这一次请求记录会直接丢失，后续无法回放或追踪。
打开并启用网络监控
按下 Command + Option + I（Mac）或 Ctrl + Shift + I（Windows/Linux）可直接打开开发者工具；如果快捷键无法使用，也可以在页面空白处右键→选择“检查”，或者点击浏览器右上角三个点→“更多工具”→“开发者工具”。
点击顶部标签栏中的 Network，进入网络请求监控面板。
确认左上角的圆形按钮为红色实心状态——这是已经开启录制的唯一明显标识；如果显示为灰色，必须手动点击一次启用，否则之后所有网页请求都不会被记录。
精准捕获目标请求
第一步：勾选 Preserve log 复选框。这一步非常关键，不能省略，否则页面跳转或刷新后历史请求会被全部清空，单页应用（如Vue/React项目）中的异步接口请求尤其容易因此漏掉。
第二步：执行你需要分析的操作，例如点击“加载更多”按钮、提交登录表单，或切换筛选条件。此时所有被触发的网络请求都会实时显示在列表中。
第三步：在顶部过滤栏输入关键词，比如 api/order 或 .json；也可以点击预设类型按钮，如 XHR 或 Fetch，快速排除图片、CSS 等无关资源干扰。
第四步：找到对应的请求记录，重点查看 Status 列是否为 200，以及 Type 是否为 fetch 或 xmlhttprequest，避免误选静态资源文件。
查看请求与响应详情
点击任意一个请求条目后，右侧详情面板会自动展开。
进入 Headers 标签页后，向下找到 Request Headers 区域，重点核对 Authorization、Content-Type 和 Referer 这几个字段是否完整、格式是否正确；例如 token 缺失，或者明明提交的是 JSON，Content-Type 却写成了 text/plain，后端通常会直接拒绝处理该请求。
切换到 Response 标签页，可以查看接口返回的原始响应内容——这里展示的是服务器未经格式化处理的原始数据流，适合确认接口是否真正返回了预期字段；如果内容为空或直接报错，往往说明问题出在服务端，或者请求参数根本没有正确发送出去。
如果返回结果是 JSON，建议优先查看 Preview 标签页，它会自动格式化并进行语法高亮，相比 Response 更适合阅读；但也要注意，Preview 有时可能因编码问题出现乱码，这时应切回 Response，并点击右下角 view source 查看原始字节内容。
导出完整请求记录
方法一：右键请求列表任意位置→选择 Sa ve all as HAR with content。生成的 .har 文件会包含请求头、响应体、时间戳、Cookie 等完整上下文信息，可直接使用 Chrome 或专业 HAR 分析工具打开查看。
方法二：在 Network 面板空白处右键→Copy→选择 Copy all as HAR，再粘贴到文本编辑器中并保存为 .har 文件。这个方法更适合需要快速分享给同事、但又不想弹出保存对话框的使用场景。
注意：如果没有勾选 Preserve log，那么导出的 HAR 文件只会包含当前页面的请求记录，跨路由或跳转过程中的数据通常会缺失。
