开发人员工具:跨弹出窗口跟踪网络请求

Posted

技术标签:

【中文标题】开发人员工具:跨弹出窗口跟踪网络请求【英文标题】:Developer Tools: Follow network requests across popups 【发布时间】:2013-06-18 23:35:26 【问题描述】:

我们正试图弄清楚某些东西在网络上是如何工作的(用于网络抓取/自动化),并且我们正在处理的其中一个网页会弹出一个弹出窗口来完成一些工作。我们最常用的调试工具之一是开发者工具中的 Chrome 网络选项卡,点击“记录”做一些工作,然后检查所做的工作,然后“离线”复制所做的工作。

但是,即使您点击“记录”,开发者工具(在 Chrome、Safari 和 Firefox 中 - 都一样)不会在弹出窗口中跟踪请求。

是否缺少一些配置值,或者记录所有网络事件的方法?我们不能为此使用 tcpdump/wireshark,因为这一切都是通过 SSL 完成的。我们考虑过的一个选项是中间人 https 代理,但我找不到任何预先编写好的东西,所以我们必须自己创建一个。

【问题讨论】:

取决于弹出窗口的性质。你会详细说明吗? 【参考方案1】:

您可以使用Charles Web Debugging Proxy,这是一款可让您查看所有流量甚至用您自己的响应替换一些响应的应用程序。当然,这可能会破坏 HTTPS,因此您必须接受证书错误,但这通常是一个小问题。它适用于 Win、Mac 甚至 Linux。

【讨论】:

【参考方案2】:

对象检查器无法检查当前页面中没有的内容。因此,您需要使用相同的参数在弹出 url 中打开检查器,以查看它的作用。

作为一种工具,您可以使用网络嗅探器准确查看在此过程中调用了哪个 url。

【讨论】:

【参考方案3】:

我不知道有什么方法可以跨弹出窗口跟踪请求,因为每个窗口都有自己的 Web 检查器,但是您可以使用 Fiddler 来检查 HTTPS 请求。它将 MITM 并随后引发证书错误,这应该允许您按照发生的顺序检查所有请求。

【讨论】:

啊 fiddler 看起来就像我写的那样。有没有类似的东西不需要Windows? (我们都在 Mac 上,但如果需要,可以使用 virtualbox) 我不知道。我的印象(感谢他们的首页)Fiddler 是跨平台的,但看起来他们的instructions for Mac 需要将它安装在 VM 中。快速搜索并没有发现任何其他可以在 Mac 上拦截 HTTPS 的内容。 在 Mac 或 Linux 上,请改用 WebScarab mitmproxy 在命令行下运行,并且在 mac/linux 上也能完成这项工作,但我发现使用像 Fiddler 这样漂亮的 GUI 更难。

以上是关于开发人员工具:跨弹出窗口跟踪网络请求的主要内容,如果未能解决你的问题,请参考以下文章

使用 Istio 为微服务提供高级流量管理和请求跟踪功能

如何使用DevTools调试Nodejs运行的Javascript

如何使用IE9浏览器自带开发人员工具捕获网页请求

在 Firefox 开发人员工具中查看 JavaScript 堆栈跟踪错误(如在 Chrome 中)

如何使用 F12 开发人员工具调试网页

对于 iPad 开发人员:如何在 iPad 的 UIImageView 中查看从照片库的弹出窗口中选择的图像