/devtools-perf-features

Chrome DevTools’ little known features for perf debugging

MIT LicenseMIT

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

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
CleanShot 2023-02-15 at 00 45 29@2x CleanShot 2023-02-15 at 00 17 13@2x

(Under the hood, this enables more tracing categories and disables filtering in a bunch of places.)

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

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
CleanShot 2023-02-15 at 00 50 39@2x CleanShot 2023-02-15 at 00 52 20@2x
CleanShot 2023-02-15 at 00 50 43@2x CleanShot 2023-02-15 at 00 52 29@2x

This is useful to debug layout trashing.

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:

    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:

Select.a.part.of.the.recording.mov

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

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