UNPKG

chrome-devtools-frontend

Version:

Chrome DevTools UI

devtools.chrome.com

ChromeDevTools/devtools-frontend

29 lines (15 loc) • 1.99 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# Tracing vs Profiling There are a few different concepts that need to be understood to fully understand how the panel gathers data to show in the timeline. ## Tracing and Profiling The performance panel supports gathering and ingesting data from two sources: 1. Chrome tracing, which is consumed as a series of events and represented as JSON. 2. CDP profiling, which uses CDP to gather data and return CPU Profiles. If a user is using DevTools on their website, they are using Chrome tracing. If they are debugging their Node application, they are using CDP. ## Chrome tracing workflow When a user traces a website, we call [`Tracing.start`](https://chromedevtools.github.io/devtools-protocol/tot/Tracing/#method-start) to instruct Chrome to begin tracing. CDP will emit events via the [`Tracing.dataCollected`](https://chromedevtools.github.io/devtools-protocol/tot/Tracing/#event-dataCollected) event. We then call [`Tracing.end`](https://chromedevtools.github.io/devtools-protocol/tot/Tracing/#method-end) to manually stop tracing. Once we have called that we still want to wait for all the trace events to be emitted; and we do that by waiting for the [`Tracing.tracingComplete`](https://chromedevtools.github.io/devtools-protocol/tot/Tracing/#event-tracingComplete) event. ## CDP profiling workflow For this workflow, we use the [`Profiler`](https://chromedevtools.github.io/devtools-protocol/tot/Profiler/) domain to gather data. When the user hits record we send two commands to CDP: 1. [`Profiler.setSamplingInterval`](https://chromedevtools.github.io/devtools-protocol/tot/Profiler/#method-setSamplingInterval) to set the sampling rate. 2. [`Profiler.start`](https://chromedevtools.github.io/devtools-protocol/tot/Profiler/#method-start) to start profiling. When the user hits stop, we call [`Profiler.stop`](https://chromedevtools.github.io/devtools-protocol/tot/Profiler/#method-stop) to stop profiling. This method then returns us a list of gathered CPU Profiles.