![\"\"](\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2016\/02\/ajax-view-2.png\")
Ajax View enables developer to see and control the behaviors of their web applications on user’s desktops.<\/p>\nAjax View enables developer to see and control the behaviors of their web applications on user’s desktops.<\/p>\n
<\/p>\n
<\/p>\n
April 29, 2009:<\/strong> The technology in Ajax View is now available as a Power Tool: Microsoft Visual Studio AJAX Profiling Extensions (opens in new tab)<\/span><\/a>. This power tool includes a server-side extension to IIS to add profiling code to your JavaScript web applications, and a Visual Studio add-in to investigate this data with Visual Studio’s Performance Explorer.<\/p>\n\t The Ajax View approach is to insert a server-side proxy (or web server plugin) in-between the web server machines and the end-user’s browser. This proxy captures the web application’s JavaScript code as it is being sent to a browser and rewrites the code to insert extra instrumentation code. The injected instrumentation code runs with the rest of the web application inside the end-user’s browser and can capture performance, call graph, application state and user interaction information, providing visibility directly into the last hop of the user’s experience.<\/p>\n Because Ajax View is rewriting web application code dynamically each time a user visits the web site, it can:<\/p>\n By Emre K\u0131c\u0131man and Benjamin LivshitsDo you know what your users are experiencing when they visit your AJAX application?\u00a0 Is your JavaScript code running fast, slow, or generating errors in your users’ browsers?<\/p>\n The Ajax View project at Microsoft Research aims to give developers easy visibility into their web apps\u2019 performance and behavior as the apps run in end-users\u2019 browsers.\u00a0\u00a0 Ajax View uses a server-side proxy to rewrite JavaScript “on-the-fly” and automatically inject instrumentation code into a web application.\u00a0 This instrumentation provides end-to-end visibility into app performance, behavior and critical state.\u00a0 “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.<\/p>\n 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.\u00a0 \u00a0First, you will startup Ajax View as a client-side proxy.\u00a0 Then, you will browse a web application while Ajax View monitors its function-level performance, and see the resulting profile information.<\/p>\n Research Prototype Warning:<\/b>\u00a0 Ajax View is an early preview of work we have been doing at Microsoft Research.\u00a0 Our prototype is often rough around the edges, not as fast as it could be, not scalable, etc.<\/p>\n First, if you haven\u2019t already, download and install the Ajax View prototype.<\/p>\n Then, let\u2019s start the Ajax View client-side proxy:<\/p>\n If you are running Windows Vista, you should see a dialog asking you to allow Ajax View to run with administrator privileges. Click allow.<\/p>\n Open either Internet Explorer or Firefox.<\/p>\n 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.<\/p>\n Note:<\/strong> Both browsers\u2019 proxy settings have already been preset to use the Ajax View proxy<\/p>\n Note:<\/strong>\u00a0The Ajax View proxy does not support HTTPS \/ SSL connections.\u00a0 If you want to browse HTTPS sites while Ajax View is enabled, click through to the Advanced settings, uncheck the option to \u201cuse the same proxy server for all protocols,\u201d and enter Ajax View only for the HTTP protocol.\u00a0 Leave the Secure, FTP\u00a0 and SOCKS protocol proxies blank or set to your previous proxy.<\/p>\n Press CTRL+T to open a new tab.<\/p>\n This URL will be intercepted by the Ajax View proxy.\u00a0 Instead of sending this request to \u201cfakeurl.com\u201d, Ajax View will return its own statistics page.<\/p>\n Ajax View works by using a proxy to intercept and rewrite the JavaScript code of a web application and automatically inject instrumentation code.\u00a0 The rewriting is controlled by one or more instrumentation policies, embedded within the proxy.<\/p>\n 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.\u00a0 This rewriting policy takes a script that looks like:<\/p>\n And turns it into a script that looks like:<\/p>\n Our prototype actually does a little more rewriting than is shown here.\u00a0 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.<\/p>\n 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.\u00a0 The proxy is responsible for analyzing the results and generating the per-function performance statistics.<\/p>\n 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.<\/p>\n 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 infrastructure.<\/p>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/li>\n\t\t Ajax View enables developer to see and control the behaviors of their web applications on user’s desktops. News April 29, 2009: The technology in Ajax View is now available as a Power Tool: Microsoft Visual Studio AJAX Profiling Extensions. This power tool includes a server-side extension to IIS to add profiling code to […]<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"msr-url-field":"","msr-podcast-episode":"","msrModifiedDate":"","msrModifiedDateEnabled":false,"ep_exclude_from_search":false,"_classifai_error":"","footnotes":""},"research-area":[13560,13547],"msr-locale":[268875],"msr-impact-theme":[],"msr-pillar":[],"class_list":["post-169440","msr-project","type-msr-project","status-publish","hentry","msr-research-area-programming-languages-software-engineering","msr-research-area-systems-and-networking","msr-locale-en_us","msr-archive-status-active"],"msr_project_start":"2007-04-30","related-publications":[154717,154718],"related-downloads":[],"related-videos":[],"related-groups":[],"related-events":[],"related-opportunities":[],"related-posts":[],"related-articles":[],"tab-content":[],"slides":[],"related-researchers":[{"type":"user_nicename","display_name":"Emre Kiciman","user_id":31739,"people_section":"Group 1","alias":"emrek"}],"msr_research_lab":[199565],"msr_impact_theme":[],"_links":{"self":[{"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-project\/169440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-project"}],"about":[{"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/types\/msr-project"}],"version-history":[{"count":2,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-project\/169440\/revisions"}],"predecessor-version":[{"id":604179,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-project\/169440\/revisions\/604179"}],"wp:attachment":[{"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/media?parent=169440"}],"wp:term":[{"taxonomy":"msr-research-area","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/research-area?post=169440"},{"taxonomy":"msr-locale","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-locale?post=169440"},{"taxonomy":"msr-impact-theme","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-impact-theme?post=169440"},{"taxonomy":"msr-pillar","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-pillar?post=169440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\n
\n\t\t\t\n\t\t\t\tRemotely Monitoring Client-Side Web App Performance and Behavior<\/h1>\n
Performance Profiling Walk-Through<\/h2>\n
\n
\n
![\"\"](\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2016\/02\/ajaxview-image001.jpg\")
<\/span><\/span><\/li>\n\n
![\"\"](\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2016\/02\/ajaxview-image002.jpg\")
<\/span><\/span><\/li>\n![\"\"](\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2016\/02\/ajaxview-image003.png\")
<\/span><\/span><\/li>\n![\"\"](\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2016\/02\/ajaxview-image004.png\")
<\/span><\/span><\/li>\n![\"\"](\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2016\/02\/ajaxview-image005.png\")
<\/span><\/span><\/p>\n\n
![\"\"](\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2016\/02\/ajaxview-image006.png\")
<\/span><\/span><\/li>\n![\"\"](\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2016\/02\/ajaxview-image007.jpg\")
<\/span><\/span><\/li>\n\n
\n
![\"\"](\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2016\/02\/ajaxview-image008.jpg\")
<\/span><\/span><\/li>\n![\"\"](\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2016\/02\/ajaxview-image009.jpg\")
<\/span><\/span><\/li>\n![\"\"](\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2016\/02\/ajaxview-image010.jpg\")
<\/span><\/span><\/li>\n![\"\"](\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2016\/02\/ajaxview-image011.jpg\")
<\/span><\/span><\/li>\n![\"\"](\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2016\/02\/ajaxview-image012.jpg\")
<\/span><\/span><\/li>\nHow It Works<\/h2>\n
![\"ajax_code1\"](\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2007\/04\/ajax_code1.png\")
<\/p>\n![\"ajax_code2\"](\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2007\/04\/ajax_code2.png\")
<\/p>\nConclusion<\/h2>\n
\n\t\t\t\n\t\t\t\t\n
\n\t\t\t\n\t\t\t\t\n