Debugging 使用Chrome开发工具调试iFrame_Debugging_Iframe_Google Chrome

Debugging 使用Chrome开发工具调试iFrame

debugging iframe google-chrome

Debugging 使用Chrome开发工具调试iFrame,debugging,iframe,google-chrome,Debugging,Iframe,Google Chrome,我想使用Chrome开发者控制台查看我的应用程序中的变量和DOM元素，但该应用程序存在于iframe中（因为它是一个OpenSocial应用程序）因此，情况是： <containing site> <iframe id='foo' src='different domain'> ... my app ... </iframe> </containing site> ... 我的应用程序。。。有没有办法从开发者控制台访问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

也需要能够与包含站点进行对话。

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

更新：这不再是事实。当iFrame指向您的站点时，请参见。

：

<html>
  <head>
    <script type="text/javascript" src="/jquery.js"></script>
  </head>
  <body>
    <iframe id="my_frame" src="/wherev"></iframe>
  </body>
</html>

您可以通过这种方式访问iframedom

var iframeBody = $(window.my_frame.document.getElementsByTagName("body")[0]);
iframeBody.append($("<h1/>").html("Hello world!"));

var iframeBody=$（window.my_frame.document.getElementsByTagName（“body”）[0]）；
iframeBody.append（$（“”）.html（“helloworld！”）；

在Chrome的开发者工具中，顶部有一个叫做执行上下文选择器（h/t）的条，就在元素、网络、源代码下方。。。选项卡，根据当前选项卡的上下文而更改。在Console选项卡中，该栏中有一个下拉列表，允许您选择控制台将在其中操作的帧上下文。在此下拉列表中选择您的帧，您将在相应的帧上下文中找到自己：D

Chrome v59

铬合金v33

铬合金v32及更低版本

在我相当复杂的场景中，关于如何在Chrome中实现这一点的公认答案对我来说并不适用。您可能想试试Firefox调试器（Firefox开发者工具的一部分），它显示了所有的“源”，包括iFrame的一部分。

这个问题仍然很突出。。。差不多一年后，chrome 30.0.1599.101似乎打破了这一点——在选择了iFrame之后，任何使用代码、变量等的尝试都仍然来自父上下文。在版本33中，接口发生了更改。我不确定它现在在哪里。有键盘快捷键吗？唯一的问题是，只有在更改到正确的帧后才能开始查看日志，这意味着您无法查看和检查日志以及加载时的错误。有没有办法告诉浏览器不要删除并显示所有帧中的所有日志，或者至少保留并显示具有所有旧/以前输出的帧的控制台？只是一个供参考的信息，该选项卡被称为，因为我花了一些时间才找到：）你能添加屏幕截图吗？我找不到

来源