使用 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 的开发人员工具中，顶部有一个栏，称为“执行上下文选择器”(h/t felipe-sabino)，位于“元素”选项卡下方，该栏根据当前选项卡的上下文。在“控制台”选项卡中时，该栏中有一个下拉列表，允许您选择控制台将在其中运行的框架上下文。在此下拉列表中选择您的框架，您将发现自己处于适当的框架上下文中。 :D

Chrome v59

Chrome v33

Chrome v32 及更低版本