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

296

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

debugging iframe google-chrome

— 贝姆
source

546

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

Chrome v59 Chrome版本59

Chrome v33 Chrome版本33

Chrome v32及更低版本 Chrome预先版本32

— 人物传记作者
source

1

这似乎在chrome 30.0.1599.101中已被破坏-选择iframe后，仍然尝试从父上下文中使用代码，变量等的任何尝试

— Kevin

3

界面在版本33中已更改。我不确定现在在哪里。

— Malcr001 2014年

3

有键盘快捷方式吗？

— Vlas Bashynskyi

2

仅供参考，该标签页称为“执行上下文选择器”，因为我花了一些时间才找到它：)

— Felipe Sabino

1

这对我不起作用，可能是因为我在扩展程序中使用了iframe。我必须进入chrome：// extensions，然后单击本地链接的背景扩展旁边的iframe链接。

— AlexMorley-Finch

9

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

更新：这不再是事实。请参阅Metagrapher的答案。

— 尤里·塞米卡斯基（Yury Semikhatsky）
source

3

差不多一年后，这个问题仍然很突出。

— Glen Little

2

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

— 伊兹
source

您可以添加屏幕截图吗？我找不到Sources

— Shayan

1

当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!"));

— 戴夫·亚伦·史密斯
source