https://github.com/iamakulov/devtools-perf-features

Chrome DevTools’ little known features for perf debugging
https://github.com/iamakulov/devtools-perf-features

Last synced: 16 days ago
JSON representation

Chrome DevTools’ little known features for perf debugging

• Host: GitHub
• URL: https://github.com/iamakulov/devtools-perf-features
• Owner: iamakulov
• License: mit
• Created: 2023-02-14T22:56:35.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-03-06T13:43:34.000Z (over 1 year ago)
• Last Synced: 2024-02-27T07:32:46.848Z (4 months ago)
• Homepage:
• Size: 26.4 KB
• Stars: 199
• Watchers: 11
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• my-awesome-stars - iamakulov/devtools-perf-features - Chrome DevTools’ little known features for perf debugging (Others)
• my-awesome-stars - iamakulov/devtools-perf-features - Chrome DevTools’ little known features for perf debugging (Others)

README

        
# `devtools-perf-features`

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.

Contents:

- [Timeline: event initiators](#timeline-event-initiators)

- [Timeline: show all events](#timeline-show-all-events)

- [Timeline: invalidation tracking](#timeline-invalidation-tracking)

- [Measuring a part of the recording](#measuring-a-part-of-the-recording)

## Timeline: event initiators

The _Settings → Experiments → Timeline: event initiators_ setting draws little arrows from code that calls `setTimeout()`, `requestAnimationFrame()`, etc. – to code that fires as a result:



Works for:

- Timers

- Animation frames

- Style and layout recalculations

**How to enable:** open DevTools settings (press F1) → Experiments → check “Timeline: event initiators”. Then, select any timer callback in the performance trace.

## Timeline: show all events

The _Settings → Experiments → Timeline: show all events_ setting makes DevTools track and show calls to native Chromium functions (rendered in gray):

| Without the setting | With the setting |

| --- | --- |

|  |  |

(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).)

Use this to:

- see more details about what exactly the browser is doing and when

- 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/)

**How to enable:** open DevTools settings (press F1) → Experiments → check “Timeline: show all events”.

## Timeline: invalidation tracking

The _Settings → Experiments → Timeline: invalidation tracking_ setting makes DevTools capture what exactly triggered “Recalculate style” and “Layout” operations:

| Without the setting | With the setting |

| --- | --- |

|  |  |

|  | 

This is useful to debug [layout trashing](https://gist.github.com/paulirish/5d52fb081b3570c81e3a).

Here’s how the setting changes the DevTools’ behavior:

- Without the setting, DevTools only show the first place that invalidated styles or layout. This means that if you have code like this:

  ```js

  document.querySelector('.header').classList.add('header_dark')

  // 500 lines lower

  document.querySelector('.sidebar').classList.add('sidebar_dark')

  ```

  then DevTools will only link to the first line.

- With the setting, DevTools track every change that invalidates cached styles or layout – and links to all of them.

Note that enabling this setting makes all layout operations more expensive.

More watching by Nolan Lawson: https://www.youtube.com/watch?v=nWcexTnvIKI

**How to enable:** open DevTools settings (press F1) → Experiments → check “Timeline: invalidation tracking”.

## Measuring a part of the recording

To quickly measure a part of the recording, hold Shift and select that part of the trace:

https://user-images.githubusercontent.com/2953267/218892333-53a812ff-9eea-4ad2-9116-2e7876051562.mov




In the bottom part of the selection, you’ll see exactly how long it is:

![](https://user-images.githubusercontent.com/2953267/218892846-01a5654d-7a2c-4d14-b844-21b8cff51598.jpg)

**How to enable:** this is enabled by default but is surprisingly hard to discover.