使用 Chrome 开发者工具调试 iframe [英] Debugging iframes with Chrome developer tools

问题描述

我想使用 Chrome 开发者控制台查看应用中的变量和 DOM 元素，但该应用存在于 iframe 中(因为它是一个 OpenSocial 应用).

I'd like to use the Chrome developer console to look at variables and DOM elements in my app, but the app exists inside an iframe (since it's an OpenSocial app).

所以情况是:

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

有什么方法可以从开发者控制台访问 iframe 中发生的事情?如果我尝试执行 document.getElementById("foo").something，它不起作用，可能是因为 iframe 在不同的域中.

Is there any way to access things happening in that iframe from the developer console? If I try to do document.getElementById("foo").something, it doesn't work, probably because the iframe is in a different domain.

我无法在新选项卡中打开 iframe 内容，因为 iframe 也需要能够与包含站点通信.

I can't open the iframe contents in a new tab, because the iframe needs to be able to talk to the containing site as well.

推荐答案

在 Chrome 的 Developer Tools 中，顶部有一个栏，称为 Execution Context Selector (h/t felipe-sabino)，就在 Elements、Network、Sources... 选项卡下，这取决于上下文的上下文当前选项卡.当在控制台选项卡中时，该栏中有一个下拉菜单，允许您选择控制台将在其中运行的框架上下文.在此下拉列表中选择您的框架，您会发现自己处于适当的框架上下文中.:D

In the Developer Tools in Chrome, there is a bar along the top, called the Execution Context Selector (h/t felipe-sabino), just under the Elements, Network, Sources... tabs, that changes depending on the context of the current tab. When in the Console tab there is a dropdown in that bar that allows you to select the frame context in which the Console will operate. Select your frame in this drop down and you will find yourself in the appropriate frame context. :D

Chrome v59

Chrome v33

Chrome v32 &低

这篇关于使用 Chrome 开发者工具调试 iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！