编辑和重播 XHR chrome/firefox 等?

     2023-02-16     52

关键词:

【中文标题】编辑和重播 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/

【讨论】:

WebAPi - Firefox 和 chrome 中的 CORS

】WebAPi-Firefox和chrome中的CORS【英文标题】:WebAPi-CORSinFirefoxandchrome【发布时间】:2014-12-1115:20:16【问题描述】:您能否帮助我了解如何在FireFox和Chrome中启用CORS。WebAPi在Internet上运行良好,但与Chrome/Firefox不兼容。这就是我在Firefox... 查看详情

Chrome、Firefox 和 Explorer 中的图片、srcset 和 css

】Chrome、Firefox和Explorer中的图片、srcset和css【英文标题】:picture,srcsetandcssinChrome,Firefox,andExplorer【发布时间】:2019-04-1307:10:22【问题描述】:在Chrome(70.0.3538.77)、Firefox(63.0.1)和InternetExplorer(11.0.9600.19155)<styletype="text/css 查看详情

在 Chrome、Firefox 和 Safari 中强制标准/怪癖模式?

】在Chrome、Firefox和Safari中强制标准/怪癖模式?【英文标题】:ForceStandards/QuirksModeinChrome,Firefox,andSafari?【发布时间】:2012-08-0620:05:28【问题描述】:有没有办法在Chrome、Firefox和Safari中从浏览器强制标准/怪癖模式(类似于IE所做... 查看详情

CORS XHR 重定向不起作用

...据。但是浏览器没有重定向到位置标头中的url。在Chrome/Firefox上尝试过,它也是一样的。jQuery.ajax(url,options).done((result:any)=>);.don 查看详情

:not() 选择器在 Safari 和 Chrome/Firefox 之间的行为不同

】:not()选择器在Safari和Chrome/Firefox之间的行为不同【英文标题】::not()selectornotbehavingthesamebetweenSafariandChrome/Firefox【发布时间】:2016-06-2920:33:36【问题描述】:我很难弄清楚为什么以下代码在Safari中呈现为蓝色,而在Chrome和Firefox... 查看详情

CORS 不适用于 Chrome/Firefox 和 Apache

】CORS不适用于Chrome/Firefox和Apache【英文标题】:CORSnotworkingonChrome/FirefoxandApache【发布时间】:2016-01-1501:42:52【问题描述】:我正在尝试使用CORS在我的浏览器和Apache服务器(位于不同域中)之间运行AJAX请求。在服务器端,我根据... 查看详情

适用于 chrome、firefox 和 safari 浏览器的 Azure 浏览器推送通知

】适用于chrome、firefox和safari浏览器的Azure浏览器推送通知【英文标题】:Azurebrowserpushnotificationforchrome,firefox,andsafaribrowser【发布时间】:2018-11-2815:44:15【问题描述】:如何使用azure通知中心实现浏览器推送通知,该中心可以向chrom... 查看详情

在 Chrome、Firefox 和 cURL 上突然出现分块请求问题

】在Chrome、Firefox和cURL上突然出现分块请求问题【英文标题】:ChunkingRequestIssuesOutOfNowhereonChrome,Firefox,andcURL【发布时间】:2020-09-0414:22:31【问题描述】:我的生产服务器在特定请求上出现了分块错误,这似乎无处不在。服务器上... 查看详情

执行 2x 的脚本是 Chrome + Firefox 中的预期行为或错误?

】执行2x的脚本是Chrome+Firefox中的预期行为或错误?【英文标题】:Scriptexecuting2xisanexpectedbehaviourorbuginChrome+Firefox?【发布时间】:2019-03-3111:36:01【问题描述】:编辑:这个问题与@mario标记的任何重复帖子无关如果您也遇到这种情... 查看详情

使用 scroll-snap-type 和 -align 没有滚动捕捉 / 简单示例无法正常工作 Chrome/Firefox /

...-snap-type和-align没有滚动捕捉/简单示例无法正常工作Chrome/Firefox/【英文标题】:Noscrollsnapwithscroll-snap-typeand-align/SimpleExamplenotworkingChrome/Firefox/【发布时间】:2019-07-2321:06:42【问题描述】:使用Chrome/Firefox,我为几张图片创建了一个... 查看详情

Chrome/Firefox console.log 总是附加一行“未定义”

】Chrome/Firefoxconsole.log总是附加一行“未定义”【英文标题】:Chrome/Firefoxconsole.logalwaysappendsalinesaying\'undefined\'【发布时间】:2013-01-1600:54:05【问题描述】:每次执行console.log,都会在输出日志中附加一行undefined。它发生在Windows和... 查看详情

强制浏览器在 chrome、firefox 上打印背景图像

】强制浏览器在chrome、firefox上打印背景图像【英文标题】:Forcebrowserstoprintbackgroundimagesonchrome,firefox【发布时间】:2014-04-1802:04:19【问题描述】:我有一个包含一些背景图像和css颜色的网页,但是当我使用ctrl+p打印页面时,它的... 查看详情

Chrome、Chromium、Firefox 在 QtWebApp 上两次请求页面

】Chrome、Chromium、Firefox在QtWebApp上两次请求页面【英文标题】:Chrome,Chromium,FirefoxrequestingpagetwiceonQtWebApp【发布时间】:2014-02-0710:21:42【问题描述】:我正在尝试使用QtWebApp创建一个简单的Web应用服务器,但Chrome、Firefox和chromium总... 查看详情

需要在 Chrome、FireFox 中提示 RDP 文件下载

】需要在Chrome、FireFox中提示RDP文件下载【英文标题】:NeedtopromptRDPfiledownloadinChrome,FireFox【发布时间】:2013-01-0500:02:59【问题描述】:我们的网站上有一个RDP链接,该链接在IE中运行良好(提示用户下载)。但是,如果用户尝试... 查看详情

SignalR - 在 Chrome/Firefox 中始终降级为服务器发送事件

】SignalR-在Chrome/Firefox中始终降级为服务器发送事件【英文标题】:SignalR-AlwaysdowngradedtoserversenteventsinChrome/Firefox【发布时间】:2014-10-2109:13:25【问题描述】:我有一个API应用程序和一个Web应用程序(为了简单起见,在同一台服务... 查看详情

结合firebreath在chrome/firefox的多进程模式下崩溃一例(代码片段)

...和NPAPI的插件接口,使用统一的API来暴露JSAPI。Chrome和FireFox使用NPAPI,IE使用ActiveX。值得注意的是Chrome和FireFox在多进程模式下和单进程模式下调用NPAPI的行为不一致,这也是最近遇到的这个崩溃bug的原因。在Win3 查看详情

有没有办法在过滤掉 iOS Chrome、Firefox 和其他浏览器的同时检测 iOS Safari?

】有没有办法在过滤掉iOSChrome、Firefox和其他浏览器的同时检测iOSSafari?【英文标题】:IsthereawaytodetectiOSsafariwhilefilteringoutiOSChrome,Firefoxandotherbrowsers?【发布时间】:2015-03-2421:07:54【问题描述】:所以那些在iOS网络应用程序上工作... 查看详情

jquery appendTo 和 detach 以重播动画 gif

】jqueryappendTo和detach以重播动画gif【英文标题】:jqueryappendToanddetachinordertoreplayanimatedgif【发布时间】:2013-05-2416:00:50【问题描述】:这是我的js:$(document).ready(function()$lrgBanner=$(\'#panel\');$lrgBanner.detach();$(\'#bannerimg\').clic 查看详情