How to get the average FPS in chrome devtools

Question

I want to retrieve the average fps of the measured performance recording.

So far I'm only able to get the duration and fps per frame by either hovering over the frame like this:

or by selecting the frame:

To get the average fps of all frames, I would have to sum and count them one by one by hand, which is quite inconvenient.

---

Firefox devtools for example displays the average fps at the top right of the panel.

Answer 1

You can use devtools-for-devtools.

1. Switch devtools to detached window mode (click devtools settings icon, click "undock" icon). Next time you can simply press Ctrl-Shift-D to toggle the mode.
2. Invoke devtools-for-devtools by pressing Ctrl-Shift-i

---

• display FPS of all frames:

  UI.panels.timeline._flameChart._model._frameModel._frames.slice(1).map(f => +(1000 / f.duration).toFixed(1))

• display the average FPS:

  +UI.panels.timeline._flameChart._model._frameModel._frames.slice(1).map(f => 1000 / f.duration).reduce((avg, fps, i) => (avg*i + fps) / (i+1), 0).toFixed(1)

You can save this code as snippets in devtools Snippets panel and invoke it after step 2 above.

Answer 2

I'd like to thank @wOxxOm for pointing out how to access DevTools for DevTools in the answer above.

However, the code given to calculate average FPS was not quite right. For example, if there's a frame that takes one second to render, then that frame's fps is one. If there is another frame that takes (1000 / 60) ms to render, then that frame's fps is 60. The original code would give an average fps of (60 + 1) / 2 for these two frames, which is incorrect.

The correct average fps is the total number of frames divided by the total duration. In this example, it is 2 / (1 + 1 / 60) fps.

One way to implement this is:

function averageFps() {
    let frames = UI.panels.timeline._flameChart._model._frameModel._frames;
    let duration = (frames[frames.length - 1].endTime - frames[0].startTime) / 1000;
    let average = frames.length / duration

    return +average.toFixed(2);
}

Answer 3

Updated @Daniel Le's solution that considers currently selected range

var startTime = UI.panels.timeline._flameChart._model._window.left;
var endTime = UI.panels.timeline._flameChart._model._window.right;

var frames = UI.panels.timeline._flameChart._model._frameModel._frames
  .filter(frame => (frame.startTime > startTime) && (frame.endTime < endTime));

var duration = (frames[frames.length - 1].endTime - frames[0].startTime) / 1000;
var average = frames.length / duration

console.log(+average.toFixed(2));