FireQuery で jQuery を使った開発、デバックを効率化する

FireQuery という jQuery を使った開発を支援するための Firefox 向けの（というか、Firebug 向けの）アドオンを見つけたのでメモ。

インストールは下記からできますが、FireQuery は Firebug 向けのアドオンなので、あらかじめ Firebug をインストールしておく必要があります。

• FireQuery :: Add-ons for Firefox

FireQuery is a Firebug extension for jQuery development

FireQuery is a Firefox extension integrated with Firebug

• jQuery expressions are intelligently presented in Firebug Console and DOM inspector
• attached jQuery data are first class citizens
• elements in jQuery collections are highlighted on hover
• jQuerify: enables you to inject jQuery into any web page
• jQuery Lint: enables you to automatically inject jQuery Lint into the page as it is loaded (great for ad-hoc code validation)

DOMの表示等についても変化があったりといろいろと便利な機能がそろっているのですが、今回のお目当ては jQuerify という jQuery を使っていないページで jQuery を有効化する機能。通常自分が開発しているサイトであれば、そこに jQuery を組み込んでしまえば良いのでこんな機能があってもあまり嬉しい感じはしないと思いますが、例えば先日行ったような Node.JS を使ったスクレイピングを行う場合に、対象のページが jQuery を使っていなくてもこの FireQuery を使って対話的にセレクタを書くことができるようになります。

使い方は簡単で、任意のページで Firebug を起動して右上に現れる jQuerify というボタンを押すだけ。押すと同時に画面には This page is now jQueryfied with v#.#.# のようにページで jQuery が使えるようになった旨の表示が出ます。あとはコマンドラインから jQuery オブジェクトが使えるようになっているので、jQuery を読み込んでいるサイトと同じように開発を行う事ができます。