web-dev-qa-db-ja.com

chrome devtoolsで平均FPSを取得する方法

測定されたパフォーマンス記録の平均fpsを取得したいと思います。

これまでのところ、次のようにフレームにカーソルを合わせると、フレームあたりの継続時間とfpsを取得することしかできません。 enter image description here

またはフレームを選択することによって： enter image description here

すべてのフレームの平均fpsを取得するには、それらを1つずつ手動で合計してカウントする必要があり、非常に不便です。

たとえば、Firefox devtoolsは、パネルの右上に平均fpsを表示します。 enter image description here

google-chromegoogle-chrome-devtoolsframe-rate
10
Robbendebiene

Devtools-for-devtoolsを使用できます。

  1. Devtoolsをデタッチウィンドウモードに切り替えます（devtools設定アイコンをクリックし、[ドッキング解除]アイコンをクリックします）。次回は単に押すことができます Ctrl-Shift-D モードを切り替えます。
  2. を押してdevtools-for-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 panel に保存し、上記の手順2の後で呼び出すことができます。

20
wOxxOm

上記の回答 でDevTools forDevToolsにアクセスする方法を指摘してくれた@wOxxOmに感謝します。

ただし、平均FPSを計算するために与えられたコードは完全に正しくありませんでした。たとえば、レンダリングに1秒かかるフレームがある場合、そのフレームのfpsは1です。レンダリングに_(1000 / 60)_ msかかる別のフレームがある場合、そのフレームのfpsは60です。元のコードでは、これら2つのフレームの平均fpsは_(60 + 1) / 2_になりますが、これは正しくありません。

正しい平均fpsは、フレームの合計数を合計期間で割ったものです。この例では、2 / (1 + 1 / 60)fpsです。

これを実装する1つの方法は次のとおりです。

_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);
}
_
2
Daniel Le

現在選択されている範囲を考慮した@DanielLeのソリューションを更新

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));
0
drow