使用Chrome开发人员工具调试iframe

最新推荐文章于 2024-05-17 09:36:55 发布

xfxf996

最新推荐文章于 2024-05-17 09:36:55 发布

阅读量2.3k

点赞数

文章标签： debugging iframe google-chrome

原文链接：https://oldbug.net/q/dKbK/Debugging-iframes-with-Chrome-developer-tools

版权

本文介绍了如何在Chrome开发者工具中调试嵌入在不同域的iframe中的应用。内容包括使用Scripts面板设置断点、切换控制台的帧上下文以及考虑使用Firefox的调试器作为替代方案。

摘要由CSDN通过智能技术生成

本文翻译自：Debugging iframes with Chrome developer tools

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). 我想使用Chrome开发者控制台来查看我的应用中的变量和DOM元素，但该应用程序存在于iframe （因为它是一个OpenSocial应用程序）。

So the situation is: 所以情况是：

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

Is there any way to access things happening in that iframe from the developer console? 有没有办法从开发者控制台访问该iframe发生的事情？ If I try to do document.getElementById("foo").something , it doesn't work, probably because the iframe is in a different domain. 如果我尝试做document.getElementById("foo").something ，它不起作用，可能是因为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. 我无法在新标签中打开iframe内容，因为iframe需要能够与包含的网站进行通信。

#1楼

参考：https://stackoom.com/question/dKbK/使用Chrome开发人员工具调试iframe

#2楼

Currently evaluation in the console is performed in the context of the main frame in the page and it adheres to the same cross-origin policy as the main frame itself. 目前，控制台中的评估是在页面中主框架的上下文中执行的，并且它遵循与主框架本身相同的跨源策略。 This means that you cannot access elements in the iframe unless the main frame can. 这意味着除非主框架可以，否则您无法访问iframe中的元素。 You can still set breakpoints in and debug your code using Scripts panel though. 您仍然可以使用Scripts面板设置断点并调试代码。

Update: This is no longer true. 更新：这不再是真的。 See Metagrapher's answer . 请参阅Metagrapher的回答。

#3楼

In my fairly complex scenario the accepted answer for how to do this in Chrome doesn't work for me. 在我相当复杂的场景中，如何在Chrome中执行此操作的已接受答案对我不起作用。 You may want to try the Firefox debugger instead (part of the Firefox developer tools), which shows all of the 'Sources', including those that are part of an iFrame 您可能想要尝试使用Firefox调试器（Firefox开发人员工具的一部分），它显示所有“源”，包括属于iFrame的那些

#4楼

When the iFrame points to your site like this: 当iFrame指向您的网站时，如下所示：

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

You can access iFrame DOM through this kind of thing. 您可以通过这种方式访问iFrame DOM。

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

#5楼

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. 在Chrome的开发者工具中，顶部有一个栏，称为Execution Context Selector （h / t felipe-sabino ），位于Elements，Network，Sources ...标签下，根据上下文的不同而变化当前标签。 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 ：d