ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Firefoxを使ってWebシステムを開発する際には必須とも言えるFirebug。そして人気の高いJavaScriptライブラリのjQuery。この二つが組み合わさったとき、これまで以上の魅力が感じられるようになる。


ピクチャ 47.png

マウスを当てるとそのエレメントがハイライト表示される

 

そう確信できるのがFireQueryを使った瞬間だ。この二つの融合は、JavaScriptの開発をバーストしてくれるのではないだろうか。

今回紹介するオープンソース・ソフトウェアはFireQuery、Firebugと連携するjQuery開発補助アドオンだ。

FireQueryはconsole.logに吐き出した内容を元に、画面上のエレメントをハイライトしてくれる。例えばconsole.log($('p'));と出せば、コンソールに出力された jQuery(p)という表示にマウスを当てると、該当部分がハイライト表示になる。どの部分に対して適用されているかがすぐに分かる。


ピクチャ 49.png

データの閲覧

 

これはconsoleから実行しても同じなので、表示後に対話的にデバッグを進める際にも役立つ。また、dataを使って値を出力すると、コンソールからデータを見られるようにする機能もある。これはデバッグの文字列を出す他、タイマーを使って定期的に値を変化させることもできる。

FireQueryを使うとjQueryを使ったWebシステム開発やそのデバッグ作業は大幅に効率化されそうだ。単なるデータの操作の他、エレメントの操作の伴うコードできちんと対象のエレメントを捉えているかのチェックにも使えるだろう。


ピクチャ 48.png

ソース

 

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

 

MOONGIFTの関連記事

コメント

  • MOONGIFTプレミアム
  • Mobile Touch