「Profiles」でできること

Profilesタブでは、Firebugの「コンソール」パネルの"プロファイル"に近い機能が用意されている。プロファイルの開始ボタンをクリックし、Webブラウザで各種操作をおこなってプロファイルの終了ボタンをクリッックすることで、詳細なプロファイルを得ることができる。

Scripts同様、今度はやや負荷のかかるソースコードと図を交えてプロファイルでできることを簡単に紹介する。

HTMLファイル - hello_profiles.html

 <html>
 <head>
   <title>Google Chrome / Profiles test</title>
   <script type="text/javascript">
   <!--
   function execConsoleLog_1()
   {
       // 時間のかからない処理
       for (n=0; n<100; n++)
       {

       }
       console.log('complete execConsoleLog_1.');
   }

   function execConsoleLog_2(number)
   {
       // 時間のかかる処理
       for (i=0; i<500000000; i++)
       {

       }
       console.log('complete execConsoleLog_2.');
   }


   function load()
   {
       document.getElementById('execConsoleLog_1').addEventListener('click', execConsoleLog_1, false);
       document.getElementById('execConsoleLog_2').addEventListener('click', execConsoleLog_2, false);
   }
   -->
   </script>
 </head>
 <body onload="load();">

 <input type="button" id="execConsoleLog_1" value="execConsoleLog_1">

 <input type="button" id="execConsoleLog_2" value="execConsoleLog_2">

 </body>
 </html>

ファイルにGoogle Chromeでアクセスし、JavaScriptコンソールより、Profilesタブを表示する

「●」ボタンで記録開始/終了

記録終了すると自動的にプロファイルが生成され、結果が表示される。一目でどの処理に時間がかかっているかがわかる。ファイル名をクリックすると、Resourcesタブ内の該当行へジャンプする

パーセンテージのほかに、実際に処理にかかった時間単位でも表示可能

結果は「Focus Selected Function」や「Excluded Selected Function」で除外することで、必要なところだけを切り出せる。元に戻したい場合は、右端の「Restore all functions」ボタンをクリックすればOKだ

必要なときにだけ起動/記録できるので、どの処理に時間がかかっているかの当たりがついていれば、比較的簡単にボトルネックとなっているところを割り出すことが可能となる。Profilesをうまく使いこなし、ひとつひとつの処理を極限まで短縮できるようにブラッシュアップしよう。

お互いのよき開発に向けて - 使ってみたら、ぜひフィードバックを

グーグルのシニア プロダクトマネージャー 及川卓也氏は、Google Japan Blogでこの開発者向けツールを試したデベロッパに向けて「Google Chromeデベロッパチームに何らかのフィードバックを送信してほしい」という旨の内容をアナウンスしている。

Google Chrome 自身がそうであるように、この開発者向けツールもオープンソースであり、WebKit (より正確には WebKit のインスペクター) を基にしています。是非この機会にお試しいただき、私どもにフィードバックをいただければと考えています。この開発者向けツールを WebKit および Google Chrome 向けにさらに改良するための、不具合のレポートから機能リクエストのフィードバック、さらには開発への貢献なども歓迎です。 (Google Japan Blogより抜粋)

Google Chromeもこの開発者向けツールもオープンソース、常に進化を続けているWebブラウザだ。お互いのよき「開発」に向けて、積極的にフィードバックを発信しよう。