ウェブの構造把握に便利なFirefoxアドオン「Firebug」(4ページ目)

CSSを、ファイル単位で表示・編集できる

先のページでご紹介したCSS表示機能は、「（描画領域やHTMLソース領域で）選択した要素」に対して適用されているCSSを、まとめて表示する機能でした。それに対して右図の「CSS」タブでは、CSSファイル単位（HTMLソース内に直接記述されたCSSソースも含む）での閲覧・編集ができます。

ここでも先と同様に、CSSソースの左端にある余白部分をクリックすることで、その行のCSSプロパティの有効・無効が切り替えられます。また、プロパティ名や値をクリックすることで、その箇所を変更してみることもできます。

スクリプトのデバッグができる

Firebugでは、HTMLやCSSだけでなく、JavaScriptの動作確認もできます。右図のように、「スクリプト」タブを開くと、ページ内にあるスクリプトのソースが、行番号付きで表示されます。

行番号の左側にある余白部分をクリックすることで、ブレークポイントを設定できます。

ブレークポイントを設定した上でページ上のスクリプトを実行すると、ブレークポイントに達した時点でスクリプトの動作が一時停止します。その時点での変数などの条件は、右側の「ウォッチ」タブ内に表示されます。これによって、スクリプトのデバッグが効率よくできます。

ブレークポイントでスクリプトを止めた後は、ソース表示領域の右上にある矢印ボタンを使うことで、スクリプトを再開したり、ステップ実行したりできます。黄色の矢印ボタンを使ってステップ実行すれば、1行ずつ一時停止しながらスクリプトを実行し、その都度右側の「ウォッチ」タブ内で変数などの状態を確認できます。

なお、ブレークポイントで止まらなかった場合には、これらのボタンはグレーアウト（灰色で表示）されていて、押せません。先にブレークポイントを設定して、スクリプトを再実行して下さい。

ページ全体の読込速度を把握できる

「ネット」タブをクリックすると、ページの読込開始から読込完了までにかかった時間と、どのファイルを読み込むのにどれくらいの時間がかかったのかを把握できます。


読み込みの遅いファイルがある場合は、そのファイルの読み込み位置をできるだけ後回しにできるようなソースの書き方に変更するなどの対策を取ることで、待ち時間の軽減ができるでしょう。なお、この機能を利用するためには、ページを読み込むよりも前に、「ネット」タブを表示させておく必要があるので注意して下さい。

HTTPステータスコードも表示されるので、存在しないファイルを読み込もうとしていれば、右図のように「404 Not Found」と表示されます。これによって、記述ミスやファイルの移動などによって発生する問題を発見しやすくなるでしょう。

同じページを再度読み込んだ場合は、Firefox内部のキャッシュから読み込まれるファイル（＝304 Not Modifiedと表示）があるため、サーバからダウンロードするよりも短い時間で完了する点に注意して下さい。正確にサーバからの読み込み時間を把握するには、一旦キャッシュを削除する必要があります。

※キャッシュを一時的に無効にするには、前回の記事でご紹介した「Web Developer」アドオンに搭載されている「無効化」→「キャッシュを無効にする」機能を活用すると、とても楽です。

最後に、Firebugのオプション設定方法をご紹介致します。