编辑和重放 XHR chrome/firefox 等?

Edit and replay XHR chrome/firefox etc?

我一直在寻找一种方法来更改在我的浏览器中制作的 XHR request 然后再次播放它。

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

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

有没有办法在其中一种浏览器或另一种浏览器中执行此操作?

Chrome :

  • 在devtools的Network面板中,右击select Copy as cURL
  • 粘贴/编辑请求,然后从终端发送它,假设您有 curl 命令

查看截图:

或者,如果您需要在网页上下文中发送请求,select "Copy as fetch" 并从 javascript 控制台编辑发送​​内容。


火狐:

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

我的两个建议:

  1. Chrome's Postman plugin + the Postman Interceptor Plugin. More Info: Postman Capturing Requests Docs

  2. 如果您使用 Windows,那么 Telerik 的 Fiddler 是一个选项。它有一个重播 http 请求的作曲家选项,而且是免费的。

对于 Firefox,问题自行解决。它实现了 "Edit and Resend" 功能。

因为 Chrome Tamper extension 似乎可以解决问题。

Chrome 在版本 67 中现在有 Copy as fetch:

Copy as fetch

Right-click a network request then select Copy > Copy As Fetch to copy the fetch()-equivalent code for that request to your clipboard.

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

示例输出:

fetch("https://whosebug.com/posts/validate-body", {
  credentials: "include",
  headers: {},
  referrer: "https://whosebug.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() 代码适合在同一个浏览器中回放。

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

Updating/completing :

将请求复制为 cUrl (bash) 后,只需将其导入 Postman App:

5 年过去了,Chrome 开发人员并未忽视这一基本要求。
虽然他们不提供像在 Firefox 中那样编辑数据的方法,但他们提供了完整的 XHR 回放。
这允许调试 ajax 调用。

"Replay XHR" 将重复整个传输。

无需安装第 3 方扩展!

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

如需进一步说明,请查看 github 页面。

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

为了启用该选项,您必须“启用实验性功能”。
Control+Shift+I (Windows, Linux) 或 命令+选项+I (macOS)
并勾选“启用网络控制台”旁边的复选框。

有关如何 Enable Experimental Tools and the feature can be found here

的更多详细信息

Firefox 这个功能很好用!并查看原始或格式化 JSON 中的响应。我比 chrome.

更喜欢 Firefox 开发工具

真棒请求

Intercept & Modify HTTP Requests