我想使用 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
目前控制台中的评估是在页面中的主框架的上下文中执行的，并且它遵循与主框架本身相同的跨域策略。这意味着您无法访问 iframe 中的元素，除非主框架可以。不过，您仍然可以使用“脚本”面板设置断点并调试代码。
更新：这不再是真的。见Metagrapher's answer。
【讨论】：
当 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!"));
【讨论】：
在 Chrome 的开发者工具中，顶部有一个栏，称为 Execution Context Selector (h/t felipe-sabino)，就在元素、网络、源...当前选项卡的上下文。当在控制台选项卡中时，该栏中有一个下拉菜单，可让您选择控制台将在其中运行的框架上下文。在此下拉列表中选择您的框架，您会发现自己处于适当的框架上下文中。 :D
Chrome v59
Chrome v33
Chrome v32 及更低版本
【讨论】：
在我相当复杂的场景中，如何在 Chrome 中执行此操作的公认答案对我不起作用。您可能想改用 Firefox 调试器（Firefox 开发人员工具的一部分），它显示所有“源”，包括那些属于 iFrame 的源
【讨论】：
Sources