You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
2.7 KiB
74 lines
2.7 KiB
# Perfetto UI
|
|
|
|
[Perfetto UI](https://ui.perfetto.dev) 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.
|
|
|
|
## UI Tips and Tricks
|
|
|
|
### Debug Slices
|
|
|
|
Sometimes you may want to insert some fake slices into the timeline to help
|
|
with your understanding of the data. You can do so by inserting rows into a
|
|
magic `debug_slices` table.
|
|
|
|
`debug_slices` table has five columns:
|
|
|
|
* `id` (integer) [optional] If present, Perfetto UI will use it as slice id to
|
|
open the details panel when you click on the slices.
|
|
* `name` (string) [optional] The displayed slice title.
|
|
* `ts` (integer) [required] Start of the slice, in nanoseconds.
|
|
* `dur` (integer) [required] Duration of the slice, in nanoseconds. Determines
|
|
slice width.
|
|
* `depth` (integer) [optional] The row at which the slice is drawn. Depth 0 is
|
|
the first row.
|
|
|
|
You can open the debug track by going to the "Sample queries" menu on the
|
|
left, and clicking "Show Debug Track". A debug slice track will become pinned to
|
|
the top and will initially be empty. After you insert slices in the
|
|
`debug_slices` table, you can click the reload button on the track to refresh
|
|
the information shown in that track.
|
|
|
|
Here is a simple example with random slices to illustrate the use:
|
|
|
|
```sql
|
|
CREATE VIEW rand_slices AS SELECT * FROM SLICE
|
|
ORDER BY RANDOM() LIMIT 2000;
|
|
|
|
INSERT INTO debug_slices(id, name, ts, dur, depth)
|
|
SELECT id, name, ts, dur, depth FROM RAND_SLICES;
|
|
```
|
|
|
|
After you click the reload button, you should see the slices in the debug track.
|
|
|
|

|
|
|
|
Once you're done, you can click the X button to hide the track, and you can
|
|
clear the `debug_slices` table (`DELETE FROM debug_slices`) to clear the track.
|
|
|
|
A more interesting example is seeing RAIL modes in chrome traces:
|
|
|
|
```sql
|
|
SELECT RUN_METRIC('chrome/rail_modes.sql');
|
|
|
|
-- Depth 0 is the unified RAIL Mode
|
|
INSERT INTO debug_slices
|
|
SELECT NULL, rail_mode, ts, dur, 0 FROM combined_overall_rail_slices;
|
|
|
|
-- Depth 2+ are for each Renderer process with depth 1 left blank
|
|
INSERT INTO debug_slices
|
|
SELECT NULL, short_name, ts, dur, depth + 1 FROM rail_mode_slices,
|
|
(SELECT track_id, row_number() OVER () AS depth FROM
|
|
(SELECT DISTINCT track_id FROM rail_mode_slices)) depth_map,
|
|
rail_modes
|
|
WHERE depth_map.track_id = rail_mode_slices.track_id
|
|
AND rail_mode=rail_modes.mode;
|
|
```
|
|
|
|
This produces a visualization like this:
|
|
|
|

|
|
|
|
Note: There is no equivalent debug counters feature yet, but the feature request
|
|
is tracked on [b/168886909](http://b/168886909)).
|