FrontPage

FireBug


FireBug Liteの導入のすすめ

FireFoxではFireBugを用いることによってデバッグ状態を確認することが可能です。しかし、IEやSafariではプログラムがどの程度進んだ状態でエラーが起きたのかを把握するのに、alertなり、ページのinnerHTMLで書き換えるなりの処理をしなければなりません。

そこで、FireBug Liteの出番です。

使い方は、各ヘッダーに以下の行を追加し、

<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

htmlタグを

<html debug="true">

と変更するだけです。

注意

IEでの動作は重いうえに不安定です。事実上、ある変数の中身の確認や、ロギング、console.log(getElementById('..').value)などで、フォームの値の確認でしか使えないと思います。

Safariでは、安定していました。

Dojoを使う場合

Dojoの場合さらに簡単です。

<script type="text/javascript" src="/js/dojo/dojo.js" djConfig="parseOnLoad: true,isDebug:true"></script>

dojoを呼び出している行のdjConfigにisDebug:trueを追加するだけで済みます。

フレームワークとデバッガが統合されているので、スクリプトの競合が原理的に起きにくいというメリットがあります。

#ref(): ERROR: File not found: "firebug.JPG" at page "FireBug"

http://downloads.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_Button.html

FireBugのコンソールの使い方

console.log(変数,変数,'メッセージ',変数)

基本的にはこのように使用します。メッセージを入れたい場合は、''や""でくくって関数を入れたい場合はそのまま,(カンマ)区切りで追加します。

console.log('メッセージ',関数)

たとえば、prototype.jsを使用しているときにprototypeのバージョンを見たい場合は、変数Prototype.Versionにprototype.jsのバージョンが格納されているため

console.log('Prototype Version:',Prototype.Version);

というようにいれます。

なお、FireBugの場合は、console.log(...)を入れずに直接変数を入れるだけで中身を表示することができます。

例:
<input type="text" id="hoge" value="foo" />
>>console.log(document.getElementById('hoge').value)
foo

console.dir()

関数が配列だった場合、そこの部分がリンクになりクリックすることでどういう値が入っているかなどを見ることができますが、IEではバグが発生した時点で処理が中断するという仕様が存在するため、お勧めできません。そこで、console.dirを使用します。

たとえば

data = {'electronica':['house','techno','Dram\'n Bass'],'jazz':['swing','acid jazz']};

のような配列があった場合、これを用いることで

>>console.dir(data)
'electronica':[
 [0]:house
 [1]:techno
 [2]:Dram'n base
],
'jazz':[
 [0]:swing
 [1]:acid jazz
]

という感じでわかりやすく出力してくれます。

これは、JSON出力のデバッグなどで役立つと思います。

また、配列の中に以下のように関数が含まれていた場合は、単にfunction(){}と出力されます。

funcs = {
 init:function(){
  ...
 },
 version: 1.0,
 flag: false,
 getData(url){
  ...
 }
}
>>console.dir(funcs)
funcs
 'init':function(){}
 'flag': false
 'getData':function(url)

console.info(), console.warn()

いわゆるスタブだったり、今後変更の可能性がある場合メモとして使います。

あくまでも、console.logにアイコンが出る程度の違いで、たとえば

console.info('XHRのデーター取得成功');

とか、

console.warn('hogeが定義されていないようです');

みたいな場合に使います。

console.error()

エラーメッセージとして処理したい場合はこれを使います。たとえばJavaScript的にはエラーが起きていないくても、明らかに問題がある場合console.logの代わりに使うことでエラーだと他の人に知らせることができます。

try{
 ...
}catch(e){
 console.error('○○の×でエラー発生!',e);
}

これは、try{}内の処理でエラーが発生した場合、コンソールログにそのエラー内容を出力するコードです。

DOMボタン

FireBugのDOMボタンは、マウスオーバーした場所のオブジェクトの全タグをコンソール画面に出します。

ただし、IEでは動作が重い上に処理が遅いため、IE Developer Toolbarを使ったほうがいいと思います。

コメント

No comment. Comments/FireBug?