Introducing the IE8 Developer Tools JScript Profiler

Hello! I am Sameer Chabungbam, one of the Program Managers on the JScript Team.

The recently released Beta 2 of Internet Explorer 8 contains a lot of improvements which are aimed at making developing web applications on Internet Explorer 8 easier and more productive. One of these improvements is the JScript Profiler in Developer Tools, which provides critical JScript related performance data to a web developer that helps identify and fix performance related issues. We believe the Profiler is going to be a very helpful tool to fine tune the performance of the scripts in a web application. It is lightweight, easy-to-use and provides the following features:

[*]Provides performance data for JScript functions in two views:

[*]Functions View – a flat listing of all the functions [*]Call Tree view – a hierarchical listing of the functions based on the call flow

[*]Supports exporting the data to a file [*]Provides an inferred name for anonymous functions [*]Profiles built-in JScript functions [*]Supports multiple profile reports [*]Supports profiling across page navigation and refreshes

This post gives an overview of the Profiler and highlights some of its features. We hope you will try it out and give us your feedback.

Using the Profiler

Launch the Developer Tools in Internet Explorer 8 either by pressing F12 or selecting ‘Developer Tools’ from the Tools dropdown on the command bar. Switch to the Profiler Tab, and you can see the new Script Profiler. Click the ‘Start Profiling’ button to begin a new profiling session.

Now, you can perform the scenario you want to profile, and JScript performance data will be collected by the profiler automatically in the background. Note that the text of the button changes to ‘Stop Profiling’ to indicate profiling is going on. To stop profiling, click the ‘Stop Profiling’ button. The profiler will process the collected performance data and display a profile report for the session just concluded.

Viewing the Profile Report

The report presents the data in two views which can be selected from the Current View dropdown:

[*]Functions view: This is a flat listing of all the functions with the corresponding performance data. [*]Call Tree view: This is a hierarchical listing of the functions based on the call execution sequence. Each node corresponds to a function and lists all the functions it called and the performance data for those calls. The Call Tree view is useful in finding the call stack trace that has the greatest performance impact in your script.

In both views, each row corresponds to a JScript function, with the various performance data in different columns. The view can be customized to show different columns. Right-click a column header and select ‘Add / Remove Columns’ to select the columns you want to view.

You can sort on any of the columns by clicking the corresponding column headers or by selecting the column from the ‘Sort By’ menu items in the right-click context menu.

The available columns are:

[*]Function: The name of the function [*]Count: The total number of calls made to this function [*]Inclusive Time (ms): The time spent in this function and its children in milliseconds [*]Inclusive Time %: The percentage of time spent in this function and its children [*]Exclusive Time (ms): The time spent in this function in milliseconds [*]Exclusive Time %: The percentage of time spent in this function [*]Avg Time (ms): The average time spent in this function and its children in milliseconds [*]Max Time (ms): The maximum time spent in this function and its children in milliseconds [*]Min Time (ms): The minimum time spent in this function and its children in milliseconds [*]URL: The URL of the source file where this function is defined [*]Line Number: The line number of the beginning of this function in the source file

Double-click a row to view the source code definition of the corresponding function in the Script Tab. This is available only if the performance data collects the URL information and the source file is currently loaded in the Script Tab. You need to enable script debugging in Internet Explorer for the profiler to collect the URL information. [Note: You can enable script debugging from the Tools > Internet Options > Advanced Tab.]

Exporting Data

Sometimes, we may want to analyze the profile report further, create graphs, or share it with another application. To facilitate this, the Profiler allows the data to be exported to a file in a Comma Separated Values (CSV) format. The data can then be opened in other applications (like Microsoft® Office Excel®) and can be shared. Simply click the ‘Export Data’ button and give a filename to save the profile data of the current report to a file. Note that presently only the Functions view is exported and not the Call Tree view.

Inferred name

In Javascript, the function name is optional. You can define a function (called anonymous function) with no name. In practice, this is quite common. Many real-world Javascript functions are defined in the context of an object literal, and more often than not, these are anonymous. This presents a problem in the profile report. When we have multiple anonymous entries, the only way to differentiate the anonymous functions is to look up the actual source definition of the functions from the URL and Line number information. This is far from being convenient and makes the profile report hard to read and confusing.

To overcome this problem, the JScript profiler tries to infer a name for each anonymous function based on the context where the function is defined. Let me illustrate how this works with the following example:

var Shape = {

Area : function () { . . . } // anonymous function 1

}

Foo = function () { . . . } // anonymous function 2

When we profile this code, these functions will show up in the report as “Area†and “Foo†respectively, instead of both being listed as anonymous functions. This way, you can quickly identify which function is being referred to in the profile report without having to open the source code. The heuristic logic used to infer the name is simple enough to limit the performance overhead. In some cases, this might fail to infer a name, in which case, the function is listed with the special name “[Anonymous]â€.

We hope the profiler comes handy when improving Javascript performance of your web applications in Internet Explorer. We look forward to your feedback.

Thanks!

Sameer Chabungbam

Program Manager

More...