Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Profiles Tab
The Profiles tab is used to give you visibility into how your JavaScript code is performing (see Figure 13).
){kind=small}
Figure 13 JavaScript performance profiler
Initially, the Profiles tab is empty. In order to create a performance profile, you need to click the "record" button in the toolbar ribbon at the bottom of the pane; it's the fourth icon, the black circle.
The record button will turn red after you click on it, indicating that it's in "record" mode. Once in record mode, all JavaScript activity will be profiled. This is useful for determining where performance problems are originating from in your JavaScript code.
When you have finished exercising the JavaScript code that you want to profile, click the record button again to stop recording. The record button will turn black again, and a new profile will appear in the Profiles pane.
Clicking on the profile information that was collected will show all the JavaScript methods that were executed while you were recording, along with various performance metrics.
The profile information is displayed in five columns. The first column, "Self", is the amount of time that was spent executing code within the method. The second column, "Total" is the cumulative amount of time spent executing that method and all methods called by the method.
The total time also depends on how many times the method was called. The "Average" column represents the average execution time for all the times this method was invoked.
The "Calls" column is a count of how many times the method was invoked. The last column, "Function", is the name of the method, if it has one, and if available, the name of the JavaScript file and the line of code where the method was invoked.
Beneath the performance metrics, additional buttons are added to the toolbar ribbon. The first is a drop-down that lets you switch from "Tree" to "Heavy" view. The heavy view lets you see which functions are taking up the most execution time and the calling paths to those functions.
The tree view gives you an overall picture of the JavaScript calling structure, starting at the top of each call stack for each method that was invoked.
The second icon, the percent symbol, lets you switch from viewing the performance metrics as a relative percentage to seeing them in terms of their actual execution time.
The "eye" icon lets you "zoom" in so you only see the metrics for a single function. The "X" icon lets you exclude the performance metrics for a specific function from the profile.