話題のナレッジベース | Knowledge Base Weblogs space
HOMEBlogs index Web2.0/Ajax >> space
space space
space
space
space
space
May 20, 2007 space
   space
space

Ajax 最強のデバッグツール"FireBug 1.0"

space

Ajax Webアプリケーションの開発者には、WebブラウザとしてFirefoxを愛用しているユーザが多い。その理由のひとつに豊富なエクステンション機能が挙げられる。Firefoxを使っているからエクステンションを使っているというよりも、エクステンションを使いたいからFirefoxを使っているという感じだ。そしてAjax Webアプリケーションの開発において必須ともいえるエクステンションに、Firebugがある。
 

firebug01.jpg

space

 
 Firebugの最新版となるFirebug 1.0が公開された。Firefoxのエクステンション自動アップデート機能ですでに1.0にアップデートしたデベロッパも多いだろう。1.0が公開されたこの機会に、デベロッパに人気の高いFirebugエクステンションを紹介したい。
 
 
 Firebugとは
 
 FirebugはFirefoxエクステンションのひとつ。Firefoxで閲覧しているページの内容を分析し、編集、デバック、モニタリングなどを実施することができる。HTML、JavaScript、CSSなどページを構成している要素に対して編集やモニタリング、デバッグを実施することができ、扱いやすさからAjax Webアプリケーションの開発やシンプルなHTMLページの作成においても重要なツールとみられている。
 
 
screenHome-using.gif Firebugは「Mozilla」→「Firefox Add-ons」→「Firebug」から「Install now」を選択してインストールするか、Firebugのホームページ( http://www.getfirebug.com/ )から「INSTALL FIREBUG 1.0 FOR FIREFOX」を選択してインストールすればいい。エクステンションインストールの手順はほかのエクステンションと同じだ。
 
 
 Firebugは最初の状態では有効になっていないので、メニューから[View]→[Firebug]を選択して表示させるか、F12キーを押して表示される。別ウィンドウで表示させたければCtrl + F12を押せばいいし、ツールバー用のアイコンが用意されているのでこちらを追加して使ってもいい。最初に表示させるとFirebugを有効にするかどうか尋ねてくるので、「有効にする」を選択する。
 
 
screenErrors-indicator.gif Firebugの機能で最も理解しやすいのはインスペクトビュー機能だろう。Inspectボタンを押してからページにマウスを持っていくと、要素ごとに選択が実施され、対応するHTML要素も呼応して表示される。HTML内容の編集もその場で実施でき、即時ビューに反映される。HTMLデザインのチェックをする上で便利な機能だ。
 
 
 1.0ではとくにCSS系の機能の向上がめざましい。CSSの内容をリアルタイムに編集できるようになったほか、編集も↑↓キーに便利なショートカットが設定されるなど、細かい部分での使い勝手の向上も目をみはるものがある。
 
 
 レイアウト機能もかなり便利だ。右下の画面をレイアウト表示にして、マウスをレイアウトの上に持っておくと対応する部分がページビューに表示されるようになる。ルーラも表示されるなどかなり本格的だ。もちろんレイアウトで表示している数値もリアルタイムに編集して表示の変更を試すことができる。
 
 
screenHome-net.gif Firebugでは静的にページを解析するだけではなく、ページの読み込みに対して動的な解析も実施できる。ページロードにおいてボトルネックになっている部分を簡単に解析できるほか、HTTP/XMLHttpRequestにおいてやりとりされている内容も簡単に解析できるためWebアプリケーションのデバッグにも便利。
 
 
 Firebugの最大の特徴はJavaScriptのデバッグ機能だ。これら機能の強化も実施されている。ブレークポントに条件が指定できるほか、変数のモニタリング、1行づつ指定してのステップ実行などは特に便利な機能といえる。この機能を使いたいためにFirebugをインストールしているというデベロッパも多いだろう。
 
 
 HTML、CSS、DOMがリアルタイムに簡単に変更できるようになり、結果が即時Firefoxに反映されるようになった点が高く評価できる。従来の0.4.1ではそのあたりの機能は弱かったため、別途エクステンションをインストールして併用していたたデベロッパも多かったはずだ。1.0からは JavaScriptのコーディングチェックにもWebデザインチェックにもFirebug 1.0を活用できるので、Webデザイナーにも常用ツールとしてお勧めできるエクステンションになったといえそうだ。
 
 
 まだFirebugを使ったことがないというデベロッパやWebデザイナーは、よい機会なのでぜひ一度触れてみてほしい。気に入る機能がどれかひとつは見つかるのではないかと思う。
 
 

space
HOMENews BlogsWeb2.0/Ajax | May 20, 2007 |  twitter Livedoor Buzzurl はてな Yahoo!ブックマーク人が登録
space


space Entries of this Category
space

  Next >> 鼻毛カッター 海外ではジェントルカット 紳士たる者鼻毛を伸ばすな・・と! >> 

日本では鼻毛カッターですが、海外ではジェントル・カット(Gentle Cut)と言うんですね。。勉強になります。紳士たる者鼻毛を伸ばすな・・と!ちょい悪オヤジも鼻毛が出てちゃ、...»この話題を見る…


  Previous << MMORGゲームを自動操縦ゴーストリプレイで快適 << 

ゴーストリプレイは、MMORGオンラインゲームの自動操作(マクロ)、狩り操作の自動化、速度変更、メモリ編集、パラメタ変更、多重起動などを行えるようにするためのソフトです。英雄、... »この話題を見る…


space
space
Welcome to knowledgeBase  Blogs  ▲TOP