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.

Distraught

Answer 1

In the Developer Tools in Chrome, there is a bar along the top, called the Execution Context Selector (hat tip to felipe-sabino), just under the Elements tab, 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 & lower

Milli

This seems to be broken in chrome 30.0.1599.101 - any attempts to use code, variables, etc are still from the parent context after choosing an iframe – Veta

The interface has changed in version 33. I'm not sure where this is now. – Bdellium

updated for newer versions of Web Developer Tools. Leaving the old in since people still use older versions of Chrome and these Web Developer Tools exist in other environments which may not be updated (Such as in Weinre & Edge Inspect) – Milli

Is there a keyboard shortcut for this? – Venatic

The only problem is that you can only start seeing the logs once you change to the right frame, this means you cannot see and inspect the logs and errors on load. Is there a way to tell the browser to not delete and show all logs from all frames or at least retain and show the console for the frame with all the old/previous output? – Loesceke

Honestly never had this issue. For me console.log has always worked, no matter the frame origin. The scope of your code executed in the console, however, is defined by the frame selection. That said, Developer Tools can be configured to not destroy logs on navigation. It sounds like this may be what you want. developers.google.com/web/tools/chrome-devtools/console – Milli

Just an FYI that this tab is called "Execution Context Selector" as it took me some time to find out :) – Academician

@Milli almost 6 years later, we're on v59. Any idea where this is now? I don't see my iframe in the "top" dropdown in the console now.. – Fairtrade

@Fairtrade it's not that different in v59, but you do have to be in the console to see it. I added a new screenshot. You may need to make sure that your iframe has an ID or name, otherwise you may not recognize the frame's name. – Milli

I would like to be able to do source code debugging (specifically in sourcemaps for transpiled Angular/Typescript) in the new context, but changing the execution context doesn't seem to change the available source code in my Sources. Any ideas on that? – Extrusion

This didn't work for me, probably because I'm using an iframe in an extension. I had to go into chrome://extensions and click the iframe link next to the background link for my locally unpacked extension. – Aaronson

It is working fine – Whiteheaded

Does not work for me, trying to send a console log from a next.js app in an iframe which is created by a loader script – Detection

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

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

Ambidexterity

This problem is still outstanding... almost a year later. – Axolotl

Answer 3

When the iFrame points to your site like this:

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

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

Judgemade

This might no longer work due to cross-origin restrictions. – Corkboard

Answer 4

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

Matchboard

Can you add a screenshot? I can't find the Sources – Sonasonant

developer.mozilla.org/en-US/docs/Tools/Working_with_iframes – Emplane