编辑并重播XHR chrome / firefox等?


143

我一直在寻找一种方法来更改在浏览器中发出的XHR请求,然后再次重播。假设我在浏览器中完成了一个完整的POST请求,并且我唯一想更改的是一个较小的值,然后再次播放它。直接在浏览器中执行此操作会容易得多且更快。

我已经用Google搜索了一下,还没有找到在Chrome或Firefox中执行此操作的方法。在其中一种浏览器中,或者也许在另一种浏览器中,有什么方法可以做到这一点?


如果您在意识到“重播XHR”在Chrome浏览器中无法正常运行后OPTIONS到达此处,请注意,在有预检()请求的情况下,您需要在预检请求上单击“重播”,而不是实际的最终请求。
Janaka Bandara

Answers:


179

镀铬

  • 在devtools的“网络”面板中,右键单击并选择“ 复制为cURL”
  • 粘贴/编辑请求,然后从终端发送(假设您具有以下curl命令)

见捕获:

在此处输入图片说明

另外,如果您需要在网页的上下文中发送请求,请选择“复制为抓取”,然后从javascript控制台面板中编辑并发送内容。


火狐:

Firefox允许直接从“网络”面板编辑和重新发送XHR。以下捕获来自Firefox 36:

在此处输入图片说明


这实际上可能就是我要寻找的。我知道我可以复制cURL调用,但是由于可以通过身份验证,因此无法直接在终端上运行它。但是随着终端直接建立在Chorme上,我假设调用是从浏览器“内部”进行的。如果是这样,那么这应该可以达成协议。
madsobel

14
我在答案中添加了有关Firefox的信息
Michael P. Bazos

一个小技巧:如果要在浏览器中看到cURL输出,请在CLI中像这样运行它,curl ... > preview.html然后在浏览器中打开文件。
阿菲丽娜2015年

@afilina可以进一步自动化该过程,您可以&& open preview.html在macOS上添加该文件,并在请求后直接打开
CodeBrauer

2
在这种情况下,Firefox到目前为止做得更好!
jpenna

41

Chrome现在在版本67中具有“ 复制为提取”功能

复制为提取

右键单击网络请求,然后选择复制>复制为提取fetch()将该请求的等效代码复制到剪贴板。

https://developers.google.com/web/updates/2018/04/devtools#fetch

样本输出:

fetch("https://stackoverflow.com/posts/validate-body", {
  credentials: "include",
  headers: {},
  referrer: "https://stackoverflow.com/",
  referrerPolicy: "origin",
  body:
    "body=Chrome+now+has+_Copy+as+fetch_+in+version+67%3A%0A%0A%3E+Copy+as+fetch%0ARight-click+a+network+request+then+select+**Copy+%3E+Copy+As+Fetch**+to+copy+the+%60fetch()%60-equivalent+code+for+that+request+to+your+clipboard.%0A%0A&oldBody=&isQuestion=false",
  method: "POST",
  mode: "cors"
});

不同之处在于“ 复制为cURL”还将包含所有请求标头(例如Cookie和Accept),并且适合在Chrome外部重播请求。该fetch()代码适合在同一浏览器中重放。


6
这次真是万分感谢。对于任何其他想知道的人-您只需将fetch命令直接粘贴到Chrome控制台中,然后重播请求即可。
Eric Kigathi

7
您可以在抓取之后使用以下命令来解析由抓取返回的承诺并查看响应正文(假设它是JSON).then(r => r.json()).then(json => console.log(json))
POSIX兼容,

1
@Josh Lee,我认为符合POSIX的技巧很好,可以将其添加到此答案中。
纳比·卡兹

符合@POSIX的好提示,还有更小的命令可以记住吗?
Nabi KAZ

对于那些想在哪里粘贴获取代码的人:在控制台上粘贴并修改它
dotista2008

20

我的两个建议:

  1. Chrome浏览器的Postman插件 + Postman拦截器插件。更多信息:邮递员捕获请求文档

  2. 如果您使用Windows,则可以选择Telerik的Fiddler。它有一个composer选项来重播http请求,它是免费的。


8
自从我开始使用Postman + Interceptor chrome扩展程序以来,我就不再需要Fiddler。
threadster

3
Chrome的FYI Postman应用现已弃用,将其设置为独立版本会更加困难
yefrem

非常感谢我一直在寻找的东西!
穆罕默德


4

对于Firefox,此问题已解决。它具有“编辑并重新发送”功能。

对于Chrome Tamper扩展程序似乎可以解决问题。


不再更新,并且评论也很差。最好的选择是将Firefox用于此类imo。
T3rm1

是的 重新发送的情况似乎变化很快。现在,Chrome具有针对XHR请求的“重发”,但不允许编辑。
Jari Turkia

当心Firefox版本76,似乎在“编辑并重新发送”时Cookie中的CSRF令牌有问题。在ver 37上进行了尝试,效果很好,但在ver76上却存在CSRF令牌验证问题。
puppyceceyoyo

0

如上所述,有几种方法可以执行此操作,但以我的经验,处理XHR请求并重新发送的最佳方法是使用chrome dev工具将请求复制为cURL请求(在网络标签中右键单击请求) ),然后简单地导入Postman应用程序(左上方的巨型导入按钮)。


0

5年过去了,Chrome开发者并未忽略这一基本要求。
尽管它们没有像Firefox中那样提供编辑数据的方法,但它们提供了完整的XHR重放。
这允许调试ajax调用。 “重播XHR”将重复整个传输。
在此处输入图片说明


0

无需安装第三方扩展!

存在javascript-snippet,您可以将其添加为浏览器书签,然后在任何站点上激活以跟踪和修改请求。看起来像:

在此处输入图片说明

有关更多说明,请查看github页面。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.