位置:首页 > 行业软件 > 谷歌浏览器开发者工具抓取XHR请求参数教程

谷歌浏览器开发者工具抓取XHR请求参数教程

时间:2026-06-22  |  作者:318050  |  阅读:0

要实时捕获后端接口的真实请求参数,其实并不复杂。 打开开发者工具的Network面板,启用录制。然后触发你想要分析的操作。 在请求列表中过滤出XHR或Fetch请求,找到目标条目。 重点看Headers里的Request PayloadQuery Parameters。 如果请求体是JSON格式,直接切到Preview标签页查看。 如果是表单提交,就看Form Data。 最后,用Copy as cURL等方式把完整的请求保存下来,方便后续复现。 特别提醒:务必勾选Preserve log,否则请求可能随着页面跳转而消失。

很多场景下,你需要拿到那些“看不见”的参数——比如登录时的加密密码、商品列表的分页偏移量、搜索关键词的编码值。 这些信息都藏在XHR请求的载荷里,而不是页面的HTML源码中。

打开Network面板并触发请求

在目标页面上按F12Ctrl+Shift+I(Windows/Linux)/ Cmd+Option+I(Mac)打开开发者工具。 切换到顶部的Network标签栏,确保左上角的圆形录制按钮是红色状态。如果是灰色,点一下启动。

然后执行你想要分析的操作,比如点击“加载更多”、提交表单或者切换Tab,让页面发出XHR请求。

关键:这一步必须在操作之前就打开Network面板,否则请求已经发完,记录也就无从谈起。

过滤出真正的XHR请求

在Network面板顶部的过滤栏里,直接点击XHR标签。 如果页面使用的是现代Fetch API,建议再额外点一下Fetch标签——两者都可能承载接口调用,只选其一容易漏掉关键请求。

需要警惕的是:有些网站会把XHR请求伪装成JS或Document类型。 如果你没看到预期中的请求,可以先取消所有过滤,然后按Ctrl+R(硬刷新)重载页面。 再观察请求列表中Type列明确标注为XHRfetch的条目。

查看并提取请求参数

在请求列表中找到目标条目(可以按名称关键词搜索,比如 /api/login、/v2/search),单击选中它。 右侧切换到Headers选项卡,向下滚动到Request Payload区域(对应POST或PUT请求),或者Query Parameters区域(对应GET请求)。

如果看不到Request Payload,说明该请求是GET方法,参数全都拼在URL末尾的问号后面。 如果看到的是[object Object][Not available],说明请求体是JSON格式但尚未解析——此时切到PreviewResponse标签页,往往能直接看到格式化后的明文参数。

对于Content-Type为application/x-www-form-urlencoded的请求,参数会以键值对的形式列在Form Data子标签下,逐行可读,复制粘贴即可使用。

保存完整请求用于复现

右键点击目标XHR请求,选择Copy,然后根据需要选择:

  • Copy as cURL(包含headers和body,可直接粘贴到命令行或Postman中发送)
  • Copy request headers(仅头信息)
  • Copy response(响应内容)

重要前提:必须在请求仍然显示在列表中时完成操作。一旦页面跳转或关闭开发者工具,且没有勾选Preserve log,这些请求记录就会永久丢失。

勾选Network面板顶部Controls区域的Preserve log,才能跨页面保留请求记录——这对于登录后跳转、SPA路由切换等场景尤其关键。

来源:整理自互联网
免责声明:文中图文均来自网络,如有侵权请联系删除,心愿游戏发布此文仅为传递信息,不代表心愿游戏认同其观点或证实其描述。

相关文章

更多

精选合集

更多

大家都在玩

热门话题

大家都在看

更多