Clever Geek Handbook

独自のプロジェクトでChromeプロファイラーフロントエンドを使用する

Google Chromeにはプロファイラーが組み込まれていることをご存知かもしれません。 しかし、それを見た人々の中でさえ、ほとんどは、JavaScriptのデバッグまたはブラウザでのフレームのレンダリングにのみ使用できると考えています。 しかし実際には、プロジェクトのプロファイリングデータを視覚化する手段として簡単にねじ込むことができます。



ここでは、固有の秘密を明らかにしません。たとえば、 コルトマカンリスは2012年にゲームプロジェクトでChromeプロファイラーを同様に使用したことについて書いています。 そこに書かれていることはすべて真実であり、別の資料を書きます-そのような便利なツールについての知識を広めるためだけです。



背景



コード構築システムの一部については、かつてシンプルなプロファイラー（TinyProfilerと呼ばれる）を作成しました。 それは非常に簡単です-コードの特定のブロックの実行時間を測定し、 フレームグラフのスタイルでこのデータを視覚化するHTML + SVGファイルのセットを作成します 。



画像



これは原理的にはうまく機能しましたが、結果のHTMLはあまりインタラクティブではありませんでした。 マウスを特定のブロックに移動し、ツールチップでその名前を確認することはできましたが、それですべてのアメニティが終了しました。 ズーム、フィルタリング、スクロール、検索はありませんでした-一般的に、多かれ少なかれプロフェッショナルなツールから得たいものはありませんでした。 もちろん、これはすべて座って書くことができますが、それができないのであれば、なぜそうするのですか？ 結局のところ、既にこれをすべて行った誰か（Chrome開発者）が既に存在します。



Chromeトレースを使用する



私たちがする必要があるのは：



  1. プロファイルされたイベントのデータを含む特定の形式の JSONファイルを作成します
  2. Chromeを開く：// Chromeでページをトレースする
  3. JSONファイルをこのページにドラッグします


結果は、ミニプロファイラーの画像と視覚的に非常によく似ています。



画像



このアプローチの利点：





ただし、いくつかの欠点があります。





メリットはデメリットを上回るように思えます。



JSONファイル形式



この形式はそれ自体非常に単純であり、 十分に文書化されています 。 基本的な構造は次のようになります。 



{ "traceEvents": [ { "pid":1, "tid":1, "ts":87705, "dur":956189, "ph":"X", "name":"Jambase", "args":{ "ms":956.2 } }, { "pid":1, "tid":1, "ts":128154, "dur":75867, "ph":"X", "name":"SyncTargets", "args":{ "ms":75.9 } }, { "pid":1, "tid":1, "ts":546867, "dur":121564, "ph":"X", "name":"DoThings", "args":{ "ms":121.6 } } ], "meta_user": "aras", "meta_cpu_count": "8" }


traceEventsは、UIに表示されるイベントです。 イベントではないものはすべて、メタデータダイアログに表示される「メタデータ」と見なされます（この場合、meta_userとmeta_cpu_count）。 上記のJSONファイルは、Chromeトレースでは次のようになります。



画像



ここで説明されているイベントは非常に単純です。 それらは「完了」と呼ばれます（タイプph：X）-それらを記述するために、開始時間と期間をマイクロ秒（tsおよびdur属性）で指定する必要があります。 プロセスIDとストリームIDの属性、およびイベントの名前も示されます。 親子関係を指定する必要はありません。UIは各イベントの開始時間と期間に基づいてそれ自体を決定します。



また、ある種のデータをイベントに添付することもできます（args属性）。このイベントが選択されると、下部パネルに表示されます。 小さなニュアンスがあります-イベントを選択可能にするには、空でない引数が必要です。 つまり、少なくとも何か（不必要であっても）そこに置く方が良いということです。 何かを考えることはできません-そこでイベントの期間を複製します（おそらく、マイクロ秒からミリ秒または秒に変換することによって）。



このツールの基本的な使用方法についてお伝えしたかったのはこれだけです。 おそらく記事はやや素朴であることが判明しましたが、これはツール自体がシンプルで便利だからです。 高度な使用例については、 ドキュメントをお読みください。 プロファイリングに成功しました。


More articles:


All Articles