How to get the 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.