Firebugでサイトパフォーマンス改善の第一歩を踏み出す

杉山貴章(オングス)
2008-11-10 17:00:00
  • このエントリーをはてなブックマークに追加

任意のJavaScriptコードを実行

 Firebugのコンソールパネルではウェブページに埋め込まれたJavaScriptを実行するだけでなく、直接コードを入力して実行することもできる。その場合、入力されたJavaScriptコードは表示されているウェブページと同じコンテキスト内で実行される。したがってページ内で定義されたオブジェクトや関数などにもアクセスすることができる。

 一行のコードを実行するだけならば、コンソールパネルの下部に表示されているテキストエリアに入力して[Enter]キーを押してみよう。図1は前回示したスライドショー(firebug-sample.html)のnextImage()を呼び出した例である。firebug-sample.htmlを表示した状態で実行すれば、表示される写真が最後のものに切り替わる。

図1 一行のJavaScriptコードを実行する 図1 一行のJavaScriptコードを実行する

 複数行のJavaScriptコードを実行したい場合にはコマンドラインパッドを使用する。テキストエリア右端の赤いアイコンをクリックするか、オプションメニューから[コマンドラインパッドを表示]を選択することで図2のようにコマンドラインパッドが表示され、JavaScriptコードが記入できるようになる。

図2 コマンドラインパッドで複数行のJavaScriptコードを実行する 図2 コマンドラインパッドで複数行のJavaScriptコードを実行する

JavaScriptのパフォーマンス測定

 コンソールパネルではJavaScriptのパフォーマンスを測定することもできる。まず計測したいページを表示した状態で[プロファイル]をクリックする。続けてページ上で計測対象となる操作を行い、再度[プロファイル]をクリックする。すると各ファンクションの呼び出し回数や実行速度などが計測され図3のように一覧表示される。

図3 JavaScriptのパフォーマンス測定結果の例 図3 JavaScriptのパフォーマンス測定結果の例

 この機能を利用すれば、どの操作にどの程度の時間を要するのかがわかり、サイトのパフォーマンス改善に役立てることができる。

  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]