FirefoxとFirebugの使用方法

FirefoxとFirebug

Firefoxは、世界中で利用者が急増中の優れたウェブブラウザです。

Firebugは、JavaやCSSのデバッグなどを行えるFirefoxのアドオン(拡張機能)です。 ライバルサイトの分析にも使うことが出来ます。

Firefoxのインストール

Mozilla JapanにアクセスしFirefoxをインストールして下さい。

FireDictionary（英和辞書）をインストール

FireDictionaryをインストールしておけば、英単語にマウスを乗せた際に、画面サイドに和訳が表示されます。

FireDictionaryにFirefoxでアクセス
ダウンロード → Install → 今すぐインストール → Firefoxを再起動
GENE95 辞書から、辞書コンテンツをダウンロードし解凍
FireDictionaryを起動（ツール →FireDictionaryまたはAlt＋M）
サイド画面のInstallをクリックし、ダウンロードした辞書のGENE.TXTを選択
Firefoxを再起動

※ダウンロード中に画面上部に「あなたのコンピューターを保護するために、Firefoxにこのサイトはソフトウェアのインストール要求ができない設定になっています」と表示されるので、「設定を変更 → 許可」と進みます。

• FirefoxのUser Agent（ユーザーエージェント）変更方法
• Firefox利用者急増中、ブラウザによる見え方の違い

Firebugでライバルサイトを丸はだか

Firebugでは、ローカル上の自分のサイトだけではなく、ライバルとなる他人のサイトの中身も見ることが出来ます。

Firebugのインストール

Firefoxをインストールしたら、Firebugをインストールします。

ツール → アドオン → 新しい拡張機能を入手

Firefox用アドオン入手画面が開いたら下記の通りインストールします。

カテゴリ別一覧にある開発者向けツール → Firebug 日本語版 → インストール → 署名がありませんと出ますが今すぐインストールを実行 → Firefoxを再起動して完了

Firebugの起動

Firefoxを起動しただけではFirebugは使えません。

起動するには、キーボードのF12を押すか、ツール → Firebug　→ Firebugを開くにチェックを入れます。（Firebugを無効のチェックは外します）

Ctrlキー ＋ F12キーを押すと、Firebug が別ウィンドウで開きます。

サイトの構造を調べる

調査タブで、調べたい要素htmlソースやCSSが表示され、編集タブではリアルタイムに編集作業が行えます。

接続タブ（ネットワークモニタリング機能）を使うと、ページを表示するのにどのファイルの読み込みでロスしているかが調べられます。

JavaScriptデバッグ

デバッグとは、プログラムの誤り（バグ）探して取り除く作業のことで、デバッグを支援するソフトのことをデバッガといいます。 Firebugは、高機能のJavaScriptデバッガを備えているので、プログラムを1行ずつ進めたり、一時停止したり、変数の値を確認したりすることができます。

• JavaScriptデバッグ機能の使い方