Debugging iframes with Chrome developer tools

Question 1

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.

Question 2

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 version 59

Chrome v33 Chrome version 33

Chrome v32 & lower Chrome pre-version 32

Question 3

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

Question 4

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

Question 5

Is there a keyboard shortcut for this?

Question 6

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?

Question 7

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

Question 8

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.

Question 9

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

Question 10

If the iFrame URL is on the same domain as the parent page, you can actually access it via JavaScript. Here's an example:

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

You can access the iFrame DOM via window.my_frame.document.

Here's an example using jQuery (although it's not required):

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

If your iFrame is on a different domain then this will not work, due to cross-origin restrictions.

Question 11

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

Question 12

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

Question 13

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

Question 14

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

Metagrapher Metagrapher 8,9821 gold badge26 silver badges31 bronze badges · Accepted Answer · 2011-12-20 20:08:07Z

681

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 version 59

Chrome v33 Chrome version 33

Chrome v32 & lower Chrome pre-version 32

Share

Improve this answer

edited Apr 12, 2024 at 10:11

Wenfang Du's user avatar

Wenfang Du

11.8k13 gold badges78 silver badges116 bronze badges

answered Dec 20, 2011 at 20:08

Metagrapher's user avatar

Metagrapher Metagrapher

8,9821 gold badge26 silver badges31 bronze badges

13

1

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

Kevin
– Kevin

2013年11月14日 00:55:21 +00:00
Commented Nov 14, 2013 at 0:55
3

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

Malcr001
– Malcr001

2014年03月03日 09:41:24 +00:00
Commented Mar 3, 2014 at 9:41
3

Is there a keyboard shortcut for this?

Vlas Bashynskyi
– Vlas Bashynskyi

2016年09月27日 16:23:45 +00:00
Commented Sep 27, 2016 at 16:23
9

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?

Bizmate
– Bizmate

2016年11月14日 23:05:19 +00:00
Commented Nov 14, 2016 at 23:05
4

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

Felipe Sabino
– Felipe Sabino

2016年12月16日 01:20:14 +00:00
Commented Dec 16, 2016 at 1:20

| Show 8 more comments

CollectivesTM on Stack Overflow

Debugging iframes with Chrome developer tools

4 Answers 4

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

CollectivesTM on Stack Overflow

4 Answers 4

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related