如何在chrome devtools中获得平均FPS [英] How to get the average FPS in chrome devtools

问题描述

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

或者通过选择框架：

为了得到所有帧的平均帧数，我必须用手来一一计算它们，这很不方便。

---

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

解决方案

您可以使用devtools-

1. 将devtools切换到分离窗口模式（单击devtools设置图标，单击undock图标）。下次只需按 Ctrl - Shift - D 即可切换模式。 调用devtools通过按 Ctrl - Shift - i

---

• 显示所有帧的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面板中，并在上面的第2步之后调用它。

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

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

or by selecting the frame:

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 for example displays the average fps at the top right of the panel.

解决方案

You can use 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

---

• display FPS of all frames:

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

• display the average 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)

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

这篇关于如何在chrome devtools中获得平均FPS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！