Monday, August 25th, 2008

Razor Profiler: Check out your Ajax code

Category: Performance

Razor Profiler is a web-based Ajax profiling tool to help web developers understand and analyze the runtime behavior of their JavaScript code in a cross-browser environment. Razor Profiler can be access either online as a service; or be downloaded to run locally, and was created by Coach Wei who has done a lot of work for Nexaweb and Apache.

Razor Profiler Features

Razor Profiler automates JavaScript profiling:

  • Automation: no application code change required. Razor Profiler automatically collects all the necessary data and presents them to web developers for analysis.
  • Runs on any browser: web developers can profile any JavaScript application on any browser. There is nothing to install on the client side.
  • Rich lexical analysis: Razor Profiler presents rich lexcial information about the application, such as file information (number, response status, size, mimetype, percentage, etc), tokens (size, file, percent, count), and functions (size, file, name…), etc;
  • Profile scenario recording: Razor Profile enables web developers to selectively record the scenarios that they are interested in. Only recorded scenarios will be used in analysis.
  • Call stack analysis: for each recorded scenario, Razor Profiler presents all the call stacks in the order of their occurence. For each call stacks, web developers can drill into it to find out the duration of the stack, all the function calls of this stack and the duration of each call.
  • Function analysis: For each JavaScript function in the application, Razor Profile presents the number of times it has been invoked, the duration of each invocation, and the call stacks that invoked this function.
  • Data visualization with graphing and charting: Razor Profiler presents top call stacks, top function calls of each stack, top recorded scenarios, etc. using visual charts and graphs to help web developers better understand the runtime behavior of their application. For example, each call stack is visualized as an intuitive Gantt chart.

How Does Razor Profiler Work?

Razor Profiler composes of a server component that runs inside a standard Java EE Servlet engine, and a JavaScript-based client component that runs inside any browser. Once you have Razor server started, you can profile your JavaScript application by entering the start URL of your application into Razor Profiler and run through your test scenarios. Razor Profiler will automatically record data and visualize them for your analysis. There is no client side installation, browser configuration change or application code change required. In order to achieve this, Razor Profiler goes through five different phases:

  • Application retrieval: Once a web developer enters the application start URL into Razor Profiler, Razor Profiler client component (“the client”) will send this URL to Razor Profiler server component (“the server”). The server performs the actually retrieval of this URL. After additional server processing (such as lexical analysis and code injection, see below), the retrieved content is sent to the client side to be displayed in a new browser window. For the developer point of view, the application is launched and running in this new browser window.
    In this process, Razor Profiler Server is acting like a “proxy server”. But it is not really a “proxy server” and there is no need for developers to re-configure their browser proxy settings.
  • Lexical analysis: Once the server retrieves the application URL, it performs lexical analysis of the returned content by identifying and analyzing JavaScript files, functions, and tokens,etc. The result is sent to the client for display.
  • Code injection: Upon lexical analysis of JavaScript code, the server injects “probe” code into the application’s JavaScript sources before returning them to the client. These injected “probes” enable automatic collection of application runtime data, and saves developers from doing so manually.
  • Runtime data capture: Once the application’s JavaScript code is running on the client side and as developers run through desired profile scenarios, the injected “probes” automcally collect all the necessary data to Razor Profiler Client.
  • Data analysis: When the developer finishes recording scenarios and starts data analysis, Razor Profiler client performs analysis of all the collected data and presents the results.

Posted by Dion Almaer at 9:07 am

3.6 rating from 19 votes


Comments feed TrackBack URI

Wow, this is a sweet little tool. I could never imagine that amount of information being pulled out of vanilla JS code with no code-hacking required. . Will be trying to work some of this into my future developments. Only bug I found so far is in their little included poll on the site.

Comment by tj111 — August 25, 2008

Okay, it looks impressive… but compared to Firebug, this is completely useless (or close to it)… Its too heavy to run while using your script, the report feedback is too messy, the ease of use is so-so – only good thing is that it runs in Explorer, in which i lack a good profiler (havent searched too much)

I guess ill stick with Firefox + Firebug 1.5 until FF3.1 arrives

Comment by Montago — August 25, 2008

I like the part where it’s throwing an error in Safari and Firefox and doesn’t finish running the profiler.

Comment by PaulArmstrong — August 25, 2008

@PaulArmstrong: what is the problem on safari and firefox you are referring to? Is the “error message” you are referring to related to the application not meeting Razor Profiler’s requirement, or is it something else?

Comment by cwei — August 25, 2008

Looks really nice – and functions very well in my initial couple of tests. Looking forward to continuing when I have more time. Good Job.

Comment by danh2000 — August 26, 2008

@cwei: it was related to Dojo. After about five minutes and refreshing a few times, the pages loaded up fine.

Comment by PaulArmstrong — August 26, 2008

Leave a comment

You must be logged in to post a comment.