使用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）的东西，它不起作用，可能是因为iframe在不同的域中。我无法在新标签页中打开iframe内容，因为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. 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的开发工具中，顶部有一个栏，称为执行上下文选择器（h / t felipe-sabino ），它们在元素，网络，源...选项卡下，根据当前选项卡的上下文进行更改。在控制台选项卡中，该栏中有一个下拉菜单，可让您选择控制台将在其中运行的帧上下文。在此下拉列表中选择您的框架，您将发现自己处于相应的框架上。 ：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 v33

Chrome v32&低于

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