firebug: how to cd to an iframe

FacebookIframeFirebug

Facebook 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:

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"

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionKalendaeView Question on Stackoverflow
Solution 1 - FacebooktautologeView Answer on Stackoverflow
Solution 2 - FacebookMuhdView Answer on Stackoverflow
Solution 3 - FacebookmporaView Answer on Stackoverflow
Solution 4 - Facebookuser2451227View Answer on Stackoverflow