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.
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:
- https://getfirebug.com/tests/content/commandLine/cd.html
(same domain, works for me: FF 3.6.13, FB 1.6.2)
- http://getfirebug.com/tests/issues/3893/issue3893.html
(cross domain, fails)
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"
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.
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"
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.