HOME

Firebugの使い方

Firebugチュートリアル動画の日本語によるチュートリアル

こちらにとてもやさしいFirebugのJAVASCRIPT用デバッガとしての部分を説明したチュートリアルがありますが英語のため敬遠している人のために、英語のわからない私が動画からなんとなくわかった使い方を解説します。

まずこのチュートリアルで使用している例題用のHTMLをここからダウンロードして下さい。（右クリック「対象をファイルに保存」で適当な場所に保存し解凍して下さい）

すべてのHTMLに共通する<body>要素部分は

<body>
<h1>Firebug for Firefox</h1>
<h2>Stuff to test...</h2>
<ul>
<li><a href="#" onclick="doSomething(); return false;">Do Something</a></li>
<li><a href="#" onclick="doThis(); return false;">Do this</a></li>
</ul>
</body>

となっています。

例題用ページを開く前にFirebugを起動します。

ツール　＞　Firebug　＞　Open Firebug　で起動します。
まずは　test1.htm　を開いてください。

ここで使用する関数は

function doSomething(){
var a = "I love Firebug";
var b = 0;
console.log(a);
}

となっています。
console.log(a);→見慣れない式だと思いますが、これはFirebugのコンソールにjavascriptのログを表示させるものです。
この場合は「変数aの値をコンソールに表示させろ」という意味で、デバッグのためalert(a);として変数を監視するのと同じような用途です。

１．「Console」タブをクリックしてコンソールを開きます。
２．リンク　「Do Something」　をクリックします。

コンソールに変数aの値　I love Firebug　が表示されました。

次に　test2.htm　を開きます。

ここで使用する関数は

function doSomething(){
var a = "I love Firebug";
var b = 0;
console.log(a, b);
}

となっています。
今度は　console.log(a, b);　となって変数b　が加わりました。

先ほどと同じようにリンク　「Do Something」　をクリックします。

結果は

となり
変数aの値　I love Firebug　と変数bの値　0　が表示されています。

次に　test3.htm　を開きます。

ここで使用する関数は

function doSomething(){
var a = "I love Firebug";
var b = 0;
console.log("value for a is %s and the value of b is %d", a, b);
}

です。
今度は　"value for a is %s and the value of b is %d"　の部分が加わりました。
これは指定された書式に変換して出力を行うための記述です。
まず　%sは文字列を表し　%d は整数を表します。この部分にそれぞれ変数a、変数bが代入されますのでこの場合は、
"value for a is　" + 変数a + " and the value of b is " + 変数b　と同じようなことです。

先ほどと同じようにリンク　「Do Something」　をクリックします。

結果は

と表示されます。

%s、%dの他に
%f 浮動小数点数
%o オブジェクトハイパーリンク

があります。

test4.htm　を開きます。

ここで使用する関数は

function doThis(){
var a = [10, 5, 99, 399];
console.info(a);
var b = "this is a test";
console.warn(b);
var c = uc(b);
console.error(c);
}

function uc(s){
return s.toUpperCase();
}

です。三箇所の赤い部分が始めて出てきた式です。
console.info()、console.warn()、console.error()は働きからするとほぼ同じものですが違いは表示される際行頭につくマークがそれぞれ　

、

　となっています。それとconsole.error()はFirebug上ではエラーと同じ扱いになるため強制的にエラーを作りたい場合使用するものと思われます。

console.logと同じく基本的にはコンソールにjavascriptのログを表示表示させるものですが行頭にアイコンが付く点と、式が記載された行にハイパーリンクがつく点のようです。

今度はリンク「Do this」をクリックします。

結果は

となっています。それぞれのアイコンとともにそれぞれの変数の値がきちんと表示されています。
右側のtest4.htm (line 10)の部分がハイパーリンクでクリックすと式が記載された所を表示します。

次に　test5.htm　を開きます。

function doThis(){
var b = "this is a test";
var c = uc(b);
console.log(c);
}

function uc(s){
return s.doUpperCase();
}

関数は　test4.htm　とほぼ同じですがわざと一箇所間違えて記載してあります。
正　→　toUpperCase()
誤　→　doUpperCase()

リンク「Do this」をクリックします。

エラーになりました。エラーの場所は　line15　とわかります。test15.htm（line 15）をクリックしてみます。

エラー箇所である15行目のソース　return s.doUpperCase();　が選択状態で開かれました。

次に　test6.htm　を開きます。

今度は上記関数を実行します。

debugger;が初めてでてきた式です。
debuggerはプログラムの開発時にプログラムの動作状態を確認するために、プログラムコード中に挿入される強制実行停止コードです。

それでは、リンク「Do this」をクリックします。

左にスクリプトが表示され、右には変数の値が表示されています。
１の所が先ほど見た　debugger;　の部分ですが　そこで処理が止まっています。（

　＝　実行する行を表します）

一つ下を実行して見ます。

赤枠のアイコン　Step Into　を一回クリックします。
一つ下をが実行されたと思います。もう一回　Step Into　をクリックします。

右側のウィンドウを見てください。変数aにも値が代入されした。

これを利用すると、ワンステップずつ変数を監視し確かめながら、実行できることがわかると思います。

補足

：Continue　次のブレークポイントが見つかるまでプログラムが実行されます。ブレークポイントが見つからない場合は最後までプログラムを実行します。

：Step Over　コードを１行づつ実行する機能です。関数/メソッドがあった場合は以降スキップします。

function a(){
var c = 1;
debugger;←中断Ａ
c = b(c);←スキップ
alert(c);←実行再開
}

function b(s){
var d = s + 1;
return d;
}
実行すると「中断Ａ」で停止します。その後Step Overをクリックすると　c = b(c);　は処理されず、　alert(c);　から実行再開されます。

：Step Into　コードを１行づつ実行する機能です。関数/メソッドがあった場合はその中にはいって処理を実行します。

function a(){
var c = 1;
debugger;←中断Ａ
c = b(c);←実行再開
alert(c);
}

function b(s){
var d = s + 1;
return d;
}
実行すると「中断Ａ」で停止します。その後Step Intoをクリックすると　c = b(c);　から実行再開されます。

：Step Out　コードの実行を再開し、関数呼び出しの内側から呼び出し元の関数に戻り実行を中断します。

function a(){
var c = 1;
c = b(c);←中断Ｂ
alert(c);
}

function b(s){
var d = s + 1;
debugger;←中断Ａ
return d;
}
実行すると「中断Ａ」で停止します。その後Step Outをクリックすると「中断Ｂ」で停止します。

次に　test7.htm　を開きます。

実行する関数は

です。
var list = document.gertElementsByTagName('li');の部分がエラーとなります。（rが余計に入っている）

実行前に

Options　＞　Break on All Errors をチェックします。

それではリンク「Do this」をクリックしましょう。

エラーの箇所でちょうど　test6.htm　の時のように止まったはずです。　Break on All Errors　をチェックすることで　エラーの前までを実行してエラー箇所で強制実行停止となったわけです。

次に　test8.htm　を開きます。

関数は

です。
console.time("do this");とconsole.timeEnd("do this");が新しい式です。
これを使うことによりスクリプトが要した時間をしることができます。

初め・console.time(name)　～　終わり・console.timeEnd(name)　となります。nameは初めと終わり同じものを記入します。

do this: 0ms　と表示されました。

スポンサードリンク