How to get the FPS in chrome devtools - google-chrome

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.
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.

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

Just a quick note that the API seems to have changed slightly for this, so the new code to accomplish this is now:
let frames = UI.panels.timeline.flameChart.model.frameModelInternal.frames;
let frameSet = [];
let startTimeMs = UI.panels.timeline.flameChart.model.window().left;
let endTimeMs = UI.panels.timeline.flameChart.model.window().right;
let minFPS = 1000;
let maxFPS = -1;
let totalFPS = 0;
for (let frameIdx in frames) {
let frame = frames[frameIdx];
if (frame.startTime >= startTimeMs && endTimeMs >= frame.endTime) {
frameSet.push(frame);
let frameRate = (16.0/frame.duration) * 60;
if (maxFPS < frameRate) {
maxFPS = frameRate;
}
if (minFPS > frameRate) {
minFPS = frameRate;
}
totalFPS += frameRate;
}
}
console.log(`Total Frames: ${frameSet.length}`);
console.log(`Min FPS: ${minFPS}`);
console.log(`Max FPS: ${maxFPS}`);
console.log(`Average FPS: ${totalFPS / frameSet.length}`);

Answer 4

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));

Answer 5

Updated code:
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)

Answer 6

The devtools for devtools is great!
But your average does not take into account the duration of each frame nor the dropped or idle frames, given these durations [16,16,160] your code will report an average of 43.75 FPS, if you measure the weighted average correctly the FPS is 15.62.
// const frames = UI.panels.timeline.flameChart.model.frames().filter(({ idle }) => !idle);
const frames = [{ duration: 16 }, { duration: 16 }, { duration:160 }]
const totalDuration = frames.reduce((total, { duration }) => (total + duration), 0);
const weightedFps = frames.map(f => [f.dropped ? 0 : 1000 / f.duration, f.duration])
.reduce((avg, [fps, duration]) => avg + (fps * (duration / totalDuration)), 0);
console.log(weightedFps);