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:
- Context Menu
- Top Calls Pane
- Bottom-up Pane
- Top-down Pane
- Flame Chart
- Selecting a Fragment in the Timeline
- Synchronization in the Flame Chart
Top Calls PaneThe 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. The diagram in the Overview pane shows distribution of self time for calls with the Self% metrics above 1%.
Bottom-up PaneThe 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 PaneThe 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.
- 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:
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:
- 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:
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.