Question

I am trying to debug a large and complex webapp that makes heavy use of DIVs, AJAX, dynamic HTML and server-side code to do its job.

Under normal operation we do not have problems. However, when we put the webapp into an IFRAME, certain functions trigger a crash in IE7 that renders the browser inoperable (all CPU used).

What tools exist to help track down what could be happening? Loading the IE process into the debugger gives me all sorts of fascinating info about the registers, but I think the issue is in javascript.

We have tracked down one problem with the app already that involved incorrect reparenting of an element (something attached itself to window. instead of document.)

I wrote a test IFRAME page that dumps the innerHTML of the iframe into a textarea, so it can be compared during various states, but that only shows me static attributes, I can’t tell what sort of javascript events are associated with elements or determine if a handler is firing out of turn.

IE8, Firefox, Chrome etc do not have the same behaviour.

Ideally I’d like something that would let me snapshot the DOM (or the javascript VM?) during a known good state, then “just before it happens” so we can figure out what’s added / removed / missing / different. What is out there?

Update: I’m now trying to use the IE Developer Toolbar to track it down.

Update 2: The IE7 crash occurs following this AJAX code:

function Sys$UI$Control$get_element() {
    /// <value domElement="true" locid="P:J#Sys.UI.Control.element"></value>
    if (arguments.length !== 0) throw Error.parameterCount();
    return this._element;
}

The return this._element; line is the last thing that happens before I lose IE.

Answer 1

1. IE Developer’s Toolbar. Download it here (IEDevToolBarSetup.msi).
2. For JavaScript debugging refer this blog.