You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何通过请求体内容过滤Chrome DevTools中的XHR请求?

如何在Chrome DevTools中按请求体过滤XHR请求

当然可以!Chrome DevTools完全支持根据请求体内容过滤XHR(以及Fetch)请求,操作起来也很直观,我给你一步步拆解:

  • 第一步:打开Network面板并筛选XHR/Fetch
    先打开Chrome DevTools(快捷键F12Ctrl+Shift+I),切换到Network标签页,然后点击顶部的XHR/Fetch按钮,先把范围缩小到这类请求。

  • 第二步:使用body:前缀进行过滤
    在面板顶部的过滤输入框中,输入body:加上你要匹配的请求体关键词。举几个实用例子:

    • 找请求体包含user_id的请求:body:user_id
    • 精确匹配一段JSON内容:body:"{"action":"submit_order"}"
    • 使用正则匹配动态内容:body:/product_\d{3}/(匹配product_后跟三位数字的内容)
  • 进阶:组合过滤条件
    你可以把body:过滤和其他条件结合起来,比如只想看POST类型的XHR请求且包含特定内容:

    method:POST XHR body:checkout
    
  • 补充:过滤表单数据
    如果你的请求是表单提交(Content-Type为application/x-www-form-urlencoded),还可以用formdata:前缀来过滤表单字段,比如:

    formdata:username=john_doe
    

注意事项

  • 如果请求体是加密、二进制格式或者经过压缩的,DevTools无法解析内容,这种情况下body:过滤会失效。
  • 匹配默认是大小写敏感的,如果需要忽略大小写,可以在正则里加i标志,比如body:/user_id/i

亲测这些方法都很实用,你可以根据自己的需求灵活调整~

内容的提问来源于stack exchange,提问作者BirdLaw

火山引擎 最新活动