最強のFireFoxエクステンション「FireBug」

[tegaki]ふぁいあーふぉっくすのエクステンション＿[/tegaki]

FireFoxのエクステンション（拡張機能）の1つ、FireBug（日本語） は、Web ページを閲覧中にクリック一つでCSS、HTML、及び JavaScript をリアルタイムに閲覧、編集、またはデバッグすることが出来るエクステンションです。

• 自作サイトのバグを見つけたい
• お気に入りのサイトのCSSやHTMLを覗いてみたい
• あのページの表示速度が遅いけど、ボトルネックはどこだ？
• CSSやHTMLをリアルタイムに編集しながら、プレビューしたい
• JavaScriptのデバッグ機能がほしい
• WEBサイト製作のツールはどれがいいの？

など、そんな悩みを解決してくれる拡張機能です。

• インストール方法

こちらからアクセスして、「インストール」をクリックしてください。

インストールをクリックした後、下記の画面が表示されたら「今すぐインストール」をクリック。

（インストールにあたって、セキュリティーのポップアップが出る場合がありますが、「許可」で問題ないです）
インストールはこれで完了です。FireFoxを再起動して、FireBugを有効にしてください。

• FireBugの使い方

さて、次に実際にこの拡張機能の使い方です。FireBugを使って覗いてみたいサイトをブラウザで開いて、「ツール」→「FireBug」→「 FireBugを使う」をクリック。

あとはメニューが下段に表示されますので、まずは「調査」して、サイト内を分析して、さらにはお好きなように編集することも可能です。

1. 調査をクリックしてサイト内を分析



ここでは、HTML構造を調査して分析しているところです。ブラウザ上段の青枠で囲われている部分が、下段の青塗りの部分に対応します。この部分のHTMLソースってどうなってるの？が一目瞭然です。FireFoxにデフォルトで実装されている「右クリック」→「選択した部分のソースを表示」に比べてより正確な分析が可能です。

2. ロード完了までの時間を計る



画像の読み込む速度など、ローディングタイムを目視で確認できます。ファイルごとに読み込む速度が把握できるので、どのページがボトルネックになっているのか、サイト修正にも役立ちますね。

3. ロード完了までの時間を計る



もし、その場でCSSやHTMLなどを編集してみたい場合には、そのままソースを編集するだけです。
編集がリアルタイムで反映されます。Javascriptのデバッグも同様に可能ですので、メニューから
スクリプトを選んで表示を変更してみてください。

[tegaki]めちゃめちゃ べんり１[/tegaki]