firebug: how to cd to an iframe
FacebookIframeFirebugFacebook Problem Overview
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 https://stackoverflow.com/questions/2495313/firebug-and-jquery-selectors-in-an-iframe to no avail.
Facebook Solutions
Solution 1 - Facebook
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"
Solution 2 - Facebook
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.
Solution 3 - Facebook
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.
Solution 4 - Facebook
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"