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

ゝ一世哀愁。 2022-11-27 07:22 331阅读 0赞

本文翻译自：[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:* **所以情况是：**

*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][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_s answer] .* **请参阅[Metagrapher的回答][Metagrapher_s answer] 。**

--------------------

### \#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指向您的网站时，如下所示：**

*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**

***Chrome v59*** **Chrome v59** ![Chrome版本59][Chrome_59]

***Chrome v33*** **Chrome v33** ![Chrome版本33][Chrome_33]

***Chrome v32 & lower*** **Chrome v32及更低版本** ![Chrome预售版32][Chrome_32]

[Debugging iframes with Chrome developer tools]: https://oldbug.net/q/dKbK/Debugging-iframes-with-Chrome-developer-tools
[https_stackoom.com_question_dKbK_Chrome_iframe]: https://stackoom.com/question/dKbK/%E4%BD%BF%E7%94%A8Chrome%E5%BC%80%E5%8F%91%E4%BA%BA%E5%91%98%E5%B7%A5%E5%85%B7%E8%B0%83%E8%AF%95iframe
[Metagrapher_s answer]: https://stackoverflow.com/questions/3275816/debugging-iframes-with-chrome-developer-tools#8581276
[felipe-sabino]: https://stackoverflow.com/users/429521/felipe-sabino
[Chrome_59]: https://i.imgur.com/9Vrg491.png
[Chrome_33]: https://i.stack.imgur.com/nR0Cj.png
[Chrome_32]: https://i.stack.imgur.com/945eW.png