使用Chrome开发人员工具debuggingiframe

我想使用Chrome开发者控制台查看我的应用程序中的variables和DOM元素，但该应用程序存在于iframe中（因为它是OpenSocial应用程序）。

所以情况是： 

<containing site> <iframe id='foo' src='different domain'> ... my app ... </iframe> </containing site>

有没有什么办法从开发者控制台访问iframe中发生的事情？ 如果我尝试去做document.getElementById（“foo”）。它不起作用，可能是因为iframe在不同的域中。 我无法在新选项卡中打开iframe内容，因为iframe也需要能够与包含的网站进行通话。

在Chrome中的开发者工具中，顶部有一个栏，名为Execution Context Selector （h / t felipe-sabino ），位于元素，networking，源…选项卡下方，根据上下文当前标签。 在“控制台”选项卡中，在该栏中有一个下拉列表，允许您select控制台将在其中运行的框架上下文。 在这个下拉框中select你的框架，你会发现自己在适当的框架上下文。 ：d

Chrome v59 Chrome版本59

Chrome v33 Chrome版本33

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

目前，控制台中的评估是在页面主框架的上下文中执行的，并且遵循与主框架本身相同的跨源策略。 这意味着你不能访问iframe中的元素，除非主框架可以。 尽pipe如此，您仍然可以在“脚本”面板中设置断点并debugging代码。

更新：这不再是真的。 看到Metagrapher的答案 。

当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中执行此操作的接受答案不适用于我。 您可能想尝试使用Firefoxdebugging器（Firefox开发人员工具的一部分），它显示所有“来源”，包括那些是iFrame的一部分

Interesting Posts

在Chrome中从css自定义样式的button中删除蓝色边框

如何testingChrome扩展？

Google Chrome将本地主机redirect到https

为什么console.log.apply（）会抛出非法调用错误？

如何在Chrome开发者工具或Firefox的Firebug中validationXPathexpression式？

JavaScript：如何在Chromedebugging器工具中设置条件断点

如何使用JavaScript在<div>中加载HTML页面？

使用Chrome开发人员工具制作HTTP请求

谷歌铬扩展:: console.log（）从后台页面？

在Chrome中模拟有限的带宽？