xref: /aosp_15_r20/external/perfetto/docs/quickstart/chrome-tracing.md (revision 6dbdd20afdafa5e3ca9b8809fa73465d530080dc)
1*6dbdd20aSAndroid Build Coastguard Worker# Quickstart: Record traces on Chrome desktop
2*6dbdd20aSAndroid Build Coastguard Worker
3*6dbdd20aSAndroid Build Coastguard WorkerPerfetto can capture traces right from the Chrome browser on desktop. It captures traces across all open tabs.
4*6dbdd20aSAndroid Build Coastguard Worker
5*6dbdd20aSAndroid Build Coastguard Worker> To record traces from Chrome on Android, follow the [instructions for recording Android system traces](/docs/quickstart/android-tracing.md) and enable the Chrome probe.
6*6dbdd20aSAndroid Build Coastguard Worker
7*6dbdd20aSAndroid Build Coastguard Worker>> If you are using [user build of Android](https://source.android.com/docs/setup/build/building#lunch), you'll have to enable integration with system Perfetto by switching chrome://flags#enable-perfetto-system-tracing to "Enabled" and restarting Chrome.
8*6dbdd20aSAndroid Build Coastguard Worker
9*6dbdd20aSAndroid Build Coastguard Worker## Recording a trace
10*6dbdd20aSAndroid Build Coastguard Worker
11*6dbdd20aSAndroid Build Coastguard Worker1. Navigate to [ui.perfetto.dev](https://ui.perfetto.dev/) and select **"Record new trace"** from the left menu.
12*6dbdd20aSAndroid Build Coastguard Worker    > If you are using the Perfetto UI for the first time, you have to install the [Perfetto UI Chrome extension](https://chrome.google.com/webstore/detail/perfetto-ui/lfmkphfpdbjijhpomgecfikhfohaoine).
13*6dbdd20aSAndroid Build Coastguard Worker2. Select **"Chrome"** as **"Target platform"** in the drop-down.
14*6dbdd20aSAndroid Build Coastguard Worker
15*6dbdd20aSAndroid Build Coastguard Worker   On Chrome OS, you can also record system traces by selecting the "Chrome OS (system trace)" target platform.
16*6dbdd20aSAndroid Build Coastguard Worker3. Сonfigure settings in **"Recording settings"**.
17*6dbdd20aSAndroid Build Coastguard Worker
18*6dbdd20aSAndroid Build Coastguard Worker   ![Record page of the Perfetto UI](/docs/images/record-trace-chrome.png)
19*6dbdd20aSAndroid Build Coastguard Worker
20*6dbdd20aSAndroid Build Coastguard Worker    >Note: "Long trace" mode is not yet available for Chrome desktop.
21*6dbdd20aSAndroid Build Coastguard Worker
22*6dbdd20aSAndroid Build Coastguard Worker    > Tips:
23*6dbdd20aSAndroid Build Coastguard Worker    >
24*6dbdd20aSAndroid Build Coastguard Worker    > - To save the current config settings and apply them later go to the "Saved configs" menu.
25*6dbdd20aSAndroid Build Coastguard Worker    > - To share your config settings go to the "Recording command" menu.
26*6dbdd20aSAndroid Build Coastguard Worker>
27*6dbdd20aSAndroid Build Coastguard Worker4. Select which categories (or top level tags) in the **Chrome** probe section that you want.
28*6dbdd20aSAndroid Build Coastguard Worker
29*6dbdd20aSAndroid Build Coastguard Worker   > Note: The tags at the top enable groups of related categories, but there is currently no direct way to see them when targeting Chrome. However, you can switch the target to "Android" and then see the categories in the generated config in the "Recording Command" section if you are curious.
30*6dbdd20aSAndroid Build Coastguard Worker
31*6dbdd20aSAndroid Build Coastguard Worker   The list at the bottom can be used to select additional categories.
32*6dbdd20aSAndroid Build Coastguard Worker
33*6dbdd20aSAndroid Build Coastguard Worker   ![Tracing categories of Chrome](/docs/images/tracing-categories-chrome.png)
34*6dbdd20aSAndroid Build Coastguard Worker5. Now you can start the trace recording. Press the **"Start recording"** button when ready.
35*6dbdd20aSAndroid Build Coastguard Worker6. Proceed to use the browser to capture the action you want to trace, and wait for the trace to finish. You can also stop the trace manually by pressing the "Stop" button.
36*6dbdd20aSAndroid Build Coastguard Worker
37*6dbdd20aSAndroid Build Coastguard Worker   **Do not close the perfetto UI tab!** Otherwise, tracing will stop and the trace data will be lost.
38*6dbdd20aSAndroid Build Coastguard Worker
39*6dbdd20aSAndroid Build Coastguard Worker7. Once the trace is ready, you can find and analyze it in the left menu **"Current Trace"**.
40*6dbdd20aSAndroid Build Coastguard Worker
41*6dbdd20aSAndroid Build Coastguard Worker    > **IMPORTANT**: If you want to share a trace, keep in mind that it will contain the URL and title of all open tabs, URLs of subresources used by each tab, extension IDs, hardware identifying details, and other similar information that you may not want to make public.
42