WEB開発をサポートするFirefoxアドオン「Firebug」

投稿日:2015年07月18日
最終更新日:

HTMLやCSS,JavaScriptなどでWEBページを構築する際、悩みの種はバグ潰しです。そんな時に頼りになるアドオン「Firebug」を紹介します。

概要

  • Firefoxに組み込むアドオン。JavaScriptのエラー発見やトラフィック分析等に使える。
  • HTMLやCSSの解析もラクラク。WEB開発者なら入れておきたい。
  • 日本語対応。
詳細は以下

インストール

こちらのページにアクセスし、「Add to Firefox」ボタンを押して、アドオンを追加しましょう。ブラウザ再起動は不要です。

使い方

Firebugには様々な機能があります。その中から私が適当に紹介していきます。

エラー確認

まずはFirebugを有効にしましょう。


Firebugを使いたいページで、このアイコンをクリックすれば、Firebugが仕事し始めます。


エラーがあると、こんな感じでエラーの個数を表示してくれます。バグだ!大変だー!…なんて慌てずに、落ち着いてデバッグ画面を出しましょう。ついでに元ファイルの編集準備もしましょう。


Firebugのアイコンをクリックしたら、「コンソール」→「エラー」で、エラー箇所だけ抜き出すことができます。エラーの場所がわかったら、原因を究明して修正をかけましょう。余談ですが、今回例として出ている画面は、私が運営しているMonacoin faucetに新機能を追加するためのテストページです。JavaScriptとPHPでガシガシ作っています。追加時期は未定です。

ネットワークトラフィック分析


Firebugのネットパネルを有効にすると、ページを構成する要素(HTMLファイルやCSS,JavaScript,画像ファイルなどなど)のダウンロード速度等を確認できます。


私が運営するMonacoin faucetのものを出してみました。ファイル群がうじゃうじゃ出てきます。ステータスコードや配信元ドメイン、ファイルサイズ、配信元IPアドレス、ダウンロード時間、タイムラインが表示されています。自分のサイトを持っている方は、一回試してみるといいかもしれません。本気でサイト高速化やサーバー転送量削減を目指すなら、このへんも参考に対策を練っていきます。

このブログを応援する・寄付する

当ブログでは暗号通貨による寄付を募っております。

Bitcoin:

Monacoin:

Litecoin: