├── LICENSE
└── README.md
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 Ivan Akulov
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # `devtools-perf-features`
2 |
3 | Chrome DevTools have a bunch of advanced undocumented flags and features. Some of them are tremendously useful during performance profiling. This repo attempts to document them.
4 |
5 | Contents:
6 |
7 | - [Timeline: event initiators](#timeline-event-initiators)
8 | - [Timeline: show all events](#timeline-show-all-events)
9 | - [Timeline: invalidation tracking](#timeline-invalidation-tracking)
10 | - [Measuring a part of the recording](#measuring-a-part-of-the-recording)
11 |
12 | ## Timeline: event initiators
13 |
14 | The _Settings → Experiments → Timeline: event initiators_ setting draws little arrows from code that calls `setTimeout()`, `requestAnimationFrame()`, etc. – to code that fires as a result:
15 |
16 | 
17 |
18 | Works for:
19 |
20 | - Timers
21 | - Animation frames
22 | - Style and layout recalculations
23 |
24 | **How to enable:** open DevTools settings (press F1) → Experiments → check “Timeline: event initiators”. Then, select any timer callback in the performance trace.
25 |
26 | ## Timeline: show all events
27 |
28 | The _Settings → Experiments → Timeline: show all events_ setting makes DevTools track and show calls to native Chromium functions (rendered in gray):
29 |
30 | | Without the setting | With the setting |
31 | | --- | --- |
32 | | 
| 
|
33 |
34 | (Under the hood, this [enables more tracing categories](https://github.com/ChromeDevTools/devtools-frontend/blob/6948720964e8555a915a5142016fa956943a8ceb/front_end/panels/timeline/TimelineController.ts#L93) and disables filtering [in](https://github.com/ChromeDevTools/devtools-frontend/blob/6948720964e8555a915a5142016fa956943a8ceb/front_end/models/timeline_model/TimelineModel.ts#L728-L730) a [bunch](https://github.com/ChromeDevTools/devtools-frontend/blob/6948720964e8555a915a5142016fa956943a8ceb/front_end/models/timeline_model/TimelineJSProfile.ts#L219-L221) of [places](https://github.com/ChromeDevTools/devtools-frontend/blob/6948720964e8555a915a5142016fa956943a8ceb/front_end/panels/timeline/TimelinePanel.ts#L1110-L1112).)
35 |
36 | Use this to:
37 | - see more details about what exactly the browser is doing and when
38 | - quickly jump to relevant places in the Chromium codebase: e.g., to find the what exactly `HTMLDocumentParser::PumpTokenizer` is doing, copy that string and paste it [into Chromium Code Search](https://source.chromium.org/)
39 |
40 | **How to enable:** open DevTools settings (press F1) → Experiments → check “Timeline: show all events”.
41 |
42 | ## Timeline: invalidation tracking
43 |
44 | The _Settings → Experiments → Timeline: invalidation tracking_ setting makes DevTools capture what exactly triggered “Recalculate style” and “Layout” operations:
45 |
46 | | Without the setting | With the setting |
47 | | --- | --- |
48 | | 
| 
|
49 | | 
| 
50 |
51 | This is useful to debug [layout trashing](https://gist.github.com/paulirish/5d52fb081b3570c81e3a).
52 |
53 | Here’s how the setting changes the DevTools’ behavior:
54 |
55 | - Without the setting, DevTools only show the first place that invalidated styles or layout. This means that if you have code like this:
56 |
57 | ```js
58 | document.querySelector('.header').classList.add('header_dark')
59 | // 500 lines lower
60 | document.querySelector('.sidebar').classList.add('sidebar_dark')
61 | ```
62 |
63 | then DevTools will only link to the first line.
64 |
65 | - With the setting, DevTools track every change that invalidates cached styles or layout – and links to all of them.
66 |
67 | Note that enabling this setting makes all layout operations more expensive.
68 |
69 | More watching by Nolan Lawson: https://www.youtube.com/watch?v=nWcexTnvIKI
70 |
71 | **How to enable:** open DevTools settings (press F1) → Experiments → check “Timeline: invalidation tracking”.
72 |
73 | ## Measuring a part of the recording
74 |
75 | To quickly measure a part of the recording, hold Shift and select that part of the trace:
76 |
77 | https://user-images.githubusercontent.com/2953267/218892333-53a812ff-9eea-4ad2-9116-2e7876051562.mov
78 |
79 |
80 |
81 | In the bottom part of the selection, you’ll see exactly how long it is:
82 |
83 | 
84 |
85 | **How to enable:** this is enabled by default but is surprisingly hard to discover.
86 |
--------------------------------------------------------------------------------