8

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
  • 7,151
  • 3
  • 38
  • 50
  • 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

14

Currently it waits for three seconds after load event.
This is not documented so it may change in the future without notice.

this._millisecondsToRecordAfterLoadEvent = 3000;

async _loadEventFired(event) {
  if (this._state !== Timeline.TimelinePanel.State.Recording || !this._recordingPageReload ||
      this._controller.mainTarget() !== event.data.resourceTreeModel.target())
    return;
  const controller = this._controller;
  await new Promise(r => setTimeout(r, this._millisecondsToRecordAfterLoadEvent));

  // Check if we're still in the same recording session.
  if (controller !== this._controller || this._state !== Timeline.TimelinePanel.State.Recording)
    return;
  this._stopRecording();
}
wOxxOm
  • 53,493
  • 8
  • 111
  • 119
  • You really are _the_ Chrome DevTools wizard! Thanks for finding this – F Lekschas Jun 19 '19 at 20:43
  • 2
    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