64

I have a facebook canvas application that runs in an iframe. I would like to debug my page in firebug but can not get the javascript to scope to the iframe that is running my app.

the iframe:

<iframe frameborder="0" src="[app_url_removed]" name="iframe_canvas" id="iframe_canvas" class="canvas_iframe_util" style="height: 905px;"></iframe>

i've tried all the following and none of them work:

cd(iframe_canvas)
cd(window.iframe_canvas)
cd(iframe_canvas.window)
cd($('iframe_canvas'))

I have firefox 3.6.13 and I have tried firebug 1.7a11 and firebug 1.6.2

also tried the bookmarklet and various other things from this link Firebug and jQuery selectors in an iFrame to no avail.

Community
  • 1
  • 1
Kalendae
  • 2,256
  • 1
  • 21
  • 23
  • I am pretty sure if you look in the Firebug view, there is a "+" next to the iframe tag. If you expand that you can see what is loaded into the iframe. I can also see all the javascript calls from the iFrame code on the console. What are you trying to do? – Phil Wallach Feb 22 '11 at 04:54
  • Hi, Im trying to call the javascript functions inside that iframe in the console. for instance I am using jquery in my iframe and I'd like to use the jquery selector to access a div and bind an event listener in the console to test. – Kalendae Feb 22 '11 at 18:42
  • I am doubtful if it's possible. You may need to open the iFrame in a separate window (by right clicking on it, and selecting open iFrame in a new Window). But if there is a way to debug JS in iFRame.. I would really like to know. – Nishant Feb 23 '11 at 16:31
  • You can also read this Firebug tip: http://www.softwareishard.com/blog/planet-mozilla/firebug-tip-using-command-line-within-an-iframe/ Honza – Jan Odvarko Jul 18 '12 at 14:36

4 Answers4

105

use one of these commands:

 cd(frames[0]) 
 cd(frames["iframe_canvas"])

and 

 cd(top)

to return to the main window.

Still, due to a bug this currently doesn't work on cross-domain-iframes (http://code.google.com/p/fbug/issues/detail?id=3893). There are two test cases where you can test your evironment for both cases:

Another possible source of surprise: if you execute more commands at once the cd command seems to not have an effect for the directly following commands:

 >>> cd(frames[0]); location.href;
 ["Current window:", Window cdFrame.html]
 "https://getfirebug.com/tests/content/commandLine/cd.html"
 >>> location.href
 "https://getfirebug.com/tests/content/commandLine/cdFrame.html"
tautologe
  • 1,781
  • 2
  • 15
  • 14
  • thank you. i used to be able to cd to the frame and now I can't i thought i forgot the syntax but this actually explains it as in facebook canvas apps using an iframe, the iframe is indeed cross domain. I will follow the issue and get an update when it is fixed. – Kalendae Feb 23 '11 at 18:52
  • installed firefox 4 beta and 1.7 firebug and it is working now. thanks! – Kalendae Feb 23 '11 at 19:09
  • how would you cd into a frame inside a frame that have the same name attributes? – Rod Mar 20 '15 at 18:12
14

In Chrome there is a dropdown at the bottom top* of the javascript console that lets you switch to a different frame to execute javascript in. Works cross-domain too!

*Updated 2/10/14: In more recent versions of Chrome, this dropdown has been moved from the bottom to the top of the console.

Muhd
  • 24,305
  • 22
  • 61
  • 78
0

Elements can be accessed as follows: window.frames[x].document.getElementById("elementID"); where x would be the frame index and elementID is the element you are pointing to.

mpora
  • 1,411
  • 5
  • 24
  • 65
0

I guess the wiki was not updated back when this question was asked, but now it has nice examples: https://getfirebug.com/wiki/index.php/Cd

Basically, what you were missing to get the window from the iframe element was ".contentWindow"

user2451227
  • 463
  • 5
  • 9