如何在 chrome devtools 中获取 FPS

Posted 2023-03-06

【中文标题】如何在 chrome devtools 中获取 FPS

【英文标题】：How to get the FPS in chrome devtools

【发布时间】：2018-01-03 14:45:50

【问题描述】：

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

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

或通过选择框架：

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

---

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

【问题讨论】：

页面本身只有一个单独的 FPS 仪表覆盖层，您可以在 devtools bottom drawer -> Rendering -> FPS meter 中启用它。

@drawer 但这只会显示当前的 fps 而不是平均值，还是我遗漏了什么？

显然没有实现。另见crbug.com/627925

如果您需要此功能，请评论并为 wOxxOm 链接到的 Crbug 问题加注星标。目前它被归档为低优先级。

【参考方案1】：

您可以使用 devtools-for-devtools。

将 devtools 切换到分离窗口模式（单击 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)

您可以将此代码保存为 devtools Snippets panel 中的 sn-ps 并在上述步骤 2 之后调用它。

【讨论】：

这太棒了！我不知道我可以在 devtools 窗口中使用 devtools。

对于那些可能对在哪里添加它感到困惑的人，打开第二个 DevTool 后，将上面的代码粘贴到控制台中。

【参考方案2】：

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

但是，计算平均 FPS 的代码并不完全正确。例如，如果有一帧渲染需要一秒钟，那么该帧的 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);

【参考方案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`);

【讨论】：

有人知道这个UI API 上是否有文档吗？

我喜欢你的 sn-p，但是对于 97.0.4692.99 版的 Chrome，我仍然需要使用 API 的下划线版本。这个新的 API 什么时候开始发挥作用？

@Chris Blackwell 让我检查一下我的 Chrome 版本并回复你。

@ChrisBlackwell 看起来我在 Ubuntu Linux（实际上是 PopOS，但它基于 Ubuntu）上使用的是 96.0.4664.110 版本。我想知道我是否有一个 old API。我会看看我是否可以调查一下。

【参考方案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));

【参考方案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)