Firebugを活用しよう！jQueryの動作チェックに最適な『FireQuery』
皆さんご存知のFirefoxのアドオン「firebug」コーダーとかであれば、これを入れている人はかなり多くいると思います！
しかし、中には『linker』のまーしーさんや『スグラボ』のフジカワさんのように、”いまいちFirebugを使いこなせていない”なんて人もいるのではないでしょうか？
今回はそんな方もふくめ「FireQuery」のご紹介を仕様と思います！個人的にかなり便利だと思います。
FireQueryとは？
FireQueryは、Firebugを便利にさせる機能強化アドオンで、Firebugのコンソールで楽々jQueryを使えるようにしたり、DOM画面イベントがどこについているのかとかを確認することができるようになるツールです。
ただのFirebugでもJavaScriptのデバッグや動作の確認をすることはできたのですが、FireQueryを入れることによって、jQueryを使ったサイトでのデバッグや動作確認などがものすごく楽にできるようになります。
FireQueryをインストール
FireQueryは下記リンクよりいけます。他のアドオン同様にFirefoxの機能としていれることができます。
「この実験的なアドオンをインストールします。」にチェックを入れることでインストールのボタンが押せるようになります。
FireQueryの動作をデモで確認
FireQueryを入れてみたら、jQueryを使っているページをみてください。今回はデモページで確認してみましょう。
デモはHTMLをダウンロードして確認ができます。
firequery - GitHub
ダウンロードして、圧縮を展開し、testフォルダのindex.htmlを開きます。
こんな感じの画面です。
Firebugを起動
先程のページでFirebugを起動してみましょう。
HTMLタブので開いたところを見てみると、Firebugのみの時と違って紫の文字の部分があることに気づくと思います。これはすでに読み込まれているjQueryのイベントとか登録されているデータなどを表示しています。
コンソールをみてみる
先程のページを、今度はコンソール画面をひらいてみてみましょう。
jQueryでひろってきたDOM内容などが表示されるようになっております。これはデモページのスクリプトに、コンソールに表示させるためのスクリプトが入っているからです。
どんなスクリプトになっているのか、確認してみましょう。
デモページのスクリプト部分
$('body')
.data('Firebug', 'makes it possible')
.data('jQuery', "is pretty damn cool!")
.data('FireQuery', 'is just a cherry');
$('p').data('hasData', 'yeah!');
$('iframe').eq(0).data('framedata', 1);
$('iframe').eq(1).data('framedata', 2);
$('#main').data('something more complex', {
structured: "yep!",
arr: [1,2,3],
fn: function(a,b) {},
nool: null,
undef: undefined
});
console.log($('body'));
console.log($('.box'));
console.log($('#footer ul'));
console.log($('p'));
console.log($('li'));
console.log($('#nonsense'));
$(function() {
var counter = 0;
setInterval(function() {
$('body').data('counter', counter++);
}, 1000);
});後半のconsole.log()部分が、コンソール画面で表示されていた内容です。前半のdataなどは、HTMLタブでひらいた画面にでてきた紫文字の部分の内容ですね。
コンソール上で出ているタグにマウスをあわせると、それが画面上のどこを指し示しているかがわかるようになります。
動作させると…
実際にページのボタンをクリックしてみましょう。下の画像のように、変化する部分は黄色く変化します。
HTML上で変化するようなことであれば、Firebugオンリーでもその変化はみることができます。FireQueryならjQueryのdataなどの変化も見ることができます。
jQueryを使っていないサイトでjQueryを使う
まーしーさんも書いていましたが、このFireQueryを導入すると、jQuerifyというのが使えるようになります。これは何かというと、jQueryを使っていないサイトでも、あたかもjQueryを読み込んでいるかのように使うことができるようにさせるツールです。
コンソール画面を開き、ボタンを押すと読み込んでくれます。下の画像はlinkerさんのサイトで読み込ませた場合の画像。
読み込ませてどうするの？なんて思う人が多いと思うのですが、たとえばjQueryを使っていないサイトでも、jQuery使わせたらどうなるとか、セレクタを指定してどんなタグがどこで表示されているのかというのを簡単に確認できるようになります。
読み込ませた後に、たとえば$('div')なんてことをコンソールで書いて実行させたら、divの一覧が取得され、コンソールに表示されます。
こんなことで使ってみるだけでもjQueryの勉強になると思います。
FireQueryを使ってjQueryの勉強
さきほどの$('div')とコンソールに入力するのもいいですが、たとえばサイトにjQueryなどのスクリプトをテストしてみたいときなどにテストとして使ってみたり、勉強のためにそこで練習をしてみるなどしてみるのはとても効果的だと思います。
個人的にやってみているのは、まずエディターか何かでスクリプトを書いておいて、試してみたいサイトのコンソールで、それを貼り付けて実行してみるのです。
linkerさんのところでテストしてみましょう。コンソールのjQuerifyをクリックしたあとに、スクリプトを入力して実行。
スクリプトは簡単に、背景色を変えてみるものにしてみます。
$('.member dd.profilebtn , .member dt').each(function(){
$(this).css({backgroundColor:'#ff00ff'});
});これを実行すると、下の画像のようになります。
背景色が変化しています。
こんな感じで、jQueryのスクリプトのテストをすることができるのです。
実行結果もエラーなのかどうかというのがコンソール上をみることでわかるので、エラーになっても、すぐに修正することも可能です。
と、こんな感じで簡単にjQueryの勉強をすることができるのです。
FIrebugも活用したらもっともっと便利になりますので、いろいろ試して使ってみてください。
そしてjQueryを使っているサイトをみたら、HTMLタブの部分で、どこにどのようなイベントが割り当てられているのかなどを見て、そしてJSファイルをながめてみるだけでも勉強になると思います。まずはインストールして、使ってみてはどうでしょう？
