Perfetto UI

Perfetto UI enables you to view and analyze traces in the browser. It supports several different tracing formats, including the perfetto proto trace format and the legacy json trace format.

New Features

What features have come to the UI recently? See below.

Tabs V2

We've refreshed how the tabs in the details pane at the bottom of the timeline work.

NOTE: Temporarily you can use the previous tab implementation via setting the Tabs V2 feature flag to 'Disabled'. Please file a bug with feedback on Tabs V2.

The update aimed to address a few major UX concerns with the existing implementation while also making tabs extensible via plugins.

UX concerns in TabsV1:

Tabs V2 demo

TabsV2 is extensible via the plugin mechanism. Plugins can add new permanent and ephemeral tabs as well as new selection panels.

Custom visualisation with Vega and Vega-lite

The Viz page available in the sidebar after you load the trace allows for custom visualisation using Vega or Vega-lite.

Type a Vega specification into the bottom editor pane and the visualisation will update in real time in the top pane. You can put arbitrary trace_processor SQL queries where the URL would go in a normal Vega visualisation.

Viz page

Try the following visualisation with the Android example trace:

{ "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data": {"url": "select cpu, dur from sched where utid != 0"}, "mark": "bar", "encoding": { "x": { "field": "cpu" }, "y": {"aggregate": "sum", "field": "dur"} } }

Command Palette

Tired of remembering the location of buttons in the Perfetto UI? Commands to the rescue!

Command

Commands are:

Access the command palette via Ctrl-Shift-P or by typing > in the search bar.

Changing the time format and offset

Time

The displayed timestamp format can be changed globally, cycling between seconds, raw nanoseconds and a new "timecode" format. We also have a new TO_TIMECODE() function in Trace Processor to print timestamps in the timecode format.

UI Tips and Tricks

Pivot Tables

To use pivot tables in the Perfetto UI, you will need to enable the "Pivot tables" feature flag in the "Flags" tab under "Support" in the Sidebar. You can pop up a pivot table over the entire trace when clicking "p" on your keyboard. The "Edit" button opens a pop up window to add/remove and reorder columns and change the default sorting of aggregations.

Pivot table editor

Clicking on "Query" generates a table with the selected columns. Table cells with the expand icon can be expanded to show the next column values. The "name (stack)" column displays top level slices that can be expanded to show their descendants down to the last child.

Pivot table

Area selection pops up a pre-filled pivot table restricted over the selected timestamps and track ids.

Pivot table area selection

Disabling metrics

Some metrics execute at trace load time to annotate the trace with additional tracks and events. You can stop these metrics from running by disabling them in the 'Flags' page:

Disable metrics from running at trace load time