V8 Profiling Tool Window
The tool window is opened automatically when you stop the Node.js application you are profiling. If the window is already opened and shows the profiling data for another session, a new tab is added. Tabs that were opened automatically are named after the run configurations that control execution of the applications and collecting the profiling data.
If you want to open and analyze some previously saved profiling data, choose on the main menu and select the relevant V8 log file isolate-<session number>. WebStorm creates a separate tab with the name of the log file.
Based on the collected profiling data, WebStorm builds three call trees and displays each of them in a separate pane. Having several call trees provides the possibility to analyze the application execution from two different points of view: on the one hand, which calls were time consuming ("heavy"), and on the other hand, "who called whom".
On this page:
- Toolbar
- Context Menu
- Top Calls Pane
- Bottom-up Pane
- Top-down Pane
- Flame Chart
- Selecting a Fragment in the Timeline
- Synchronization in the Flame Chart
Toolbar
| Item | Tooltip | Description | Available in |
|---|---|---|---|
 | Jump to source | Click this button to navigate to the function definition. | Top Calls Bottom-up Top-down |
 | Filter | Click this button to filter out light calls and have WebStorm display only the calls that indeed cause performance problems. Using the slider, specify the minimum Total% or Parent% value for a call to be displayed and click Done. | Top Calls Bottom-up Top-down |
 | Expand Heavy Traces | When a tab for a profiling session is opened, by default the nodes with heaviest calls are expanded. While exploring the trees, you may like to fold some nodes or expand other ones. Click this button to restore the original tree presentation. | Top Calls Bottom-up Top-down |
  | Expand All/ Collapse All | Click these buttons to expand or collapse all the nodes in the current pane. | Top Calls Bottom-up Top-down |
 | Export to text file/ Export Timeline Chart | Click this button to save the call tree in the current pane to a text file or the current timeline chart to a .png file. Then specify the target file in the dialog box that opens. | All |
 | Help | Click this button to navigate to the Help topic for the tool window. | All |
 | Close | Click this button to close the V8 Profiling tool window. | All |
 | Zoom | Click this button to open the selected fragment of the flame chart in a separate tab and have the selected fragment enlarged to fit the tab width so you can examine the fragment with more details. | Flame Chart |
Context Menu
The context menu is available only from items in the Top Calls, Bottom-up, and Top-down panes.
| Item | Description |
|---|---|
| Copy Call | Choose this option to copy the name of the selected function and the name of the file where it is defined to the Clipboard. |
| Copy | Choose this option to copy the name of the selected function, the name of the file where it is defined, and the measurements data. This may be helpful if you want to compare the measurements for a function from two sessions, for example, after you make some improvements to the code. |
| Compare with Clipboard | Choose this option to compare the selected with the contents of the Clipboard in the Difference Viewer that opens. |
| Expand Node/ Collapse Node | Choose these options to expand or collapse the selected tree node. |
Top Calls Pane
The Top Calls pane shows a list of performed activities sorted in the descending order by the Self metrics. For each activity WebStorm displays its Total, Total%, and Self% metrics. For each function call, WebStorm displays the name of the file, the line, and the column where the function is defined.
Bottom-up Pane
The Bottom-up pane also shows the performed activities sorted in the descending order by the Self metrics. Unlike the Top Calls pane, the Bottom-up pane shows only the activities with the Total% metrics above 2 and the functions that called them. This is helpful if you encounter a heavy function and want to find out where it was called from.For each activity WebStorm displays its execution time in ticks and the Of Parent metrics. For each function call, WebStorm displays the name of the file, the line, and the column where the function is defined.
Top-down Pane
The Top-down pane shows the entire call hierarchy with the functions that are execution entry points at the top. For each activity WebStorm displays its Total, Total%, Self, and Self% metrics. For each function call, WebStorm displays the name of the file, the line, and the column where the function is defined. Some of the functions may have been optimized by V8, see Optimizing for V8 for details.- The functions that have been optimized are marked with an asterisk (
*) before the function name. - The functions that possibly require optimization but still have not been optimized are marked with a tilde (
~) character before the function name. Though optimization may be delayed by the engine or skipped if the code is short-running, a tilde (~) points at a place where the code can be rewritten to achieve better performance.
Flame Chart
Use the multicolor chart in the Flame Chart tab to find where the application paused and explore the calls that provoked these pauses. The chart consists of four areas:
- The upper area shows a timeline with two sliders to limit the beginning and the end of a fragment to investigate.
- The bottom area shows a stack of calls in the form of a multicolor chart. When called for the first time, each function is assigned a random color, whereupon every call of this function within the current session is shown in this color.
- The middle area shows a summary of calls from the Garbage Collector, the engine, the external calls, and the execution itself. The colors reserved for the Garbage Collector, the engine, the external calls, and the execution are listed on top of the area:
- The right-hand pane lists the calls within a selected fragment, for each call the list shows its duration, the name of the called function, and file where the function is defined.
Selecting a Fragment in the Timeline
To explore the processes within a certain period of time, you need to select the fragment in question. You can do it in two ways:
- Use the sliders:
- Click the window between two sliders and drag it to the required fragment:
In either case, the multicolor chart below shows the stack of calls within the selected fragment.
To enlarge the chart, click the selected fragment and then click the Zoom button on the toolbar. WebStorm opens a new tab and shows the selected fragment enlarged to fit the tab width so you can examine the fragment with more details.
Synchronization in the Flame Chart
The bottom and the right-hand areas are synchronized: as you drag the slider in the bottom area through the timeline the focus in the right-hand pane moves to the call that was performed at each moment.
Moreover, if you click a call in the bottom area, the slider moves to it automatically and the focus in the right-hand pane switches to the corresponding function, if necessary the list scrolls automatically. And vice versa, if you click an item in the list, WebStorm selects the corresponding call in the bottom area and drags the slider to it automatically: 
WebStorm supports navigation from the right-hand area to the source code of called functions, to the other panes of the tool window, and to areas in the flame chart with specific metrics.
- To jump to the source code of a called function, select the call in question and choose Jump to Source on the context menu of the selection.
- To switch to another pane, select the call in question, choose Navigate To on the context menu of the selection and then choose the destination:
- Navigate in Top Calls
- Navigate in Bottom-up
- Navigate in Top-down
- To have the flame chart zoomed at the fragments with specific metrics of a call, select the call in question, choose Navigate To on the context menu of the slection, and then choose the metrics:
- Navigate to Longest Time
- Navigate to Typical Time
- Navigate to Longest Self Time
- Navigate to Typical Self Time
You can also navigate to the stacktrace of a call to view and anlyze exceptions. To do that, select the call in question and choose Show As Stacktrace. WebStorm opens the stacktrace in a separate tab, to return to the Flame Chart pane, click V8 CPU Profiling tool window button in the bottom tool window.