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:

<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? 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.

Answer 1

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.