谷歌浏览器开发者工具如何抓取网页上的XHR请求参数？

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

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

打开Network面板并触发请求

在目标页面上按F12或Ctrl+Shift+I（Windows/Linux）/ Cmd+Option+I（Mac）打开开发者工具，切换到顶部的Network标签栏，确保左上角的圆形录制按钮是红色状态（如果是灰色，点一下启动）。然后执行你想要分析的操作，比如点击“加载更多”、提交表单或者切换Tab，让页面发出XHR请求。

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

过滤出真正的XHR请求

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

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

查看并提取请求参数

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

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

对于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路由切换等场景尤其关键。