Google chrome 如何在chrome开发工具中获得FPS

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

到目前为止，我只能通过如下方式在帧上悬停来获得每帧的持续时间和fps：

或通过选择框架：

要获得所有帧的平均fps，我必须手动一个一个地求和和计数，这非常不方便

---

---

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

您可以将devtools用于devtools

将devtools切换到分离窗口模式（单击devtools设置图标，单击“取消锁定”图标）。下次您只需按Ctrl-Shift-D切换模式

通过按Ctrl-Shift-i为devtools调用devtools

---

• 显示所有帧的FPS：

  UI.panels.timeline.\u flameChart.\u model.\u frameModel.\u frames.slice（1）.map（f=>+（1000/f.duration）.toFixed（1））

• 显示平均FPS：

  +UI.panels.timeline.\u flameChart.\u frameModel.\u frameModel.\u frames.slice（1）.map（f=>1000/f.duration）.reduce（（avg，fps，i）=>（avg*i+fps）/（i+1），0）.toFixed（1）

---

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

我要感谢@wOxxOm指出如何在中访问devtools for devtools

然而，用于计算平均FPS的代码并不完全正确。例如，如果有一帧渲染需要一秒钟，则该帧的fps为一。如果有另一帧需要

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

---

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

var startTime=UI.panels.timeline.\u flameChart.\u model.\u window.left；
var endTime=UI.panels.timeline.\u flameChart.\u model.\u window.right；
var frames=UI.panels.timeline.\u火焰图.\u模型.\u框架模型.\u框架
.filter（frame=>（frame.startTime>startTime）&（frame.endTime

页面本身上只有一个单独的FPS米叠加，您可以在->

渲染中启用它，但这只显示当前FPS，而不是平均值，或者我遗漏了什么？显然没有实现。另请参见如果您想要此功能，请对wOxxOm链接到的Crbug问题进行注释并加上星号。目前它被归档为低优先级。这太棒了！我不知道我可以在devtools窗口中使用devtools。对于那些可能对在何处添加此内容感到困惑的人，在打开第二个DevTool后，将上述代码粘贴到控制台中。