CSSやScriptをFirefoxアドオンでデバックチェック

【はじめに】

Firebug は、Web ページを閲覧中にクリック一つで使える豊富な開発ツールを
Firefox に統合します。あなたはあらゆる Web ページの CSS、HTML、及び
JavaScript をリアルタイムに編集、デバッグ、またはモニタすることが出来ます。

というわけで、このFirebugの凄いところの一つに、今表示しているページを
リアルタイムにデバックして表示することが出来るというわけですね。

しかし。。。ここで驚くことは他にもあります。それはこの一文です。

＞CSS、HTML、及び JavaScript をリアルタイムに編集

そうです・・・・このFirebugのすごいところは今表示しているページを編集・・・
要約すると、今表示されているページをプレビューしながら書き換えることが出来るというわけです。

では、いろいろ論より証拠、実際に使ってみた方が早いですね。
まずは、Firebugをダウンロード致しましょう。



【ダウンロード】

【Step1】
Firebugダウンロードに行く

【Step2】
ページ中部にある、Firefoxにインストールをクリックします。
（警告などが出ると思いますが、許可します。）

【Step3】
Firefoxを再起動します。






【実際に使ってみた】

Firebugが動作しているFirefoxの右下の方に書きのように虫っぽいマークが出ると思います。


この虫っぽい（多分虫名はバグ）マークを右クリックして、「Suspend Firebug」を選択すれば、
簡単に、Firebugを停止させることが出来ますので、使用しない場合などはFirebugを
停止させたりしましょう。

といっても、このFirebug自体、動作していてもとても軽いものなので
あまり気にならないとは思います。

それでは、早速HTML&CSS&JAVASCRIPTのデバックをしてみましょう。


【Step1】
まず、チェックしたいサイトにFirefoxで普通にアクセスします。

【Step2】
チェックしたいサイトに来たら、右下の虫っぽいマークを左クリックします。


そしたら、下記のような画面が表示されます。


これで、デバックは完了です。

「えっ！？もう！？」

と思う方もいるかもしれませんが、本当にこれだけです。
たったこれだけの作業で簡単に各サイトのHTMLやCSSをデバックすることが出来ます。

ですが、ただ一言デバックすることが出来ます。といってもなかなか伝わりにくいと思いますので、
実際にFirebugの機能の一つである、リアルタイム編集＆デバックの機能を使ってみましょう。



【HTMLのリアルタイム編集】

まず、上記のFirebugの画面で下記のように調査をクリックします。





そして、調査の状態でブラウザ上で表示されている調べたい部分を下記のようにクリックします。



ポインタされると上記のように青枠で表示されるので、そこをクリックします。

この場合は、当サイト「Sun Eternityのエンブレム」のマウスを乗せると、どのように
画像が変わっているか？そして、マウスを放したときにどのように画像が変わっているのかの
ソース部分をチェックしています。

・・・・・・・・・・・

はい、早速チェックが完了しました。とっても早いですね。

結果は以下のようになりました。



この場合は、たった部分をクリックしただけなのに、そのソースの部分までFirebugが
ユーザーを導いてくれます。

もちろん、CSS部分などがある場合はCSSの部分も表示してくれますし、
上記のようなJavaScriptがファイル別に保存されていても、そのファイルまで表示してくれます。

これにより、Webページ制作者は一回一回ページのソースを表示させ、
各ページにアクセスして検索していくという手間が大幅に省かれたということになります。

さらには、CSSやJavaScriptなどのソース部分も同時に表示してくれるので、
今まで自力でソース部分を探していた人はこのFirebugを使用すれば、
より簡単にデバック＆チェックが行えるということです。

後、ここには書いていませんが画像のプロパティをクリックすれば、画像のサイズなども
表示してくれたりといった、至れり尽くせりの環境となります。

そして、上記に述べた機能ですごい機能といえばリアルタイム編集機能ですね。
早速簡単な例で、使用してみましょう。




【リアルタイム編集機能】

これに関しては、普通にFirebugを開いてHTMLやCSSやJavaScriptに
下記のような感じで書き込んでいくだけでOKです。

書き込んだ後にEnterキーを押せばすぐに有効になります。
このサイトを例にちょっとした簡単な編集をしてみました。



上記の例では、まず調査をクリックして自分の編集したい（今回はタイトル画像)をクリックすれば、
それと同時に左のCSSの方でもその部分のCSSが表示されますので、
それにて編集を行っています。

この、編集ツールの凄いところはなんといっても、リアルタイムでプレビューしながら
作業が 行えるというところとさらにそれが別のファイルだとしても、
そのファイル自体も読み込んで、表示してくれることだと思います。

さらには、右に表示されているCSSの機能は一行ごとにワンクリックでの有効・無効の切り替えが
可能となっており、
たったワンクリックでそのCSSの機能を有効にしたり無効にしたりすることが出来ます。

なので、どのCSSがどんな動作をしているのかなども調べることが出来るというわけですね。
上記の機能はJavaScriptなどにも備わっています。


上記のようなCSSとHTMLのチェック＆デバックだけではなく、
JavaScriptのエラーチェックや編集＆デバックなども行えます。



エラーチェックを行いたいページにアクセスすると、JavaScriptのエラーのあるページは
上記のように表示されるようになっています。

そして、このエラー表示を左クリックするとそのページでのJavaScriptでのエラー構文部分が
表示されるようになっています。

これを詳しくチェックしていけば、どの部分がどのようなエラーを起こしているかを、
簡単に見つけることが出来るのです。主に発見されるエラーは構文の文法ミスなどですね。





【回覧速度のチェック】

このFirebugはWebサイトの回覧速度などもチェックすることが出来ます。
そして、どのファイルがどれだけの時間をかけて表示されるかなどもチェックすることが可能です。

下記のように「接続」をクリックして、三つのを有効にします。



後は、下記のようにFirebugが勝手に表示速度などをチェックしてくれます。




この回覧速度チェックを使用すればどのファイルにどれだけの時間をかけて
表示されているかなどを、簡単に表示知ることができます。


上記には書いていませんが、上記の各ファイル部分をクリックすると
クッキーの詳細URLやサーバーのレスポイント（応答）やサーバーの種類なども
詳細に調べることが出来ます。
ですので、サーバーの応答に関する詳細チェックなどにも使用できると言うことですね。

ここのFC2サーバーはサーバーソフトでもおなじみの「nginx/0.6.32」でした。
低スペックでもたくさんのIPを捌けるということでもとても有名なサーバーですね。




【後書き】

上記にも述べたようにこのFirebugを使用すれば、簡単に
そのページのソースをチェックすることが出来ます。

このFirebugを使用して大手企業などのサイトに行ってみると面白いですよ～
大手企業のウェブサイトは主にプロの方が作成されているため、様々な技術が多用されています。

まさに「まだ見ぬ技術の宝庫」といった感じですね。

よく大手企業のサイトに行くと

「これってどういう風にして動いているんだろ～？」

といったことが良くあると思います。

そんな疑問もこのFirebugを使用すれば、よくわからない構成などもFirebugが調べてくれる
（ソース部分に移動）してくれるため、
この大手企業のWebページの構成(HTML&CSS&JavaScript)なども割とすんなりチェックすることが出来るようになりました。

上記のようなとても便利な機能がたくさん備わっていますので、
Webページ制作する人＆研究している方には自信を持っておすすめできるツールです。

---

関連記事:
HTMLの対応するタグをチェック