9

I use the Performance Timeline in Chrome DevTools quite a lot to capture performance recordings of my page.

Most of the time I use the "Start profiling and reload page", which automatically starts and stops the recording.

The question is: When does DevTools decide to stop the recording?

I've noticed that it always continues to record at least a few hundred ms past the "Load"-event and tries to figure out when the page has gone "mostly idle".

But that's quite a fuzzy guess. I'd love to know if it relies on some performance event (like the one used in "time to interactive" in Lighthouse)?

Drkawashima
  • 8,837
  • 5
  • 41
  • 52
  • Yep, [3 seconds after `load` event](https://cs.chromium.org/chromium/src/third_party/blink/renderer/devtools/front_end/timeline/TimelinePanel.js?l=760-770&rcl=326963de). – wOxxOm Jan 20 '19 at 16:10
  • @wOxxOm: Wow, impressive that you even included a code reference! Post that as an answer and I'll mark it as correct! – Drkawashima Jan 20 '19 at 16:14

1 Answers1

17

Chrome devtools waits for 5 seconds after load event (source) since Chrome 85. This is not documented so it may change without notice and did change in Chrome 85 from 3 seconds.

You can modify this behavior in your current debugging session:

  1. switch devtools to Performance panel/tab
  2. open devtools-on-devtools and run the following code in its console:
UI.panels.timeline.millisecondsToRecordAfterLoadEvent = 9001.
wOxxOm
  • 65,848
  • 11
  • 132
  • 136
  • You really are _the_ Chrome DevTools wizard! Thanks for finding this – F Lekschas Jun 19 '19 at 20:43
  • 5
    You can modify devtools code in your current debugging session by running the following code in [devtools-on-devtools](https://stackoverflow.com/a/41202159): `UI.panels.timeline._millisecondsToRecordAfterLoadEvent = 9001` (the main devtools should have Timeline panel active). – wOxxOm May 01 '20 at 11:08
  • thanks for this answer -- after several Google searches I was finally able to locate it. Is there any way to change this value short of compiling from source? – spinn May 01 '20 at 11:26
  • @wOxxOm I forgot specifics and this was useful again months later. I should add you to my christmas card list – spinn Aug 12 '20 at 09:49
  • 2
    @wOxxOm this is really helpful! checked latest chrome version 109, looks like the default value changed to 5000, and the variable name changed to UI.panels.timeline.millisecondsToRecordAfterLoadEvent – fankai Feb 22 '23 at 03:40
  • Confirming that @fankai is right, use `UI.panels.timeline.millisecondsToRecordAfterLoadEvent = 10000` (no underscore prefix anymore) – Anoesj Sadraee Aug 17 '23 at 12:14