编辑和重播 XHR chrome/firefox 等？

Posted 2023-02-16

【中文标题】编辑和重播 XHR chrome/firefox 等？

【英文标题】：Edit and replay XHR chrome/firefox etc?

【发布时间】：2015-04-30 18:12:15

【问题描述】：

我一直在寻找一种方法来更改在我的浏览器中创建的 XHR request，然后重新播放它。

假设我在浏览器中完成了一个完整的POST 请求，我唯一想要更改的是一个小值，然后再次播放。 直接在浏览器中执行此操作会更容易、更快捷。

我用谷歌搜索了一下，还没有找到在 Chrome 或 Firefox 中执行此操作的方法。

有没有办法在这些浏览器中的任何一个或另一个浏览器中做到这一点？

【问题讨论】：

如果您在意识到“Replay XHR”在 Chrome 中不起作用后到达这里，请注意，如果有预检 (OPTIONS) 请求，您需要单击 上的“重播” preflight 请求 - 不是实际的最终请求。

【参考方案1】：

铬：

在 devtools 的 Network 面板中，右键单击并选择 Copy as cURL 粘贴/编辑请求，然后从终端发送，假设您有 curl 命令

查看截图：

或者，如果您需要在网页上下文中发送请求，请选择“复制为获取”并编辑并从 javascript 发送内容控制台面板。

火狐：

Firefox 允许直接从网络面板编辑和重新发送 XHR。以下截图来自 Firefox 36：

【讨论】：

这实际上可能是我正在寻找的。我知道我可以复制 cURL 调用，但我不能直接从终端运行它，因为我会通过身份验证。但是随着终端直接内置到 Chorme，我假设调用是从浏览器“内部”进行的。如果是这样，那么这应该会达成协议。

我在答案中添加了有关 Firefox 的信息

小技巧：如果您想在浏览器中查看 cURL 输出，请在 CLI 中像这样curl ... > preview.html 运行它，然后在浏览器中打开文件。

@afilina 要更加自动化此过程，您可以在 macOS 上添加 && open preview.html 并在请求后直接打开文件

在这种情况下，到目前为止，Firefox 做得更好！

【参考方案2】：

我的两个建议：

Chrome's Postman plugin + Postman Interceptor Plugin。更多信息：Postman Capturing Requests Docs

如果您使用的是 Windows，则可以选择 Telerik 的 Fiddler。它有一个 composer 选项来重放 http 请求，而且是免费的。

【讨论】：

自从我开始使用 Postman + Interceptor chrome 扩展后，我就不再需要 Fiddler。

用于 Chrome 的 FYI Postman 应用程序现已弃用，在独立版本中设置它有点困难

【参考方案3】：

对于 Firefox，问题自行解决。它实现了“编辑和重新发送”功能。

对于 Chrome，Tamper extension 似乎可以解决问题。

【讨论】：

这本书不再更新，而且评论很差。最好的选择是使用 Firefox 来完成这种工作。

是的。重新发送的情况似乎变化很快。现在 Chrome 有 Resend-for XHR-requests，但它不允许编辑。

当心 Firefox 76 版，它在编辑和重新发送时似乎与 cookie 中的 CSRF 令牌有问题。尝试使用 37 版它运行良好，但使用 76 版有 CSRF 令牌验证问题。

【参考方案4】：

Chrome 现在在 67 版中具有 Copy as fetch：

复制为抓取

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

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

样本输出：

fetch("https://***.com/posts/validate-body", 
  credentials: "include",
  headers: ,
  referrer: "https://***.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"
);

不同的是，Copy as cURL 还会包含所有的请求头（如 Cookie 和 Accept），适合在 Chrome 之外重放请求。 fetch() 代码适合在同一浏览器内回放。

【讨论】：

谢谢你。对于其他想知道的人 - 您可以直接在 Chrome 控制台中粘贴 fetch 命令并重播请求。

你可以在 fetch 之后使用以下内容来解析 fetch 返回的 promise 并查看响应体（假设是 JSON）.then(r => r.json()).then(json => console.log(json))

@Josh Lee，我认为符合 POSIX 标准的提示很好，可以添加到这个答案中。

@POSIX 兼容的好技巧，有没有更小的命令可以记住？！

对于那些想知道将获取代码粘贴到哪里的人：在控制台上粘贴并修改它

【参考方案5】：

如上所述，有几种方法可以做到这一点，但根据我的经验，处理 XHR 请求和重新发送的最佳方法是使用 chrome 开发工具将请求复制为 cURL 请求（右键单击网络选项卡）并简单地导入 Postman 应用程序（左上角的巨大导入按钮）。

【参考方案6】：

更新/完成zszep answer:

将请求复制为cUrl（bash）后，只需将其导入Postman App：

【参考方案7】：

5 年过去了，Chrome 开发人员并没有忽视这一基本要求。 虽然它们没有提供像 Firefox 那样编辑数据的方法，但它们提供了完整的 XHR 回放。 这允许调试 ajax 调用。 “Replay XHR”将重复整个传输。

【讨论】：

OP 想要edit 并重放请求，chrome 到目前为止只允许重放而不做任何更改。

【参考方案8】：

无需安装第 3 方扩展！

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

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

【参考方案9】：

Microsoft 基于 Chromium 的 Edge 支持“网络”选项卡中的“编辑和重播”请求作为实验性功能：

要启用该选项，您必须“启用实验功能”。Control+Shift+I（Windows、 Linux) 或 Command+Option+I (macOS) 并勾选“启用网络控制台”旁边的复选框。

更多关于Enable Experimental Tools的详细信息，功能可以是found here

【讨论】：

感谢您分享此内容。仅供参考，这仍然是一个实验性功能。您必须通过以下链接启用实验：Enable Experimental Features

【参考方案10】：

Firefox 有这个功能相当不错！并查看原始或格式化 JSON 中的响应。比起 chrome，我更喜欢 Firefox 开发工具。

【参考方案11】：

真棒请求

拦截和修改 HTTP 请求

https://chrome.google.com/webstore/detail/requestly-modify-headers/mdnleldcmiljblolnjhpnblkcekpdkpa https://requestly.io/