Extracting FPS data from Chrome devtools performance profiler

chrome-extract-fps-from-devtools-profiler.js

// After having recorded a session in the Chrome devtools performance profiler,
// open devtools-for-devtools (Ctrl + Maj + I on the devtools window)
// and execute code below in the console

let startTimeMs = UI.panels.timeline.flameChart.model.window().left;
let endTimeMs = UI.panels.timeline.flameChart.model.window().right;

let frames = UI.panels.timeline.flameChart.model.frameModelInternal.frames
  .filter(frame => (frame.startTime >= startTimeMs) && (frame.endTime <= endTimeMs) && (frame.duration >= 1));

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

let fpsSeries = frames.map(frame => 1000 / frame.duration);
fpsSeries.sort((a, b) => a - b);

console.log(`FPS series: ${fpsSeries}`);

let minFPS = Math.min(...fpsSeries);
let maxFPS = Math.max(...fpsSeries);
let fps1PercentLow = fpsSeries[Math.round(fpsSeries.length / 100)];
let fps10PercentLow = fpsSeries[Math.round(fpsSeries.length / 10)];

let precision = 1;
console.log(`Total Frames: ${frames.length}`);
console.log(`Average FPS: ${averageFPS.toFixed(precision)}`);
console.log(`Min FPS: ${minFPS.toFixed(precision)}`);
console.log(`Max FPS: ${maxFPS.toFixed(precision)}`);
console.log(`1% low: ${fps1PercentLow.toFixed(precision)}`);
console.log(`10% low: ${fps10PercentLow.toFixed(precision)}`);