Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 626
Robert Koritnik Avatar asked Oct 31 '12 09:10

Robert Koritnik


People also ask

How do I access the iframe console?

You can just right-click on the element and select Inspect and DevTools highlights it in the DOM Tree on the Elements panel. In the Console, use the Execution Context Menu to change the context of the Console to the iframe.

How do I inspect an iframe element in Chrome?

We can detect if an element is inside an iframe by inspecting the element with the Chrome Developer Tools. An easier way is to perform a Right Click near the element in your browser and see if View Frame Source option is present in the context dropdown.

How can I change frame in Javascript?

Using switchTo().defaultContent() The switchTo(). defaultContent() method will switch focus to the first frame on the page. In the case of iFrames, the context is switched back to the main (or Parent) document.

How do I select an iframe in Firefox?

To set an iframe as the target for the developer tools: Select the iframe context picker button to launch a popup listing all the iframes in the document (and the main document itself). Note that the button is only displayed if the page includes iframes! Select an entry to make it the target iframe.


2 Answers

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.)
like image 124
Martin Pain Avatar answered Oct 30 '22 17:10

Martin Pain


You can change the context of the JS console in Internet Explorer 11 with the console.cd() method.

Given this iframe:

<iframe src="http://google.com" frameborder="0" id="someIframeID"></iframe>

You pass an unquoted ID or name of the frame to switch the context to that frame. Execute this command in the console.

console.cd(someIframeID);

To switch the context back to the parent, you just call console.cd(); without any arguments.

Reference: http://msdn.microsoft.com/en-us/library/ie/dn255006(v=vs.85).aspx#console_in

like image 30
Bryan Downing Avatar answered Oct 30 '22 17:10

Bryan Downing