使用 Chrome 开发者工具调试 iframe
我想使用 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 还需要能够与包含的网站对话。
在 Chrome 的开发者工具中，顶部有一个栏，称为 Execution Context Selector (h/t felipe-sabino)，就在 Elements、Network、Sources... 标签下，它会根据当前选项卡。当在控制台选项卡中时，该栏中有一个下拉菜单，允许您选择控制台将在其中运行的框架上下文。在此下拉列表中选择您的框架，您会发现自己处于适当的框架上下文中。 :D
https://i.imgur.com/9Vrg491.png
https://i.stack.imgur.com/nR0Cj.png
https://i.stack.imgur.com/945eW.png
目前，控制台中的评估是在页面中的主框架的上下文中执行的，并且它遵循与主框架本身相同的跨域策略。这意味着您无法访问 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 中执行此操作的公认答案对我不起作用。您可能想尝试使用 Firefox 调试器（Firefox 开发人员工具的一部分），它会显示所有“源”，包括那些属于 iFrame 的源
Sources
