// This article is ...

FireFox

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

firefox_iconふぁいあーふぉっくすのエクステンション_

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

  • 自作サイトのバグを見つけたい
  • お気に入りのサイトのCSSやHTMLを覗いてみたい
  • あのページの表示速度が遅いけど、ボトルネックはどこだ?
  • CSSやHTMLをリアルタイムに編集しながら、プレビューしたい
  • JavaScriptのデバッグ機能がほしい
  • WEBサイト製作のツールはどれがいいの?
など、そんな悩みを解決してくれる拡張機能です。
  • インストール方法
こちらからアクセスして、「インストール」をクリックしてください。

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

install
(インストールにあたって、セキュリティーのポップアップが出る場合がありますが、「許可」で問題ないです)

インストールはこれで完了です。FireFoxを再起動して、FireBugを有効にしてください。
  • FireBugの使い方
さて、次に実際にこの拡張機能の使い方です。FireBugを使って覗いてみたいサイトをブラウザで開いて、「ツール」→「FireBug」→「 FireBugを使う」をクリック。

あとはメニューが下段に表示されますので、まずは「調査」して、サイト内を分析して、さらにはお好きなように編集することも可能です。
  1. 調査をクリックしてサイト内を分析
  2. use-01
    ここでは、HTML構造を調査して分析しているところです。ブラウザ上段の青枠で囲われている部分が、下段の青塗りの部分に対応します。この部分のHTMLソースってどうなってるの?が一目瞭然です。FireFoxにデフォルトで実装されている「右クリック」→「選択した部分のソースを表示」に比べてより正確な分析が可能です。
  3. ロード完了までの時間を計る
  4. use-time
    画像の読み込む速度など、ローディングタイムを目視で確認できます。ファイルごとに読み込む速度が把握できるので、どのページがボトルネックになっているのか、サイト修正にも役立ちますね。
  5. ロード完了までの時間を計る
  6. use-edit
    もし、その場でCSSやHTMLなどを編集してみたい場合には、そのままソースを編集するだけです。
    編集がリアルタイムで反映されます。Javascriptのデバッグも同様に可能ですので、メニューから
    スクリプトを選んで表示を変更してみてください。
めちゃめちゃ べんり1

add to hatena hatena.comment 0 user add to del.icio.us 0 user add to livedoor.clip 0 user

Discussion

No comments for “最強のFireFoxエクステンション「FireBug」”

コメントする