如何在chrome devtools中获取FPS

Question

我想检索测量的性能记录的平均 fps。

到目前为止，我只能通过将鼠标悬停在帧上来获取每帧的持续时间和 fps：

或选择框架：

要得到所有帧的平均fps，我必须手动将它们一一求和，这很不方便。

例如，Firefox devtools 在面板的右上角显示平均 fps。

Answer 1

您可以使用 devtools-for-devtools。

Ctrl-Shift-D 即可切换模式。
Ctrl-Shift-i 调用 devtools-for-devtools

显示所有帧的FPS：

UI.panels.timeline._flameChart._model._frameModel._frames.slice(1).map(f => +(1000 / f.duration).toFixed(1))
显示平均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)

您可以将此代码保存为开发工具

代码片段面板中的代码片段，并在上述步骤 2 之后调用它。

Answer 2

我要感谢 @wOxxOm 在

上面的答案中指出如何访问 DevTools。

但是，计算平均 FPS 的代码不太正确。例如，如果有一帧需要 1 秒才能渲染，则该帧的 fps 为 1。如果有另一个帧需要

(1000 / 60)

 毫秒来渲染，则该帧的 fps 为 60。原始代码给出的这两个帧的平均 fps 为

(60 + 1) / 2

，这是不正确的。

正确的平均 fps 是总帧数除以总持续时间。在此示例中，它是

2 / (1 + 1 / 60)

 fps。

实现此目的的一种方法是：

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

快速说明一下，API 似乎为此略有更改，因此现在完成此操作的新代码是：

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

更新了 @Daniel Le 的解决方案，考虑当前选择的范围

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

更新的代码：

显示所有帧的FPS：

UI.panels.timeline.flameChart.model
.frameModel().frames.slice(1).map(f => +(1000 / f.duration).toFixed(1))

显示平均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

开发工具的开发工具非常棒！

但是您的平均值没有考虑每帧的持续时间，也没有考虑丢失或空闲的帧，考虑到这些持续时间

[16,16,160]

您的代码将报告平均值为 43.75 FPS，如果您正确测量加权平均值，则 FPS 为 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);