Using the Profiler Tool to analyze the performance of your code

This content refers to an older version of F12 developer tools. Please visit our latest F12 tools documentation.

The F12 tools provide a built-in script profiler that enables you to analyze the performance of JavaScript code running in Windows Internet Explorer 9. This topic explains the features of this tool and how you can use it to check the performance of your scripts.

Profiling your script

To get started, open the page you want to profile in Internet Explorer 9. In Internet Explorer 9, press F12 to open F12 tools, and then click the Profiler tab.

The profiler lets you start and stop profiling and offers several views or reports of functions, the number of times they were run, and the time each took to run.

When you first click the Profiler tab, the grid is empty. Click the Start profiling button, and then run the code that you want profiled in the browser. If you want to start from the initial load of the webpage, click Refresh to run the code on the page. Click Stop profiling when you want to stop collecting data and view the results. To profile just a section of code, click Start profiling, run just that section in the browser (such as a function called from a button click), and then click Stop profiling.

Viewing profile reports

Reports from the profiler tool are automatically generated when you click Stop profiling. Each profiler session is a discrete report, so you can run a profile any number of times, such as for multiple sections of script, or modify values, and profile the same section again. Only the most current profiler report is displayed by default, but you can click the Current report drop-down list to see others.

Reports can be viewed two ways, either in functions or as call tree views. Functions view shows all the functions in the order in which they were run. The Call tree view shows the hierarchy of the functions, so you can see parent and child relationships easier.

Profile data types

The profiler returns up to 12 columns of data from your profile. In the report, you can right-click the top of the columns and add or remove columns. The following table shows the available data.

Inclusive and exclusive times can give some indication of problems in the code. Inclusive time provides the total time of the function, and any functions called or called by its children. Exclusive time shows only the time actually spent inside that specific function. It is possible to have a very high inclusive time on a function, but the exclusive time is minimal. For example:

function bar() {
// do some work for a 250 milliseconds
}

function foo() {
// do some work for 200 milliseconds and then call bar()
bar();
}

function main() {
//do some work for 50 milliseconds then call foo()
foo();
}

In this example, the function "main()" is called, which works for 50 milliseconds, then calls "foo()", which takes 200 milliseconds, and then calls "bar()", which works for 250 milliseconds before it is done. The following chart shows the values that inclusive and exclusive times might show.

Inclusive time for each function is the time that the function takes to run, plus all the time the functions that follow it (children) take to run. Exclusive time is only the current function's time. The "bar()" function, as the last one in the chain, shows the same time for both.

Search and sort reports

You can search for specific functions in your reports with the F12 toolsSearch box in the upper-right corner of the tool. Type all or part of a name into the Search box and click the search button or press Enter. All instances of the keyword are highlighted, and the report scrolls to the first occurrence. You can navigate between the matches by pressing Enter or Shift + Enter, or click the Next or Previous result buttons.

When you search in the Call tree view, all parent functions above the functions that match are expanded.

Click the header of any visible column to sort by that data. You can toggle between ascending and descending by clicking the heading again. You can also right-click the data area in the Profiler tab, click Sort by, and then choose the column you want.

When you sort in the Call tree report view, only the values at the top level functions are sorted. The child functions stay in their hierarchy order.

Copying and saving reports

You can copy all or some of the information in the profiler reports by selecting the rows and pressing Ctrl+C or right-click and click Copy. To select all rows, press Ctrl + A, and then press Ctrl+C.

To export directly to a comma-delimited (.csv) file, click the Export icon (next to Start profiling button). The export function saves all rows, including the headings, while copy and paste only includes the selected rows, with no headings.

Related topics

How to use F12 Developer Tools to Debug your Webpages