Firefox 3とFirebugで始めるJavaScript開発

第3回Command Line APIとその活用、各タブからのデバッグ方法

さて、前回はConsole APIの解説とそれを利用してのデバッグについて簡単な解説を行いました。

今回は、Firebugに実装されているもう1つのAPIである、Command Line APIや、各タブの機能を利用してのデバッグ方法について解説をしていきたいと思います。

Command Line API

Command Line APIはFirebugのConsoleタブから利用することができます。ただし、グローバルですでに利用されている名前については利用できません。例えばPrototypeやjQueryが利用されているページのConsoleでは$()関数はそれらのライブラリのものが実行されます。

利用できるAPIは以下の通りです。

$(id)
IDを渡すと、そのID属性のHTML要素を返します。
$$(selector)
CSSセレクタを渡すと、該当するHTMLの要素を配列で返します。
$x(xpath)
XPathを渡すと、該当するHTMLの要素を配列で返します。
dir(object)
渡されたオブジェクトのプロパティと値を全て出力します。
dirxml(node)
渡されたノードのソースツリーを表示します。HTMLタブと同様に表示され、クリックすることでHTMLタブで確認することができます。
cd(window)
Conosoleタブのコマンドラインはデフォルトではそのページのトップレベルのウィンドウで実行されます。このコマンドにより、例えばそのページの別フレーム内でJavaScriptを実行したい場合は、このコマンドで実行したい別フレームを指定します。
clear()
Consoleタブの表示をクリアします。
inspect(object[, tabName])
渡されたオブジェクトをもっとも最適なタブで解析します。tabNameを指定すると、そのタブで解析され、そのタブによって解析できないオブジェクトの場合はもっとも最適なタブで解析されます。利用できるtabNameは「html」⁠css」⁠script」⁠dom」です。
keys(object)
渡されたオブジェクトの全てのプロパティ名を配列で返します。
values(object)
渡されたオブジェクトの全ての値を配列で返します。
debug(fn)
指定された関数オブジェクトの先頭にブレークポイントを設定します。
undebug(fn)
指定された関数オブジェクトの先頭のブレークポイントを解除します。
monitor(fn)
指定された関数オブジェクトの呼び出しを監視します。その関数オブジェクトの呼び出し先や関数オブジェクトに渡された引数をconsoleに表示させます。
unmonitor(fn)
monitorによって監視されている関数オブジェクトの監視を解除します。
monitorEvents(object[, types])
渡されたオブジェクトに対するイベントを監視することができます。typesに、監視対象とするイベントのタイプを指定することができます(mouse、key、等)※1
unmonitorEvents(object[, types])
monitorEventsによってイベントを監視されているオブジェクトのイベントの監視を解除します。※1
profile([title])
profileを実行してから、profileEndを実行するまでに実行された関数の解析を行います。
profileEnd()
profileによる解析を停止して結果を表示します。
copy(x)
渡された文字列をクリップボードにコピーします。

Command Line APIを利用してHTMLを解析する

さて、さっそくCommand Line APIを利用していろいろなウェブサイトを解析してみましょう。

まず、Yahoo! JAPANのトップページを開いてください。$$()関数を使って、ニュースへのリンクを抽出してみます。consoleに次の1行を入力して実行してください。

リスト1
$$('a[href]').filter(/dailynews\.yahoo\.co\.jp/);

すると、ニュースへのリンクのみが抽出された結果が表示されます図1⁠。

図1 $$()関数の実行結果
図1 $$()関数の実行結果

また、このコード(リスト1)は次のように$x()関数を用いても同じことが行えます。

リスト2
$x('//a').filter(/dailynews\.yahoo\.co\.jp/);

さらに、以下のコードのように変更することで、抽出したリンクをまとめて開いてくれます(大量のウィンドウが開くので注意してください⁠⁠。

リスト3
var topics = $x('//a').filter(/dailynews/);
for(var i = 0; i < topics.length; i++){
  window.open(topics[i]); // 大量のウィンドウが開くので注意してください。
};

このようにCommand Line APIはデバッグだけでなく、普段のブラウジングにも活用することができます。

関数呼び出しをmonitorで監視する

monitor関数によって、関数の呼び出しを監視してみましょう。次のサンプルスクリプトを見てください。

リスト4 ex01.htmlの抜粋(1)
function Func(arg){
  var type = typeof(arg);
  return type;
};
YAHOO.util.Event.on(window, "load", function() {
  YAHOO.util.Event.on("exec1", "click", function(){Func("str")});
  YAHOO.util.Event.on("exec2", "click", function(){Func(10)});
  YAHOO.util.Event.on("exec3", "click", function(){Func({arg:"arg"})});
});

Funcという関数は、渡された引数の型を返すだけの単純な関数です。exec[1-3]というIDを持つHTMLを用意して、それぞれ「文字列」⁠数値」⁠オブジェクト」を渡すようになっています。

リスト5 ex01.htmlの抜粋(2)
<div id="exec1">exec1(str)</div>
<div id="exec2">exec2(num)</div>
<div id="exec3">exec3(obj)</div>

これらが記述されたページopen(this.href);return false" onkeypress="window.open(this.href);return false">ex01.htmlを開き、monitor関数によってFunc関数を監視してみましょう。consoleに、次の1行を入力してください

リスト6
monitor(Func);

この状態でそれぞれの要素をクリックすると、次のように表示されます図2⁠。

図2 monitor()関数による監視
図2 monitor()関数による監視

このように、monitorによって監視されている関数が呼び出されるたびに、どのような引数で呼び出されたかがconsoleに出力されます。

また、引数がオブジェクトであったり、HTMLの要素の場合はそれぞれconsole.logの出力と同じように、適切なタブへのリンクとなっているため、特にその様な要素を引数として渡す関数の監視のデバッグに便利です。

monitorEventsでイベントを監視する

moniorEventsを利用して、ドキュメントの全てのクリックを監視してみましょう。

以下のように、第1引数に"document.body"を渡すことで、そのドキュメントにおける全てのイベントを監視させることができます。なお、今回はclickのみを監視したいため、第2引数として"click"を渡します。

リスト7
monitorEvents(document.body, "click")

先ほどのページopen(this.href);return false" onkeypress="window.open(this.href);return false">ex01.htmlで上記のスクリプトを実行し、ドキュメント内の適当な場所をクリックしてみてください。

すると次のようにclickによって発生したイベントがconsoleに出力されます図3⁠。

図3 monitorEvents()関数による監視
図3 monitorEvents()関数による監視

例えば、サンプルページの「Firebug sample.」という文字の部分をクリックすると、次のようにイベントオブジェクトを参照することができます図4⁠。

図4 Firebug sample.クリック時のイベント
図4 Firebug sample.クリック時のイベント

XML HTTP Requestを確認する

さて、APIの解説は以上にして、ここからはそれ以外のFirebugを利用したデバッグについて説明します。

Firebugでは、XML HTTP Requestの内容を内容を確認することができます。まずは、FirebugでXML HTTP Requestの表示が有効になっているかを確認してみましょう。consoleタブのoption図5において、⁠Show XMLHttpRequests]の部分にチェックが入っていればOKです図6⁠。

図5 consoleのオプション
図5 consoleのオプション
図6 オプション一覧分
図6 オプション一覧

XML HTTP Requestの内容を確認してみましょう。Yahoo!JAPAN トップページを開いてください。その後、トピックスの「エンタメ」タブをクリックしてみてください図7⁠。

図7 トピックスタブ一覧
図7 トピックスタブ一覧

すると、consoleタブに次のような表示がされたと思います。

図8 XML HTTP Requestの表示
図8 XML HTTP Requestの表示

さらに、クリックするとXML HTTP Requestの詳細を参照することができます図9⁠。

図9 XML HTTP Requestの詳細
図9 XML HTTP Requestの詳細

ここでは、リクエストによって渡されたパラメータ「Params」とHTTPヘッダ「Headers⁠⁠、レスポンス「Response」を参照することができます。

このようにFirebugでは、XML HTTP Requestを利用したJavaScriptのデバッグを容易に行うことができます。

HTMLタブでHTMLのリアルタイム変化を監視

Firebugでは、JavaScriptによるHTMLの変化をリアルタイムに監視することができます。また、変化したHTMLをハイライトさせて表示することもできます。このハイライト表示のために、HTMLタブのオプションで[Highlight Changes]⁠Expand Changes]⁠Scroll Changes Into View]にチェックをいれましょう図10⁠。

図10 HTMLタブのオプション
図10 HTMLタブのオプション

これらをONにすることで、変化されたHTMLを追跡しやすくなります。

それでは、次のサンプルコードが埋め込まれたサンプルページopen(this.href);return false" onkeypress="window.open(this.href);return false">ex02.htmlを用意しましょう。

リスト8 ex02.htmlの抜粋
YAHOO.util.Event.on(window, "load", function() {
  YAHOO.util.Event.on('exec', 'click', function(e){
    var margin = 0;
    var timer = setInterval(function(){
      var el = document.getElementById('move');
      console.debug(margin);
      margin += 10;
      YAHOO.util.Dom.setStyle(el, 'margin-left', margin+'px');
      if(YAHOO.util.Dom.getStyle(el, 'margin-left')=='500px') clearInterval(timer);
    }, 50);
  });
  YAHOO.util.Event.on('exec2', 'click', function(e){
    var el = document.getElementById('color');
    if(YAHOO.util.Dom.hasClass(el, 'red')){
      YAHOO.util.Dom.replaceClass(el, 'red', 'green');
    } else if(YAHOO.util.Dom.hasClass(el, 'green')){
      YAHOO.util.Dom.replaceClass(el, 'green', 'blue');
    } else if(YAHOO.util.Dom.hasClass(el, 'blue')){
      YAHOO.util.Dom.replaceClass(el, 'blue', 'red');
    }
  });
});

また、HTMLも用意します。

リスト9 ex02.htmlの抜粋(2)
<div id="move">Move!</div>
<div id="color" class="red">Color!</div>
<button id="exec" type="submit">Move!</button>
<button id="exec2" type="submit">Color!</button>

次のようなページが表示されるので、タブをHTMLに切り替えて、Move!とColor!のボタンをそれぞれクリックしてみましょう図11⁠。

図11 サンプルページ
図11 サンプルページ

すると次のようにHTMLタブで変化したHTMLの部分がハイライトして表示されると思います図12⁠。

図12 HTMLタブで変化したHTMLの部分がハイライト表示
図12 HTMLタブで変化したHTMLの部分がハイライト表示

このように、HTMLタブではHTMLの変化をリアルタイムに監視を行うことができます。この例では、第1回で取り上げたFirebugのメリットの一つ「リアルタイム性」の部分を実際に体感できたと思います。

次回予告

さて、次回はscriptタブでのデバッグ方法、Firebugの拡張アドオン「YSlow⁠⁠、Firebugのこれから、について紹介したいと思います。

おすすめ記事

記事・ニュース一覧