jQueryを使った開発に便利！Firebug + jQuery「FireQuery」
Firefoxを使ってWebシステムを開発する際には必須とも言えるFirebug。そして人気の高いJavaScriptライブラリのjQuery。この二つが組み合わさったとき、これまで以上の魅力が感じられるようになる。
マウスを当てるとそのエレメントがハイライト表示される
そう確信できるのがFireQueryを使った瞬間だ。この二つの融合は、JavaScriptの開発をバーストしてくれるのではないだろうか。
今回紹介するオープンソース・ソフトウェアはFireQuery、Firebugと連携するjQuery開発補助アドオンだ。
FireQueryはconsole.logに吐き出した内容を元に、画面上のエレメントをハイライトしてくれる。例えばconsole.log($(’p'));と出せば、コンソールに出力された jQuery(p)という表示にマウスを当てると、該当部分がハイライト表示になる。どの部分に対して適用されているかがすぐに分かる。
データの閲覧
これはconsoleから実行しても同じなので、表示後に対話的にデバッグを進める際にも役立つ。また、dataを使って値を出力すると、コンソールからデータを見られるようにする機能もある。これはデバッグの文字列を出す他、タイマーを使って定期的に値を変化させることもできる。
FireQueryを使うとjQueryを使ったWebシステム開発やそのデバッグ作業は大幅に効率化されそうだ。単なるデータの操作の他、エレメントの操作の伴うコードできちんと対象のエレメントを捉えているかのチェックにも使えるだろう。
ソース
FireQuery
http://firequery.binaryage.com/
FireQuery :: Add-ons for Firefox
https://addons.mozilla.org/en-US/firefox/addon/12632
darwin’s firequery at master - GitHub
http://github.com/darwin/firequery/tree/master
