PhpStorm 2017.3 Help

Keymap:

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 V8 Profiling - Analyze V8 Profiling Log 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".

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 PhpStorm 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 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. The diagram in the Overview pane shows distribution of self time for calls with the Self% metrics above 1%.

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:

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. 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:

Navigate in Top Calls

Navigate in Bottom-up

Navigate in Top-down

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:

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. 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.