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: show all events
• Timeline: invalidation tracking
• 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 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

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.