Deep tracing in Internet Explorer

After reading Steve Soijders' post about the free tool - dynaTrace Ajax , I was wildly intrigued. It offers a complete trace analysis in IE6-8, including JavaScript, drawing, 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 before in any tool or browser.

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


')
Above as a result of a recorded session, log in to Gmail, read mail and log out. All aspects of the session are saved: network requests, JavaScript sources, all DOM events, etc.



This is the full timeline of 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 more detailed.



Above, you see a clear picture of the exact interactions that have occurred. The phenomenal number of inline JavaScript executions completed by calculating the page layout is the same as loading data over the network. You can hover your mouse over certain blocks in the timeline for more detailed information (for example: whether JavaScript was launched as a result of a timer or which Ajax request was triggered, which resulted in network traffic). In addition, you can click on the block for a deeper dive into the trace.



Digging deeper into the execution of XMLHttpRequest on the page, we will see the complete execution trace stack, and here at this place, the tool becomes really interesting. This tool is capable of tracing JavaScript through its native XMLHttpRequest, through network requests, and returning back to the event that fired after the request was completed. This is amazing. This is the first tool that allows you to trace through native methods, provide a picture of who caused the event, as well as the complete ramification 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 the window is closed, all code is saved for further analysis).

But the biggest question when traveling around tracing is usually - where does the speed decrease work? And at this moment HotPath comes into play.



It all looks like a normal execution counter that you see in the debugging tools of Internet Explorer or Firebug, with the exception of one detail — this form displays the JavaScript parsing time and the drawing 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 be drawn.



You can view not only the execution time 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 problematic places in scripts.



Another way to see a complete 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, note that IE is still considered the dominant platform for developers.

I was writing off with the developers of dynaTrace and asked them to add a memory profiler and implement support for more browsers.