Search code examples
iframeinternet-explorer-8consoleie-developer-tools

Switching browser developer tools console context to particular iframe


Chrome has the easiest way of doing this by simply selecting a frame from a drop down. Firefox provides the cd(frame) function which is less usable but does the job as long as you're willing to discover which frame is which...

But how do we do the same in Internet Explorer Developer Tools?

And specifically in IE8 if this has changed in later versions... The usual way would of course be to write these kind of lines to access particular frame's context:

frames[n].window.somePublicFunction();

But that seems so cumbersome especially when you have nested iframes. Finding the correct frame is simply a pain.

Any suggestions?


Solution

  • If there is Javascript already in that frame, then add a breakpoint to that script. When IE hits the breakpoint, the console will run in the context of the frame which contains the code on which the breakpoint was set.

    To set a breakpoint:

    • Load your page
    • Open the developer tools, go to "Script"
    • Find the line where you want to add the break-point and single-click to the left of the line number
    • Press "start debugging" (this will reload your page - if this causes problems you can try the solution at How do you create breakpoints in IE Developer Tools for code that runs while loading?)
    • Exercise the code that contains the breakpoint
    • When the breakpoint is hit, use the console
    • (You can run the command window.location.href to see what the current window/frame context is by the URL of the page that is loaded in it.)