必须提前开启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 或 Content-Type 写成 text/plain 却发 JSON，后端大概率直接拒收。
切换到 Response 标签页，查看原始返回体——这里显示的是服务器未经处理的字节流，适合验证接口是否真返回了预期字段；若内容为空或报错，说明问题出在服务端或请求参数根本没发出去。
若返回的是 JSON，优先看 Preview 标签页，它会自动格式化并高亮语法，比 Response 更易读；但注意：Preview 有时会因编码问题显示乱码，此时必须切回 Response 并点击右下角 view source 查原始字节。
导出完整请求记录
方法一：右键请求列表任意位置→选择 Save all as HAR with content。生成的 .har 文件包含请求头、响应体、时间戳、Cookie 等全部上下文，可直接用 Chrome 或专用 HAR 分析器打开。
方法二：在 Network 面板空白处右键→Copy→选择 Copy all as HAR，粘贴到文本编辑器中保存为 .har 文件。此法适合需快速分享给同事但不希望弹出保存对话框的场景。
注意：未勾选 Preserve log 时导出的 HAR 只含当前页请求，跨路由操作的数据必然缺失。
