Deep Tracing in Internet Explorer

After reading Steve Sawders' post on the free tool, dynaTrace Ajax , I was wildly intrigued. It offers full trace analysis in IE6-8, including JavaScript, rendering, and network traffic. I tested several sites, but I got a more interesting result with heavy JavaScript in Gmail in IE8.

I usually do not write about performance analysis tools, frankly, most of them absolutely do not provide any interesting information. dynaTrace provides some information that I have never seen so far in any tool or browser.

dynaTrace Ajax works by sticking as a low-level tool to Internet Explorer at startup, intercepting any activity you can imagine. I noticed a slight slowness while the browser was running in trace mode. However, all trace information is recorded and stored for further analysis.



The above resulted in a recorded session, authorization in Gmail, reading mail and ending the session. All aspects of the session are saved: network requests, JavaScript sources, all DOM events, etc. This is the full timeline for a single Gmail inbox. All network traffic, JavaScript parsing and execution, browser events, CPU load. You can select a segment from the timeline and view in more detail.









Above, you see a clear picture of the exact interactions that have occurred. The phenomenal number of inline JavaScript executions completed by computing the page layout is the same as downloading data over the network. You can hover your mouse over specific blocks in the timeline to get more detailed information (for example: whether JavaScript was launched as a result of a timer or which Ajax request was called that caused network traffic). In addition, you can click on the block for deeper “immersion” in the trace.



Digging deeper into the XMLHttpRequest execution on the page, we will see a complete stack of execution trace, and here at this point, the tool becomes really interesting. This tool is able to trace JavaScript through the native XMLHttpRequest, through network requests and return back to the event that fired after the request was completed. This is amazing. This is the first tool that allows tracing through native methods, I provide a picture of who triggered the event, as well as the complete branching of everything that happens, including CPU usage and runtime. Note that you can click on any piece of code in the trace stack view and see its position in the source code (and this works even after closing the window, all code is saved for further analysis).





But the biggest question when traveling on traces is usually - where does the speed decrease work? And at that moment HotPath enters the game. It all looks like a normal run counter, which you see in the debugging tools of Internet Explorer or Firebug, with the exception of one detail - this form displays JavaScript parsing time and rendering time. That's cool! No other tool provides information about the time it takes to parse the JavaScript code of your site or how long it will take to draw. You can view not only the runtime of your own JavaScript methods, but also the built-in DOM methods! On the HotSpot form, you can filter by DOM or JavaScript and see which methods are slow.









dynaTrace also provides an additional tool - PurePath, which tries to find out problematic places in scripts. Another way to see the full picture of problem areas in your application. I already use this free tool to test and analyze the performance of my code. I think that until that time, no browser had such a tool for analysis. Plus, keep in mind that IE is still considered the dominant developer platform. I contacted dynaTrace developers and asked them to add a memory profiler and implement support for more browsers.