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>. PhpStorm creates a separate tab with the name of the log file.
Based on the collected profiling data, PhpStorm 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
Context Menu
The context menu is available only from items in the Top Calls, Bottom-up, and Top-down panes.
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 PhpStorm displays its Total, Total%, and Self% metrics. For each function call, PhpStorm 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 PhpStorm displays its execution time in ticks and the Of Parent metrics. For each function call, PhpStorm 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 PhpStorm displays its Total, Total%, Self, and Self% metrics. For each function call, PhpStorm 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:
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. PhpStorm 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, PhpStorm selects the corresponding call in the bottom area
and drags the slider to it automatically:
PhpStorm 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: PhpStorm switches to the selected pane and moves the focus to the call in question.
- 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. PhpStorm 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.