Firefox 3とFirebugで始めるJavaScript開発

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

この記事を読むのに必要な時間:およそ 4 分

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

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

図10 HTMLタブのオプション

図10 HTMLタブのオプション

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

それでは,次のサンプルコードが埋め込まれたサンプルページ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のこれから,について紹介したいと思います。

著者プロフィール

堀邦明(ほりくにあき)

徳山工業高等専門学校卒業後,ヤフー株式会社に入社。Yahoo! JAPAN トップページのフロントエンドエンジニアとして主にJavaScript,PHPによる開発を行う。

また,個人の活動として,JavaScriptに関するオンライン上のイベント「Roppongi.JS」の企画・主催を行う。