chrome 开发者工具怎么抓包跳转和iframe层里面的请求

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了chrome 开发者工具怎么抓包跳转和iframe层里面的请求相关的知识,希望对你有一定的参考价值。

参考技术A 勾选network下面preserve log就可以看得跳转前的请求信息了,至于iframe的请求我试过是可以看到的.

使用 Chrome 开发者工具调试 iframe

【中文标题】使用 Chrome 开发者工具调试 iframe【英文标题】:Debugging iframes with Chrome developer tools 【发布时间】:2011-03-17 14:11:09 【问题描述】:

我想使用 Chrome 开发者控制台查看我的应用程序中的变量和 DOM 元素,但该应用程序存在于 iframe 中(因为它是一个 OpenSocial 应用程序)。

所以情况是:

<containing site>
 <iframe id='foo' src='different domain'>
  ... my app ...
 </iframe>
</containing site>

有没有办法从开发者控制台访问iframe 中发生的事情?如果我尝试做document.getElementById("foo").something,它不起作用,可能是因为iframe 在不同的域中。

我无法在新选项卡中打开 iframe 内容,因为 iframe 还需要能够与包含站点通信。

【问题讨论】:

【参考方案1】:

目前控制台中的评估是在页面中的主框架的上下文中执行的,并且它遵循与主框架本身相同的跨域策略。这意味着您无法访问 iframe 中的元素,除非主框架可以。不过,您仍然可以使用“脚本”面板设置断点并调试代码。

更新:这不再是真的。见Metagrapher's answer。

【讨论】:

这个问题仍然悬而未决......差不多一年后。【参考方案2】:

当 iFrame 像这样指向您的网站时:

<html>
  <head>
    <script type="text/javascript" src="/jquery.js"></script>
  </head>
  <body>
    <iframe id="my_frame" src="/wherev"></iframe>
  </body>
</html>

你可以通过这种东西访问iFrame DOM。

var iframeBody = $(window.my_frame.document.getElementsByTagName("body")[0]);
iframeBody.append($("<h1/>").html("Hello world!"));

【讨论】:

这可能不再起作用due to cross-origin restrictions。【参考方案3】:

在 Chrome 的开发者工具中,顶部有一个栏,称为 Execution Context Selector (h/t felipe-sabino),就在元素、网络、源...当前选项卡的上下文。当在控制台选项卡中时,该栏中有一个下拉菜单,可让您选择控制台将在其中运行的框架上下文。在此下拉列表中选择您的框架,您会发现自己处于适当的框架上下文中。 :D

Chrome v59

Chrome v33

Chrome v32 及更低版本

【讨论】:

这似乎在 chrome 30.0.1599.101 中被破坏 - 在选择 iframe 后,任何使用代码、变量等的尝试仍然来自父上下文 33版界面变了,不知道现在在哪里。 这个有快捷键吗? 唯一的问题是,只有在切换到正确的框架后才能开始查看日志,这意味着您无法查看和检查加载时的日志和错误。有没有办法告诉浏览器不要删除并显示所有框架中的所有日志,或者至少保留并显示具有所有旧/以前输出的框架的控制台? 仅供参考,此选项卡名为 "Execution Context Selector",因为我花了一些时间才知道 :)【参考方案4】:

在我相当复杂的场景中,如何在 Chrome 中执行此操作的公认答案对我不起作用。您可能想改用 Firefox 调试器(Firefox 开发人员工具的一部分),它显示所有“源”,包括那些属于 iFrame 的源

【讨论】:

可以加个截图吗?我找不到Sources developer.mozilla.org/en-US/docs/Tools/Working_with_iframes

以上是关于chrome 开发者工具怎么抓包跳转和iframe层里面的请求的主要内容,如果未能解决你的问题,请参考以下文章

谷歌浏览器chrome怎么抓包,怎么开发者工具抓包

谷歌浏览器chrome怎么抓包,怎么开发者工具抓包

chrome开发者工具抓包的问题

Google Chrome抓包分析详解

使用 Chrome 开发者工具调试 iframe

在 iframe 中使用 react 开发工具 [在 Chrome 中]