Firefoxは基本機能の中に開発向けの機能が結構充実しています。
3Dビューやレスポンシブルビューデザインなんかはわりとデザイン向けとしては使える機能だと思います。僕も仕事ではよくこれらを活用しています。
さて、その中で最近増えた機能として、Firefox 20.0から追加されたプロファイラについて解説をします。
Web開発のメニューからプロファイラを選択すると開くことができます。
メニューの名前が「プロファイラ」なのですが、ぶっちゃけJavascript Profilerです。
起動をしたらプロファイラの開始を押すと解析がスタートします。
このあとJavascriptの処理をWebページで実行をします。
そして、終了を押すと解析が終了して結果が表示されます。
実行結果はツリーとして表示されます。
各Javascriptの実行された時間が%として表示されます。
これをたどっていくことで重たい処理を簡単に見つけることができます。
僕はまた別の使い方をしていて、このツリーをたどることでどの処理が行われているかという解析をしています。
例えば、OpenLayersでは設定によってVectorのLayerのレンダラをCanvasやSVGなどを選んだりすることができるのですが、それがコードからはどれを選んでるのがわかりづらかった*1ため、てっとり早く調べるためにこのプロファイラを使いました。
この例ではCanvasを使ってるっていうのがわかりますね。
他、便利な機能としては棒グラフになっているところをマウスカーソルでドラッグするとその範囲だけのサンプリングデータが取れます。
この機能を使えば重たいところだけを重点的に調べるなんてことができます。
あと、僕は試せていないのですが、Firefox 21.0からはリモートプロファイリングという機能があり、Firefox OS上のデバイスのプロファイリングができるようになっているそうです。
Firefox OS Developer Preview phoneを持っている方は文鎮になる前に*2ぜひ試して下さい。
ちなみに、プロファイリング機能はGoogle Chromeにもあるみたいです。
確認してみたんですが、Firefoxの方がJavascriptの処理だけをまとめて100%としているのに対して、Google Chromeの方は完全に時間軸で扱ってるようで、idleが多くを占めるようになっています。
これは見方の好みかなーと思います。
*1:ここからどれをたどるかって話 https://github.com/openlayers/openlayers/blob/master/lib/OpenLayers/Layer/Vector.js#L805
*2:友達、届いた初日に文鎮になってたんだぜ...
