THE HAM MEDIA BLOG

Firebugを活用しよう!jQueryの動作チェックに最適な『FireQuery』

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
便利サイト
タグ:
Firefox
jquery
Firebug

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を開きます。

こんな感じの画面です。

FireQuery

Firebugを起動

先程のページでFirebugを起動してみましょう。

FireQuery

HTMLタブので開いたところを見てみると、Firebugのみの時と違って紫の文字の部分があることに気づくと思います。これはすでに読み込まれているjQueryのイベントとか登録されているデータなどを表示しています。

コンソールをみてみる

先程のページを、今度はコンソール画面をひらいてみてみましょう。

FireQuery

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タブでひらいた画面にでてきた紫文字の部分の内容ですね。

コンソール上で出ているタグにマウスをあわせると、それが画面上のどこを指し示しているかがわかるようになります。

FireQuery

動作させると…

実際にページのボタンをクリックしてみましょう。下の画像のように、変化する部分は黄色く変化します。

HTML上で変化するようなことであれば、Firebugオンリーでもその変化はみることができます。FireQueryならjQueryのdataなどの変化も見ることができます。

FireQuery

jQueryを使っていないサイトでjQueryを使う

まーしーさんも書いていましたが、このFireQueryを導入すると、jQuerifyというのが使えるようになります。これは何かというと、jQueryを使っていないサイトでも、あたかもjQueryを読み込んでいるかのように使うことができるようにさせるツールです。

コンソール画面を開き、ボタンを押すと読み込んでくれます。下の画像はlinkerさんのサイトで読み込ませた場合の画像。

FireQuery

読み込ませてどうするの?なんて思う人が多いと思うのですが、たとえばjQueryを使っていないサイトでも、jQuery使わせたらどうなるとか、セレクタを指定してどんなタグがどこで表示されているのかというのを簡単に確認できるようになります。

読み込ませた後に、たとえば$('div')なんてことをコンソールで書いて実行させたら、divの一覧が取得され、コンソールに表示されます。

FireQuery

こんなことで使ってみるだけでもjQueryの勉強になると思います。

FireQueryを使ってjQueryの勉強

さきほどの$('div')とコンソールに入力するのもいいですが、たとえばサイトにjQueryなどのスクリプトをテストしてみたいときなどにテストとして使ってみたり、勉強のためにそこで練習をしてみるなどしてみるのはとても効果的だと思います。

個人的にやってみているのは、まずエディターか何かでスクリプトを書いておいて、試してみたいサイトのコンソールで、それを貼り付けて実行してみるのです。

linkerさんのところでテストしてみましょう。コンソールのjQuerifyをクリックしたあとに、スクリプトを入力して実行。

スクリプトは簡単に、背景色を変えてみるものにしてみます。

$('.member dd.profilebtn , .member dt').each(function(){
	$(this).css({backgroundColor:'#ff00ff'});
});

これを実行すると、下の画像のようになります。

FireQuery

背景色が変化しています。

こんな感じで、jQueryのスクリプトのテストをすることができるのです。

実行結果もエラーなのかどうかというのがコンソール上をみることでわかるので、エラーになっても、すぐに修正することも可能です。

と、こんな感じで簡単にjQueryの勉強をすることができるのです。

FIrebugも活用したらもっともっと便利になりますので、いろいろ試して使ってみてください。

そしてjQueryを使っているサイトをみたら、HTMLタブの部分で、どこにどのようなイベントが割り当てられているのかなどを見て、そしてJSファイルをながめてみるだけでも勉強になると思います。まずはインストールして、使ってみてはどうでしょう?

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/123196931
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。