UPDATE Dec 2014: A lot has happened since we released AJAX Edition in 2009. Please check out where the journey is going by reading the Blog “Dynatrace Ajax Edition 4.5 – Closing The Last Chapter, But The Story Continues!”
The dynaTrace AJAX Edition has been out there as an Alpha for a couple of weeks. It gave you the first impression what was to come. All the feedback we have received (like that from Steve Souders, and all that has come in via the contact form and the online forum) in that time made it possible to improve the tool from its early versions to its first “official” release version.
In this blog I’ll discuss why dynaTrace Labs built the AJAX Edition, which problems it solves and how to use it in an example with Google maps.
Why dynaTrace AJAX Edition – and why for free?
Now – why is it free? It’s free because we want to help developers to testers with the challenges that Web 2.0 brings with it. We also want to bring awareness of the dynaTrace APM Solution which in combination with the AJAX Edition brings end-to-end, browser to server transaction-centric Application Performance Management. Read the full explanation on Why are we giving away free software?
Lets analyze Google Maps – a Step-by-Step Guide from Installation to Analysis
I’ve exported the dynaTrace AJAX Session file that I used for this blog entry. Feel free to download it and use it to follow my individual analysis steps based on the data that I’ve collected. Extract the zip file and import this session file (.dtas) via the Import button in the Toolbar and skip the first 3 steps.
Step 1: Download and Install dynaTrace AJAX Edition
In the beginning there was – correct – downloading and installation
Open your browser and go to dynaTrace AJAX Edition Web Site and click on Download to download the latest version. You have to register an account which not only allows you to download the tool but also gives you access to the community pages where you can find additional useful information, ask questions and even contribute features to a wish-list.
Step 2: Launch and Explore dynaTrace AJAX Edition
Check your Start Menu for Programs->dynaTrace->dynaTrace AJAX Edition and launch it from there. The client will come up with the Cockpit and the Welcome Screen. Before we start tracing Google Maps lets explore some of the data collection options we have:
dynaTrace uses so-called Run Configurations that allow you to browse directly to the website you want to analyze without entering the URL in the browser every time. You can manage your Run Configurations (adding new ones, modifying or deleting existing ones) through the drop-down menu of the top left toolbar button. Selecting Manage Run Configuration allows you to pre-configure http://www.google.com as shown in the next screenshot:
As you can see from the screenshot above it’s also possible to let the AJAX Edition clear the browser cache before we start tracing the web site. This can be very useful when you want to test how your web site performs with an empty browser cache. Another important thing to know is the Preference Dialog that you can launch from the right most toolbar button.
Step 3: Start Tracing Google Maps
Let’s get going now. You can either select the Google run configuration from the toolbar, click on “Start Tracing” in the Welcome screen, or simply press F4 (shortcut). What happens next is that the dynaTrace AJAX Edition launches a new instance of Internet Explorer. Depending on whether you chose to clear the browser cache, it is doing that now (that may take a couple of seconds) before it browses to http://www.google.com. You can tell whether the dynaTrace AJAX Edition is actively tracing the browser by the changed application icon of IE – you should see a small dynaTrace icon on the top left corner of your window as well as a dynaTrace AJAX Edition toolbar telling you that you are connected:
If you do not see this happening please check out the General Usage Question section on the Community Forum for troubleshooting tips or contact us via the contact form or community forum. Here is the scenario that I want you to go through now:
- slowly type dynaTrace in the search field – you will see Google’s recommendation box coming up for every letter you type
- hit enter or click on Google Search when you finished typing
- after the search result is displayed click on Maps link in the top of the page to switch to Google Maps
- you will see multiple results of dynaTrace locations. Click dynaTrace Software in 95 Hayden Avenue, Lexington, MA so that the map is displaying this address
This was my test scenario. Before we close the browser you can take a quick peek to the dynaTrace AJAX Edition and you will see a node under Browsers indicating that it is currently collection information from an IE instance. We could analyze the data while we are still running the browser or we can just close it and analyze the data that we have captured. Let’s do that – lets close the browser and switch back to dynaTrace AJAX Edition.
Step 4: The Summary View – High Level Analysis
The recorded events in the browser have automatically been stored in a session that allows us to analyze the activities that have been captured without having an active browser. In the cockpit you can either double click the session or expand the session node and double click the Summary node. Both actions will bring up a Summary View which gives us a high level analysis of all activities in the recorded session:
The Summary View shows information for all visited URLs in the recorded session. Clicking on the individual visited URLs in the top table updates the charts and timeline visualization in the bottom to only show the data of the selected URL. In this overview we can see:
- How long it took to load the page: Page Load Time [ms] column showing the time it took till the browser triggered the onLoad event
- How much time was spent with Network Requests: Network [ms] column and also a detailed breakdown of the network activities in DNS, Connect, Server and Transfer time. As network content is downloaded in parallel this time shows the total combined time of all network requests.
- How many and what type of resources have been downloaded vs. how many have been retrieved from the browser cache
- How much time was spent with Rendering. The Browser has to calculate layouts and render the page to the screen. Depending on your HTML, your style sheets and your dynamic manipulations of the DOM the browser can spend quite some time in recalculating layouts and redrawing. The Rendering [ms] column shows how much time on that page was actually spent in that activity
In our example the following things attract my attention:
- The page load time on maps.google.com was 6.5 seconds: This is the time it took the browser to download the initial html and all referenced objects before it could trigger the onLoad event
- I had 12 seconds in network time on that page. When I look at the Network Pie-Chart for that page I can actually see that more than 50% of the time was spent in transferring the content (could mean that I am on a slow network), 42% are spent on the server (that’s how long it took the server to respond with the first byte of the response) and 8% were consumed by establishing the physical connection to the web servers.
- The Timeline also shows me that 2 XmlHttpRequests have been sent by that page. This is indicated by an icon in the event row at the time that these requests happened. The next chapter will discuss this in more detail
Step 5: The Timeline View – A Closer look at the page lifecycle events
The Timeline View can be opened for the complete session by double clicking on the Timeline node in the Cockpit. or you can open it for a single URL via the context menu in the Summary View. Let’s do that for the maps.google.com page:
We can make the following observations on that view:
- Network requests are downloaded in parallel from 6 different domains
- It takes about 6.5 seconds till the browser triggers the onLoad event (indicated by the IE icon)
- The download of main.js from maps.gstatic.com takes 2.41 seconds (hover over with the mouse and you get these details)
- The events row also shows us our mouse click events, XmlHttpRequest events and the onUnload event
Let’s zoom in to the timeframe of the first mouse click till the XmlHttpRequest. In my case this is the timeframe from second 11 to 12. Zoom in by pressing the left mouse button at the start time and drag your mouse to the end time. When you release your mouse the view will be zoomed in that timeframe like shown in the following screenshot:
Here are my observations on that view:
- We see that a timer is used that took about 740ms to trigger the timer handler – check the setTimeout method call
- A dynamic script tag is created and added to the head DOM element instructing the browser to download this script file after this execution is done
The PurePath view offers several different ways to analyze the data. You can filter and search for items in each table and tree by simply typing the text you want to find or filter. Via the context menu and toolbar buttons additional filters can be specified to control the information that should be displayed.
Step 7: The Network View – Analyze the “chattiness”
The Network View shows all Network Requests that happened either in the whole browser session or on individual pages. Open the view via a double click on the Network node in the Cockpit on your left or with a Drill Down from the Summary View on a particular URL. In our example I go back to the Summary View and Drill into the Network of the maps.google.com site:
This view color-codes every request and highlights those in red that took the longest to download. By default this view is sorted by the Time Chart column which then shows the sequence of network requests as they were requested by the browser.
For every individual network request we see whether the resource actually came from the Browser’s cache (Cached column), Type of Request (Network or AJAX), HTTP Status, Mime Type, Size, detailed download timings broken down in DNS, Connect, Server Time, Network Time and Wait Time. On the bottom the HTTP Request and Response Headers as well as the actual response content is displayed. The interesting observation on this page is the waiting time for those objects retrieved from mt0.google.com and mt1.google.com. Every browser has a limitation on the physical network connections to a single domain.
In my case (IE7 on WinXP) it is 2 connections per domain. 20 png images are downloaded from these two domains. Due to the connection limitation only 2 images can be downloaded in parallel from each domain. The other images basically have “to wait” for a connection to become available. That explains the “waterfall” effect of these images and the increasing wait time. We would not see this effect as strong as it is here when working on different browser with different numbers of connections. Solutions to this particular problem are the use of Domain Sharding or CSS Spriting.
If you have dynaTrace APM running on your Application Servers you can even drill down to the Server-side PurePath showing you the actual Java or .NET Code that is executed on the server side to fulfil this AJAX Request. For a quick 2 minute video overview of dynaTrace APM and the PurePath technology check out the 2 minutes explainer.
Step 8: The Hotspot View – Where are my Top Low Hanging Performance Fruits
Step 9: Automate Data Collection
Besides of manually collecting performance data with the dynaTrace AJAX Edition it is possible to automate the collection in scenarios where a testing tool is driving the browser instead of a human being. When running your test scripts with tools like Selenium, Watir, WebAii, … dynaTrace AJAX Edition can automatically collect the performance information for every browser session that is driven by these test tools. Check out the 5 Steps to Automate Performance Analysis Blog that shows AJAX Edition’s automation capabilities with Watir.
Step 10: Share Data with your peers
Collecting information and having it available for offline analysis are abilities of dynaTrace AJAX Edition that we have just walked through. If you identify a problem in somebody else’s code or if you want to share your findings with your colleagues, you need an easy way to share your collected data. This can be done by exporting your sessions to a session file. This can either be done via the context menu on a session in your cockpit or via the toolbar. The same is true for importing the file. Either use the context menu on the Sessions node in the Cockpit or use the Import Toolbar button:
You can now download my session that I used in this blog. Extract the zip file and import the .dtas file on your local machine and follow my analysis steps.
Conclusion and Feedback Request
The dynaTrace AJAX Edition is a great tool for analyzing and troubleshooting Web 2.0 Applications in Internet Explorer 6, 7 and 8. The first official version has been strongly driven by the community that worked with the previous alpha versions. We encourage everyone out there to actively participate in driving this product forward by providing feedback through the Community Pages and report problems through the built-in report feature accessible in the toolbar:
These three toolbar buttons allow you to share the product with a friend, give us feedback and report a problem. Many of our current clients use the AJAX Edition to identify and solve problems in their browser frontend components and we’ve gotten some great feedback from them so far. These clients also use the integration to the dynaTrace Continuous APM Solution which gives them full end-to-end visibility from the browser into their backend. Thanks for following me all the way down through this rather lengthy Step-By-Step Guide. Feedback on this blog, on the tool and on your own experience with the dynaTrace AJAX Edition as well as other tools that are out there are highly appreciated and welcomed.