Debugging iframes with Chrome developer tools

Question

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    So the situation is    lt containing site gt    lt iframe id  foo  src  different domain  gt        my app       lt  iframe gt   lt  containing site gt    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

User · Answer

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. You can still set breakpoints in and debug your code using Scripts panel though.

Update: This is no longer true. See Metagrapher's answer.

User · Answer

When the iFrame points to your site like this    lt html gt     lt head gt       lt script type  text javascript  src   jquery js  gt  lt  script gt     lt  head gt     lt body gt       lt iframe id  my frame  src   wherev  gt  lt  iframe gt     lt  body gt   lt  html gt    You can access iFrame DOM through this kind of thing   var iframeBody     window my frame document getElementsByTagName  body   0    iframeBody append     lt h1  gt    html  Hello world

User · Answer

In my fairly complex scenario the accepted answer for how to do this in Chrome doesn t work for me  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

User · Answer

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  amp  lower

[debugging] Debugging iframes with Chrome developer tools

Examples related to debugging

Examples related to iframe

Examples related to google-chrome