1# Perfetto UI
2
3[Perfetto UI](https://ui.perfetto.dev) enables you to view and analyze traces in
4the browser. It supports several different tracing formats, including the
5perfetto proto trace format and the legacy json trace format.
6
7## UI Tips and Tricks
8
9### Debug Slices
10
11Sometimes you may want to insert some fake slices into the timeline to help
12with your understanding of the data. You can do so by inserting rows into a
13magic `debug_slices` table.
14
15`debug_slices` table has five columns:
16
17* `id` (integer) [optional] If present, Perfetto UI will use it as slice id to
18  open the details panel when you click on the slices.
19* `name` (string) [optional] The displayed slice title.
20* `ts` (integer) [required] Start of the slice, in nanoseconds.
21* `dur` (integer) [required] Duration of the slice, in nanoseconds. Determines
22  slice width.
23* `depth` (integer) [optional] The row at which the slice is drawn. Depth 0 is
24  the first row.
25
26You can open the debug track by going to the "Sample queries" menu on the
27left, and clicking "Show Debug Track". A debug slice track will become pinned to
28the top and will initially be empty. After you insert slices in the
29`debug_slices` table, you can click the reload button on the track to refresh
30the information shown in that track.
31
32Here is a simple example with random slices to illustrate the use:
33
34```sql
35CREATE VIEW rand_slices AS SELECT * FROM SLICE
36  ORDER BY RANDOM() LIMIT 2000;
37
38INSERT INTO debug_slices(id, name, ts, dur, depth)
39  SELECT id, name, ts, dur, depth FROM RAND_SLICES;
40```
41
42After you click the reload button, you should see the slices in the debug track.
43
44![Example of debug slices](/docs/images/debug-slices-random.png)
45
46Once you're done, you can click the X button to hide the track, and you can
47clear the `debug_slices` table (`DELETE FROM debug_slices`) to clear the track.
48
49A more interesting example is seeing RAIL modes in chrome traces:
50
51```sql
52SELECT RUN_METRIC('chrome/rail_modes.sql');
53
54-- Depth 0 is the unified RAIL Mode
55INSERT INTO debug_slices
56  SELECT NULL, rail_mode, ts, dur, 0 FROM combined_overall_rail_slices;
57
58-- Depth 2+ are for each Renderer process with depth 1 left blank
59INSERT INTO debug_slices
60  SELECT NULL, short_name, ts, dur, depth + 1 FROM rail_mode_slices,
61    (SELECT track_id, row_number() OVER () AS depth FROM
62      (SELECT DISTINCT track_id FROM rail_mode_slices)) depth_map,
63    rail_modes
64  WHERE depth_map.track_id = rail_mode_slices.track_id
65    AND rail_mode=rail_modes.mode;
66```
67
68This produces a visualization like this:
69
70![RAIL modes in Debug Track](/docs/images/rail-mode-debug-slices.png)
71
72Note: There is no equivalent debug counters feature yet, but the feature request
73is tracked on [b/168886909](http://b/168886909)).
74