火狐浏览器如何使用网络监视器调试API接口请求-浏览器-PHP中文网

必须启用火狐网络面板并点击红色录制按钮捕获请求，再通过XHR/fetch/api等关键词筛选目标请求，最后在Payload、Response、Headers标签页分别查看参数、响应和请求头信息，还可导出HAR文件用VS Code全文搜索。

火狐浏览器如何使用网络监视器调试api接口请求

要精准定位前端发送给后端的API参数、请求头、响应体及状态码，必须在火狐浏览器中正确启用网络监视器并进入请求上下文详情页，否则看到的只是杂乱列表而非可调试的结构化数据。

打开网络监视器并确保请求被捕获

1、在目标网页处于激活状态时，按下 Ctrl + Shift + E（Windows/Linux）或 Cmd + Option + E（macOS），直接打开开发者工具并跳转至 Network 面板。

2、确认左上角圆形录制按钮为红色高亮状态；若为灰色，点击一次以启用实时捕获——【未启用录制将完全无法捕获任何请求】。

3、刷新页面或执行触发 API 的操作（如点击“提交订单”按钮），确保至少有一条 XHR 或 fetch 请求出现在列表中。

快速筛选出目标 API 请求

方法一：用内置类型按钮粗筛
点击过滤栏右侧下拉箭头→勾选 XHR 和 fetch→取消勾选 css、js、img 等非接口类资源。这一步能立刻剔除 80% 以上干扰项。

方法二：用关键词组合精准匹配
在过滤栏中输入：domain:api.example.com method:POST，回车后仅保留该域名下所有 POST 请求；若需排除成功响应，追加 -status-code:200。

方法三：用路径正则锁定版本路由
输入 url:/v\d+/login，可同时捕获 /v1/login、/v2/login 等路径，避免因版本迭代漏掉关键接口。

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

查看并分析 API 请求参数与响应

第一步：在请求列表中找到目标条目，单击其 Name 列（如 login 或 users）。

第二步：右侧自动展开详情面板→切换到 Payload 标签页→此处显示前端发出的实际参数：
• 若 Content-Type 为 application/x-www-form-urlencoded，参数在 Form Data 子区域；
• 若为 application/json，参数在 Request Payload 区域，点击右侧“{}”图标可格式化 JSON。

第三步：切换到 Headers 标签页→重点检查 Authorization 头是否携带有效 token，Content-Type 是否与 Payload 数据格式一致——【Content-Type 声明为 JSON 但 Payload 是表单格式，后端必然 400 报错】。

第四步：切换到 Response 或 Preview 标签页→查看服务端返回的原始数据或树形结构化视图，验证字段名、嵌套层级是否符合预期。