使用Chrome开发人员工具调试iframe

Question

我想使用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需要能够与包含该站点的内容进行通话。

Answer 1

在Chrome的开发人员工具中，位于顶部的元素栏Execution Context Selector（h / t felipe-sabino）位于“元素”，“网络”，“源...”选项卡下，该栏根据当前选项卡的上下文而变化。在“控制台”选项卡中时，该栏中会出现一个下拉列表，您可以通过该下拉列表选择控制台将在其中运行的框架上下文。在此下拉列表中选择框架，您将在适当的框架上下文中找到自己。

Answer 2

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

Answer 3

在我相当复杂的情况下，如何在Chrome中执行此操作的公认答案对我不起作用。您可能需要尝试使用Firefox调试器（Firefox开发人员工具的一部分），该调试器显示所有“源”，包括那些属于iFrame的源