使用 Chrome 开发者工具调试 iframe

Question

我想使用 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

也需要能够与包含的网站进行通信。

Answer 1

在 Chrome 的开发者工具中，顶部有一个栏，称为

Execution Context Selector

（向 felipe-sabino 致敬），位于 Elements 选项卡下方，该栏根据当前选项卡的上下文而变化。在“控制台”选项卡中时，该栏中有一个下拉列表，允许您选择控制台将在其中运行的框架上下文。在此下拉列表中选择您的框架，您将发现自己处于适当的框架上下文中。：D

Chrome v59 Chrome version 59

Chrome v33 Chrome version 33

Chrome v32 及更低版本 Chrome pre-version 32

Answer 2

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

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

Answer 3

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

Answer 4

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

使用 Chrome 开发者工具调试 iframe

问题描述投票：0回答：4

4个回答

最新问题

使用 Chrome 开发者工具调试 iframe

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4