如何在Chrome开发者工具中获取FPS [英] How to get the FPS in chrome devtools

问题描述

我想获取所测量的性能记录的平均fps.

I want to retrieve the average fps of the measured performance recording.

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

So far I'm only able to get the duration and fps per frame by either hovering over the frame like this:

或通过选择框架:

要获得所有帧的平均fps，我必须手动求和并逐一计数，这很不方便.

To get the average fps of all frames, I would have to sum and count them one by one by hand, which is quite inconvenient.

Firefox devtools在面板的右上方显示平均fps.

Firefox devtools for example displays the average fps at the top right of the panel.

推荐答案

您可以使用devtools-for-devtools.

You can use devtools-for-devtools.

1. 将devtools切换到分离窗口模式(单击devtools设置图标，然后单击取消停靠"图标).下次您只需按 Ctrl - Shift - D 即可切换模式.
2. 通过按 Ctrl - Shift - i
调用devtools-for-devtools

1. Switch devtools to detached window mode (click devtools settings icon, click "undock" icon). Next time you can simply press Ctrl-Shift-D to toggle the mode.
2. Invoke devtools-for-devtools by pressing Ctrl-Shift-i

---

• 显示所有帧的FPS:

  ---

  • display FPS of all frames:

    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 代码段"面板中的代码段在上面的步骤2之后调用它.

    You can save this code as snippets in devtools Snippets panel and invoke it after step 2 above.

    这篇关于如何在Chrome开发者工具中获取FPS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！