I have the following scenario:
- Main page
- Nested page
- Common JS file (which is included in both pages)
The nested page is subsequently loaded into an iframe of the main page. Both pages invoke a function from the common JS file on page load.
Live demo:
http://www.ecmazing.com/misc/pause-execution/mainpage.html
http://www.ecmazing.com/misc/pause-execution/nestedpage.html
http://www.ecmazing.com/misc/pause-execution/common.js
The common JS file contains one global function which paints the H1 element red. I would like to pause execution at the beginning of that function, so that the execution is paused while the H1 element is still black.
How to do it on the main page:
This is trivial. Simply load the page, open the dev tools of the browser, select the common.js file, and set a break-point at the first line of the function. Now, reload the page. The break-point will persist the reload, and execution will be paused.
How to do it on the nested page:
Now, in Chrome and Firefox (Firebug), the break-point that was set above (for the main page), will also work for the nested page. Both pages use the same JS file, and setting a break point in that file will apply for both pages automatically. Unfortunately, this rule does not apply to IE.
And even worse, even if I set the break point subsequently, and then reload the iframe only, the break-point will not persist.
So, I don’t know how to pause execution for the nested page in IE. Can it be done? (I’m dealing with this by manually setting a debugger; at the beginning of the function, but I would love to be able to set the break-point via the dev tools in IE, if that’s possible.)
The closest I can come to a solution is to set a breakpoint within the loadIFrame() function on the main page and then ‘step in’ until the nested page’s Common.js file is loaded. In a more complicated example you would then be able to set your breakpoints within the new Common.js file and they would work correctly until the next time the iframe is loaded, when they would all be lost again.