How to get the FPS in chrome devtools
You can use devtools-for-devtools.
- 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.
- 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.
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);
}