Andreas Grabner About the Author

Andreas Grabner has been helping companies improve their application performance for 15+ years. He is a regular contributor within Web Performance and DevOps communities and a prolific speaker at user groups and conferences around the world. Reach him at @grabnerandi

dynaTrace Ajax Edition 3.0 Beta supports Firefox and Internet Explorer

dynaTrace is happy to announce that The Best Web 2.0 Diagnostics Tool now supports Internet Explorer and Firefox and is available for free download on the dynaTrace Ajax Website.

dynaTrace Ajax Editon 3.0 Public Beta now supports Firefox and Internet Explorer

dynaTrace Ajax Editon 3.0 Public Beta now supports Firefox and Internet Explorer

For feedback please use the dynaTrace Ajax Edition 3.0 Public Beta Forum.

The final release will follow in a couple of weeks and will be announced ahead of time on the dynaTrace Website. In this blog I want to show you 4 main Use Cases that will help Developers, Testers and Test Automation Engineers with the challenging aspects of Web 2.0 across different browsers:

  • Deep Tracing of Browser Activities (JavaScript, Rendering, Network, AJAX, DOM) in IE and FF
  • Share Data with my colleagues or 3rd party providers
  • Compare Performance Behavior between IE and FF
  • Automate Performance Analysis by integrating dynaTrace with Selenium, WebDriver, Watir, QTP, Silk, …

 

Use Case 1: Deep Trace in Firefox and Internet Explorer

Let’s walk through a simple tracing scenario with dynaTrace Ajax. Especially for new users to dynaTrace these steps will be like a Quick Start Guide.

Step 1: Install dynaTrace Ajax Edition

That’s easy – just execute the Windows Installer you downloaded. The Installer installs 3 components on your machine

  • dynaTrace Ajax Edition Client -> that’s the one we are starting through the Start Menu
  • a Firefox Add-On
  • an Internet Explorer Add-On

ATTENTION: It is not recommended to install dynaTrace Ajax Edition 3.0 side-by-side with an older version – so please uninstall any current version first. Existing recorded sessions will still be available for diagnosis – no data is lost :-)

When you launch dynaTrace Ajax Edition you will see a dialog that prompts you for your dynaTrace Community Account credentials in order to access Live Performance Data that you can later use to compare against your own web site performance.

Provide your dynaTrace User Credentials to get access to live performance data from top Alexa Web Sites

Provide your dynaTrace User Credentials to get access to live performance data from top Alexa Web Sites

If you want to know more about how and where this becomes handy check out Live Performance Benchmark Data.

Step 2: Start Tracing a Web Application

dynaTrace will capture browser activity through the installed Add-Ons. Capturing can be started from the dynaTrace Ajax Edition by letting dynaTrace open a new browser for you. The other option is that you manually open a browser and use the dynaTrace Toolbar in Internet Explorer or the dynaTrace Status Bar Extension in Firefox to connect the browser to the dynaTrace Ajax Edition. We will start tracing from within the dynaTrace Ajax Edition.

Existing users will notice a different toolbar. As we now support two browsers you can instruct dynaTrace to either start Internet Explorer or Firefox.

Start Tracing by clicking on the IE or FF logo

Start Tracing by clicking on the IE or FF logo

Let’s click on Firefox as we want to test the new Firefox capabilities. dynaTrace will prompt you to enter a URL and a name for a new Run Configuration. I am going to trace news.yahoo.com and name the configuration Yahoo News.

Run Configurations are persistet and allow us to test the same site again without re-entering the URL

Run Configurations are persistent and allow us to test the same site again without re-entering the URL

After clicking Run dynaTrace will launch the browser, activate the dynaTrace Add-On in the Browser and will start recording all browser activity including Network Downloads, JavaScript Execution, DOM Manipulations and XHR Calls. Rendering activity will also be recorded but in the Beta Build is only available for Internet Explorer.

How can you tell that activities are actively recorded? In Firefox you will see a dynaTrace logo and the text Connected in the Status Bar. In Internet Explorer you will see the dynaTrace Toolbar with the status Connected:

dynaTrace Add-Ons indicate whether the browser is connected to dynaTrace Ajax Edition

dynaTrace Add-Ons indicate whether the browser is connected to dynaTrace Ajax Edition

Now it’s time to record some activity. On the Yahoo News Page I start entering “dynaTrace” in the search field and then hit the enter key.

Interacting with the website will trigger JavaScript code that dynaTrace will automatically capture

Interacting with the website will trigger JavaScript code that dynaTrace will automatically capture

dynaTrace will record all activity that happens while I interact with the page. When I see the search result page I consider this test to be done. I could go on but for this quick Tutorial we have enough data to explore.

I close the browser and go back to dynaTrace Ajax Edition.

Step 3: Analyze the Data

dynaTrace has recorded all browser activities and stored it for me in a dynaTrace session. When we look at the dynaTrace Ajax Edition client we will see a new Session named Yahoo News (that’s the name I used when defining the start URL). We can now analyze different aspects of the captured data:

Activities in the browser were automatically stored and are ready for analysis

Activities in the browser were automatically stored and are ready for analysis

The best way to start is to have a look at the Performance Report. You can either double click on the Session Name or double click on Performance Report. In both cases it will open the dynaTrace Performance Report giving us a detailed analysis of all different Web Performance aspects.

Click through the captured URLs and the Analysis Tabs to learn more about how to optimize Page Load Time

Click through the captured URLs and the Analysis Tabs to learn more about how to optimize Page Load Time

As you can see, dynaTrace calculates Ranks for different performance dimensions and shows us how Yahoo News compares to e.g.: Alexa 1000 pages when it comes to Caching, Network Roundtrips, Server Side or JavaScript Performance. For a more detailed description on the Performance Report and the individual tabs I recommend watching the dynaTrace Ajax Edition Walkthrough Video. The Performance Report also contains links to articles on our Community Portal that explain what actually gets analyzed by the Performance Report and how these Ranks are calculated.

Attention: One current limitation for Firefox is that we do not yet get rendering times. Therefore the First Impression Time does not yet get calculated correctly!

In this blog I want to discuss two tabs that are really interesting. The first one is the TimeLine. It shows me all activities I did on a particular URL. Let’s have a look at the main Yahoo News page:

The TimeLine shows me what the browser had to do to download the page and when I interacted with it

The TimeLine shows me what the browser had to do to download the page and when I interacted with it

Next to the Network Roundtrips I also see JavaScript Execution and certain events (bottom line) such as the onLoad Event, Mouse or Keyboard events (when I entered dynaTrace). I see a big red block of JavaScript. Moving the mouse over tells me which JavaScript file was executed here after it was downloaded. A double-click on it brings me to the full JavaScript trace.

The Power of dynaTrace. A full JavaScript trace including calls into DOM, method arguments, return values and execution times

The Power of dynaTrace. A full JavaScript trace including calls into DOM, method arguments, return values and execution times

Navigating through the Tree allows me to find why this JavaScript file took almost one second to execute. Not only do I see the Trace, I also get to see the actual JavaScript code in a pretty print version (bottom right).

Let’s go back to the Performance Report as there is another interesting tab I want to show you. It is the JavaScript/AJAX Tab:

This tab shows me the JavaScript Hotspots on that URL with back traces that help me to figure out who called these slow running methods or event handlers

This tab shows me the JavaScript Hotspots on that URL with back traces that help me to figure out who called these slow running methods or event handlers

This tab focuses on identifying problematic JavaScript methods and handlers. Here I can see that Yahoo makes Element Lookups by CSS Classname. Instead of using a JavaScript library that leverages the native features of the browser it uses a rather inefficient JavaScript implementation. This explains why a simple element lookup takes up to 200 milliseconds.

We could go on by exploring the other tabs but I again refer to the dynaTrace Ajax Edition Walkthrough Video.

Also make sure to check into our dynaTrace Ajax Edition 3.0 Public Beta Forum. It is a Beta – so – there are still some limitations to the tool.

Use Case 2: Share captured Data

One thing I really like about dynaTrace Ajax Edition is not only can I analyze data recorded on my local machine – once I have a stored session I can export it and share it with others. This can become very handy in the following situations

  • You are a tester and have found a problem in the app you are testing. Send the session to your developer and he can analyze the problem as it happened on your machine
  • You are a developer and found a problem with a framework component from a 3rd party provider. Send the session to the 3rd party framework company for them to analyze the problem in your app
  • You have a user that complains about problems on his machine that you can’t reproduce locally. Ask her/him to record the actions with dynaTrace and then analyze the problem on your local machine

Sharing is easy. Sessions can be exported/imported through the toolbar

Export and Import Sessions through the dynaTrace Ajax Edition Toolbar

Export and Import Sessions through the dynaTrace Ajax Edition Toolbar

Use Case 3: Compare Behavior between Firefox and Internet Explorer

As we have already recorded a simple scenario on Firefox let’s do the same for Internet Explorer. Follow the same steps as before but instead of tracing Firefox we trace Internet Explorer. To make it easier for us we can just launch the same Run Configuration for Yahoo News for Internet Explorer through the toolbar:

Reuse existing launch configuration for both IE and FF

Reuse existing launch configuration for both IE and FF

When we are done recording the same sequence of pages we can look at the captured data in the Performance Report. We can compare side-by-side what the results are for Firefox and Internet Explorer:

Compare performance results across browsers and identify differences

Compare performance results across browsers and identify differences

 

Rather than analyzing the differences manually, it is much better to automate it somewhat. dynaTrace Ajax Edition allows you to Copy/Paste any tabular data. If we, for instance, want to see the differences in Network Requests for the Yahoo News Main Page we can drill into the Network View for both stored sessions.

Drilling to the Network Requests will show me the Requests for only this page that I want to compare

Drilling to the Network Requests will show me the Requests for only this page that I want to compare

So I end up having two Network Views open that show me all Network Requests for the Yahoo News Page in Internet Explorer and Firefox. We select all entries (Ctrl-A) and then Copy (Ctrl-C) and Paste (Ctrl-V) it to a tool such as MS Excel. With some “Excel magic” you can figure out where the differences between Internet Explorer and Firefox are.

Use Case 4: Automate Performance Analysis

We have already blogged about how to use dynaTrace Ajax in a Continuous Integration environment by integrating it with your Selenium, Watir, Silk, QTP or WebDriver scripts. The idea is that – whenever you have a functional test that actively drives a browser instance you can add dynaTrace Ajax into the mix and let dynaTrace record the browser activity driven by the test tool.

dynaTrace Ajax captures browser activity driven by your functional testing tool

dynaTrace Ajax captures browser activity driven by your functional testing tool

The great news with dynaTrace Ajax Edition 3.0 is that this can now be used for both Internet Explorer and Firefox allowing you to automate performance analysis across browsers without having to modify your tests scripts. If you are interested in automation please check out the following posts:

Consolidated Environment Variables

In order to automate dynaTrace Ajax Edition we use windows environment variables to enable/disable that Browser Add-Ons. With dynaTrace Ajax Edition 3.0 we made a slight change to the environment variables. For both Internet Explorer and Firefox they start with DT_AE_. A detailed description on these environment variables can be found in the dynaTrace Ajax Automation Forum.

It is free! So, what do we want in return?

We want your feedback on our dynaTrace Ajax Edition 3.0 Public Beta Forum. We also want you to blog and tweet about it to spread the word. Let us know if you do so – and now enjoy working with dynaTrace Ajax Edition 3.0 Public Beta.


Comments

  1. If you are looking for how to get rendering #s from Firefox these two APIs should be useful:
    https://developer.mozilla.org/en/DOM/window.mozPaintCount
    https://developer.mozilla.org/en/Gecko-Specific_DOM_Events#MozAfterPaint

    • Hi James
      Thanks for pointing that out. We have already implemented capturing these events including the paint region. This will be part of the final realease of dynaTrace AJAX Edition 3
      Any other suggestions? Ideas? Wishes?

  2. dynaTrace will recorded all browser activities when i record/pause the session but if i need something specific to my module.
    Suppose I log-in to the application then navigate to some url. I dont want this session to get recorded.

    Now I double click on 1 folder for download .I just want this session to get recorded.How can i do that?

Comments

*


9 + = fifteen