Ajax View

Remotely Monitoring Client-side Web App Performance and Behavior

Emre Kıcıman

Benjamin Livshits

Introduction

Do you know what your users are experiencing when they visit your AJAX application? Is your JavaScript code running fast, slow, or generating errors in your users' browsers?

The Ajax View project at Microsoft Research aims to give developers easy visibility into their web apps’ performance and behavior as the apps run in end-users’ browsers. Ajax View uses a server-side proxy to rewrite JavaScript "on-the-fly" and automatically inject instrumentation code into a web application. This instrumentation provides end-to-end visibility into app performance, behavior and critical state. "On-the-fly" rewriting allows Ajax View to serve different instrumentation across users and over time, capturing more detail about app behavior while minimizing per-user performance overhead.

In this lab, you will use an early prototype of Ajax View technology to quickly enable cross-browser performance profiling of web apps, without modifying the original web app code or the client-side browser. First, you will startup Ajax View as a client-side proxy. Then, you will browse a web application while Ajax View monitors its function-level performance, and see the resulting profile information.

Please visit http://research.microsoft.com/projects/ajaxview/ for up-to-date information and the latest version of our Ajax View prototype. Send us feedback at ajaxview@microsoft.com.

Research Prototype Warning: Ajax View is an early preview of work we have been doing at Microsoft Research. Our prototype is often rough around the edges, not as fast as it could be, not scalable, etc.

Contents:

A. Performance Profiling Walk-through

B. How It Works

A. Performance Profiling Walk-Through

First, if you haven’t already, please visit http://research.microsoft.com/projects/ajaxview/ , download and install the Ajax View prototype.

Then, let’s start the Ajax View client-side proxy:

1. Start Ajax View by clicking on the Ajax View Proxy icon in your start menu.

· If you are running Windows Vista, you should see a dialog asking you to allow Ajax View to run with administrator privileges. Click allow.

2. Ajax View is now running as a proxy, ready to intercept and rewrite web applications’ JavaScript code. By default, Ajax View listens for connections on port 8888.

Next, let’s open a web browser and use a web application:

3. Open either Internet Explorer or Firefox.

· Because Ajax View does not require browser plugins or ActiveX controls, it can profile and monitor app behavior as they run in either Internet Explorer or Firefox.

· Note: Both browsers’ proxy settings have already been preset to use the Ajax View proxy

4. Set the browser’s proxy settings to localhost port 8888

· Open the Tools menu, and click on the Internet Options menu item

· Click on the Connections tab in the Internet Options dialog box

· Click on the LAN Settings button in the Connections pane.

· Uncheck “Automatically detect settings”

· Check “Use proxy server for your LAN” and ensure that the address is set to localhost and the port is set to 8888.

i. Advanced note: The Ajax View proxy does not support HTTPS / SSL connections. If you want to browse HTTPS sites while Ajax View is enabled, click through to the Advanced settings, uncheck the option to “use the same proxy server for all protocols,” and enter Ajax View only for the HTTP protocol. Leave the Secure, FTP and SOCKS protocol proxies blank or set to your previous proxy.

5. Browse to http://maps.live.com/

6. Once the page has loaded, search for hotels in las vegas by typing “hotels” in the top search box, and “las vegas, nv” in the address box.

7. Double-click a few times in the middle of the map to zoom into the center of Las Vegas. While you use maps.live.com, Ajax View is monitoring and capturing the applications behavior.

Now, it’s time to look at the information that Ajax View has gathered.

8. Press Ctl-T to open a new tab.

9. Open the web page http://fakeurl.com/?&AJAXVIEWREQUEST=GET=main.html

· This URL will be intercepted by the Ajax View proxy. Instead of sending this request to “fakeurl.com”, Ajax View will return its own statistics page.

10. Click the “JS Performance Statistics” link

11. The right pane is now showing a list of urls that we have visited while running our application, grouped by top-level domain. The first column shows the URL itself, the second column shows the number of JavaScript functions and scripts that are defined within the file, and the third column displays the performance of the slowest function within the file.

12. Let’s click on one of these URLs, the “mapcontrol” file, shown as the link <sc1.local.live.com/mapcontrol.asjx?...>.

13. Now, the right pane is showing a list of all the JavaScript functions defined in this file. The columns of data show performance information for each function.

14. Let’s see what the slowest functions were. Click on the “Mean Time (ms)” column to sort the table by this column.

15. Let’s get more detail about the performance profile of double-clicking to zoom in on the map. Click on the “Details” link next to the “this.Init” function.

Now, we see a list of the functions that are called by the “this.Init” function, sorted by their average performance.

16. Now, try it with your own web application! Just browse to the site and then return to the Ajax View main page to see the statistics.

B. How It Works

Ajax View works by using a proxy to intercept and rewrite the JavaScript code of a web application and automatically inject instrumentation code. The rewriting is controlled by one or more instrumentation policies, embedded within the proxy.

In this demo, you have seen a simple performance profiling policy that adds log statements to the beginning and end of every script block and function definition within the JavaScript code of a web application. This rewriting policy takes a script that looks like:

function HelloWorld( a, b ) {

alert(‘hello world!’);

}

</script>

And turns it into a script that looks like:

LogScriptEnter();

function HelloWorld( a, b ) {

LogFuncEnter(“HelloWorld”);

alert(‘hello world!’);

LogFuncExit(“HelloWorld”));

}

LogScriptExit();

</script>

Our prototype actually does a little more rewriting than is shown here. For example, it inlines the logging functions to reduce performance overhead, rewrites return statements, and keeps track of the line number and character offset of the function to help identify anonymous functions and disambiguate functions with the same name.

Whenever the injected instrumentation logs an event, such as a function enter or exit, the event is timestamped and added to a queue. A timer event handler periodically empties the queue of messages and reports them back to the proxy via an HTTP post request. The proxy is responsible for analyzing the results and generating the per-function performance statistics.

If you are interested in more of the technical details, please see the research papers we have written about Ajax View, available at http://research.microsoft.com/projects/ajaxview/

Conclusion

You have used the Ajax View proxy to gather performance profile information for a web application, without modifying the original web application, and without installing any extra plugins, ActiveX controls or extensions in the web browser.

As Ajax View is currently an early research prototype, we are considering several future directions for the project, including further research into instrumentation policies to help developers debug their application, and the possibilities of integrating this technology into developer tools and/or web server infrastracture.