使用 Chrome 开发者工具调试 iframe
Posted
技术标签:
【中文标题】使用 Chrome 开发者工具调试 iframe【英文标题】：Debugging iframes with Chrome developer tools 【发布时间】：2011-03-17 14:11:09 【问题描述】：我想使用 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 还需要能够与包含站点通信。
【问题讨论】：
【参考方案1】：目前控制台中的评估是在页面中的主框架的上下文中执行的，并且它遵循与主框架本身相同的跨域策略。这意味着您无法访问 iframe 中的元素，除非主框架可以。不过，您仍然可以使用“脚本”面板设置断点并调试代码。
更新：这不再是真的。见Metagrapher's answer。
【讨论】：
这个问题仍然悬而未决......差不多一年后。【参考方案2】：当 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!"));
【讨论】：
这可能不再起作用due to cross-origin restrictions。【参考方案3】：在 Chrome 的开发者工具中，顶部有一个栏，称为 Execution Context Selector (h/t felipe-sabino)，就在元素、网络、源...当前选项卡的上下文。当在控制台选项卡中时，该栏中有一个下拉菜单，可让您选择控制台将在其中运行的框架上下文。在此下拉列表中选择您的框架，您会发现自己处于适当的框架上下文中。 :D
Chrome v59
Chrome v33
Chrome v32 及更低版本
【讨论】：
这似乎在 chrome 30.0.1599.101 中被破坏 - 在选择 iframe 后，任何使用代码、变量等的尝试仍然来自父上下文 33版界面变了，不知道现在在哪里。 这个有快捷键吗？ 唯一的问题是，只有在切换到正确的框架后才能开始查看日志，这意味着您无法查看和检查加载时的日志和错误。有没有办法告诉浏览器不要删除并显示所有框架中的所有日志，或者至少保留并显示具有所有旧/以前输出的框架的控制台？ 仅供参考，此选项卡名为 "Execution Context Selector"，因为我花了一些时间才知道 :)【参考方案4】：在我相当复杂的场景中，如何在 Chrome 中执行此操作的公认答案对我不起作用。您可能想改用 Firefox 调试器（Firefox 开发人员工具的一部分），它显示所有“源”，包括那些属于 iFrame 的源
【讨论】：
可以加个截图吗？我找不到Sources
developer.mozilla.org/en-US/docs/Tools/Working_with_iframes以上是关于使用 Chrome 开发者工具调试 iframe的主要内容，如果未能解决你的问题，请参考以下文章
在 iframe 中使用 react 开发工具 [在 Chrome 中]
chrome 开发者工具怎么抓包跳转和iframe层里面的请求