Skia DebuggerによるCSSプロパティの重み測定 〜測定編〜

今回はSkia Debuggerの測定編ということで、install編の続きを書いていきたいと思います。

今回もまた、
（筆者がMacなので、Macのインストール談です。。Windowsのひと、ごめんなさいごめんなさい。

「.skp」ファイルを取得する

1. オプション付きでCanaryを起動

$ /Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --enable-impl-side-painting --enable-skia-benchmarking

2. tracingへアクセス
・Canaryで下記URLへアクセス
chrome://tracing/

図1. tracing

3. 「.skp」ファイルを取得する

・レコーディング状態にする
左上の「Record」ボタンを押す
「Settings preset: Web developer」となっている。

図2. tracing record

「Settings preset: Manually select settings」にすると表示が変わる。

図3. tracing record2

「Record Categories」のccをチェック
「Disabled By Default Categories」のcc.debugをチェック
右下の「Record」ボタンを押す。（すると、Recording状態になる。


・レコーディング〜レコーディングを停止する
新たなタブを開き、チェックしたWebサイトへ遷移して、計測したいページを開き、描画が変わるようなことをする。
（今回の場合、http://localhost/test/skia/

その後、元のタブ(chrome://tracing/)へ戻り、「Stop」ボタンを押してレコーディングを停止する


・レコーディング結果から「.skp」ファイルをexportする
アコーディオンがいくつかあるので、「Renderer (pid xxxxx): Index of /test/skia」を開き、
リストの見出しにある「cc::Picture」の右側の丸ポチを押す。
（すると、そのタブで開いた画面遷移が閲覧でき、遷移の流れを確認できる(右左ボタンでも切り替わるよ)

取得したい状態の.skpファイルを取得するには、画面左側の「Skia Picture」下部のskpicture.skp「Export」ボタンを押す。

図4. tracing record3

「.skp」ファイルを開く

1. Skia Debuggerを起動
install編でビルドした階層で、下記コマンドを実行する

$ open out/Debug/debugger.app

2. 「.skp」ファイルを開く
メニューにある「File」⇒Openボタンを押し、ファイルを開く

図5. Skia Debugger

（期待してた、Total Timeが表示されてない…ので、調べます…。前は表示されてたのに。。
それを元に、CSSプロパティの重みを測定しようと思ってました。


※ 筆者がハマった！
現象：
Canaryで吐き出した.skpファイルが開けない

解決：
Canaryのバージョンと、Skia Debuggerのバージョンが違うと(?)「Couldn't read file, sorry」というダイアログが表示され、.skpファイルが開けないぽい。
その場合は、Skiaの最新ソースをgit pullしてから、Skia Debuggerをビルドし直すと、Canaryで吐き出した.skpファイルが開けるようになりました。


次回は、色々測っていきたいと思います。

以上！