Firefox
レッスン29
[Firebug]Web制作のためにHTMLやJavaScriptのチェック機能がほしい
[ 2008.09.12 update]
Web制作のプロ必携の便利機能が満載
「Firebug」は、HTML、CSS、JavaScriptのデバッグなどのWeb制作を支援する機能を豊富に持っており、Webデザイナー、JavaScriptやAjaxの開発者などに愛用されています。
Firebugをインストールすると、デバッグの有効・無効を切り替えるアイコンがFirefoxに追加され、ワンクリックでFirebugのメニューを立ち上げられるようになります。特定のページを表示しながらFirebugを立ち上げると、そのページのHTMLを解析し、構造をわかりやすい形で確認できるようになります。同時に、ページ内の特定の要素（HTMLソース）に適用されているスタイル（CSSファイル）を確認することも可能です。
さらに、HTMLやCSSをその場で編集し、その結果を即時反映させることもできます。元のファイルを変更するわけではないので、編集結果のテスト機能として活用しましょう。
JavaScriptのデバッグ関連でも、生成されるHTMLソースをリアルタイムに確認できるほか、ソース内の任意の場所に監視用のブレークポイント（実行を中断する行）を設定したり、任意のコマンドを任意のタイミングで実行したりなど、プロユースでも満足できる豊富な機能を備えています。
1.Firebugのメニューを表示する
2.ページ内の要素をチェックする
3.HTMLを編集する
4.CSSを編集する
[ヒント]JavaScriptのデバッグをするには
FirebugでJavaScriptのデバッグを行うには、Firebugのメニューで［スクリプト］をクリックします。最初は［スクリプトパネルは停止しています］と表示されますが、［（ドメイン名）で選択された機能を有効にします］をクリックするとデバッグが可能になります。デバッグしたいファイルを選択すると、リストの確認や1ステップずつ動作させながらの挙動の確認などが行えます。
[ヒント]各ファイルの読み込み時間を計測できる
Webページの表示が遅くて訪問者のストレスになっていないか、読み込み時間を計測してみましょう。［接続］をクリックし、［スクリプト］と同様に機能を有効にすると計測されます。HTMLや画像など、各ファイルとトータルの時間をミリ秒単位でチェック可能です。
-
PDF活用術 [Firefoxアドオンのインストール]
WindowsパソコンでWebページをPDFファイルに保存できる？ -
パソコン上達 小ワザ塾 [Firefox版Xmarksのインストールと設定]
IE、Firefox、Safariで同じお気に入りが使える「Xmarks」（2） -
Firefox [FEBE]
インストールした拡張機能をバックアップしておきたい -
Firefox [Foxmarks Bookmark Synchronizer]
複数のパソコンで最新のブックマークを使いたい -
Firefox [NoScript]
セキュリティリスクを減らしてFirefoxを安全に使いたい
- 小林 祐一郎（こばやし ゆういちろう）
1972年新潟県生まれ。プログラマー、雑誌編集、Webディレクターなどを経て、現在は編集・執筆を中心に活動。興味のあるテーマは「人はどうすればネットで“いい思い”ができるのか」。ユーザー視点から、パソコンの利用術やインターネットのコミュニティサービス利用法を研究している。近著に『できるポケット＋ Firefox Mozilla Firefox 3対応』（インプレスジャパン）など。
ブログ：Heartlogic
