如何获得chrome devtools的平均FPS

Question

我想检索测量的演奏录音的平均fps。

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

或选择框架：

要获得所有帧的平均fps，我必须手动逐一求和并计算它们，这非常不方便。

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

Answer 1

您可以使用devtools-for-devtools。

1. 将devtools切换到分离窗口模式（单击devtools设置图标，单击＆＃34;取消停靠＆＃34;图标）。下次您只需按 Ctrl - Shift - D 即可切换模式。
2. 按 Ctrl - Shift - i
调用devtools-for-devtools

• 显示所有帧的FPS：

  repositories { google() }

• 显示平均FPS：

  UI.panels.timeline._flameChart._model._frameModel._frames.slice(1).map(f => +(1000 / f.duration).toFixed(1))

您可以将此代码保存为devtools Snippets panel中的代码段，并在上面的第2步之后调用它。

Answer 2

感谢@wOxxOm指出了如何在the answer above中访问DevTools for DevTools。

但是，用于计算平均FPS的代码不太正确。例如，如果有一帧需要花费一秒钟的渲染时间，则该帧的fps为1。如果还有另一帧需要(1000 / 60)毫秒来渲染，则该帧的fps为60。原始代码将为这两个帧提供(60 + 1) / 2的平均fps，这是不正确的。

正确的平均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

更新了@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));