Free Tool for Deep AJAX Analysis

In web development, knowledge is power.  Without a decent AJAX diagnostic tool, it's hard to know what's slowing down your site.  Even basic performance monitoring tools don't give developers all the information they need.  AJAX frameworks are pushing more logic into the browser and becoming more important for running Web 2.0 technologies.  For this reason, a sophisticated AJAX diagnostic tool is necessary for finding the bottlenecks in high-performance websites.  DZone reviewed a new, free tool from dynaTrace with Eric Senunas, dynaTrace's Senior Director of Marketing and Communications.  In this exclusive interview, DZone
learned about the deep analysis features of dynaTrace AJAX Edition.

AJAX Edition provides full tracing analysis for Internet Explorer 6, 7, and 8.  The tool functions as a Browser Helper Object in C++.  This gives it the ability to see deep into frameworks where over 90% of browser execution time is spent.   According to Eric Senunas, JavaScript-based profilers cannot go as deep as AJAX Edition.  

After launching the application you can browse the Run Configurations where you have the option to turn argument capturing of JavaScript & DOM method calls on or off.  When you click “Start Tracing”, AJAX Edition launches a separate instance of IE to run your test scenario.  All aspects of the session (network requests, JavaScript source, all DOM events, etc.) are recorded and saved.

Here are the graphical results of a session running Gmail in Internet Explorer 8:



The data tells you the page loading time, network request time, amount of resources used, types of resources used, JavaScript execution time, and rendering time.  AJAX edition puts these readings on a timeline where you can select segments that tell you more information.  Senunas says, "You can trace and analyze AJAX calls through their entire round trip (DOM event - JavaScript - HTTP request - JavaScript callback)." 

To see the AJAX calls, right-click in the timeline and select "Drill Down to Timeframe".  This brings up the PurePath View showing all activites in the timeframe.  The data shows the complete ramifications of a test session in both CPU usage and execution time.  Time can be sorted by event triggers and JavaScript APIs.  There is also an HTTP waterfall chart.

The Network View can be accessed by clicking on the Network node in the Cockpit.  It shows all Network Requests that happened during the whole browser session or on individual pages.  Every request is color-coded.  Requests that took the most time to download are highlighted in red.  The Time Chart column sorts the network requests into a sequence showing when each one was requested by the browser.

The Hot Spot View , accessed through the Cockpit, looks like a typical execution count view.  What makes it unique is the inclusion of JavaScript parsing and layout rendering times.  Senunas says no other tool provides this information.  The Hot Spot View shows the execution time for the built-in DOM methods.  When filtering by DOM or regular JavaScript, you can determine where the what methods are slow and execution time is going.

Here is the Hot Spot View:

   

AJAX Edition supports automatic diagnostic collection.  The tool can integrate with web testing frameworks like Selenium, Watir, and WebAii.  AJAX Edition also supports code level insight into almost any third-party AJAX framework (JQuery, GWT, Yahoo! UI Library, etc.).  

According to Senunas, "Many performance problems in AJAX applications have their root-cause on the server-side."  By integrating AJAX Edition with PurePath for AJAX, you can trace every single user action and recieve detailed metrics down to the JavaScript function level from the server-side to the browser.

Senunas says dynaTrace is "planning/considering support for browsers other than IE, such as Firefox, soon.  We’re also planning/considering support for Mobile WebKit."  He said other possible features include, AJAX Memory diagnostics (Browser, DOM), de-obfuscation of JavaScript code, timeline visualization correlation of JavaScript errors and exceptions, and automated regression reporting.