[FrontPage](/FrontPage)
# FireBug
@[toc]
____
$lsx()
# FireBug Liteの導入のすすめ
FireFoxではFireBugを用いることによってデバッグ状態を確認することが可能です。しかし、IEやSafariではプログラムがどの程度進んだ状態でエラーが起きたのかを把握するのに、alertなり、ページのinnerHTMLで書き換えるなりの処理をしなければなりません。
そこで、[FireBug Lite](http://getfirebug.com/lite.html)の出番です。
使い方は、各ヘッダーに以下の行を追加し、
```
```
htmlタグを
```
```
と変更するだけです。
## 注意
IEでの動作は重いうえに不安定です。事実上、ある変数の中身の確認や、ロギング、console.log(getElementById('..').value)などで、フォームの値の確認でしか使えないと思います。
Safariでは、安定していました。
## Dojoを使う場合
Dojoの場合さらに簡単です。
```
```
dojoを呼び出している行のdjConfigにisDebug:trueを追加するだけで済みます。
フレームワークとデバッガが統合されているので、スクリプトの競合が原理的に起きにくいというメリットがあります。
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(...)を入れずに直接変数を入れるだけで中身を表示することができます。
:例：|
```
>>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](http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038)を使ったほうがいいと思います。
# コメント
#pcomment
---
## Page Navigation
- Canonical URL: https://logue.be/FireBug
- Permalink: https://logue.be/66d5d4e44b8138004c26fba8
- Parent: [/](/66d6273c0e64af17b0d3463f.md)
- Children: 1 total
- [PHPのデバッグ](/66d5d4e64b8138004c26fbab.md)
- Total descendants: 1
- Siblings: 49 of 68 total (19 more not shown; see the page list API below for the full listing)
- [Comments](/66d5d48a4b8138004c26fb4d.md)
- [Ext](/66d5d4a44b8138004c26fb67.md)
- [FF11裏話](/66d5d4a74b8138004c26fb69.md)
- [FoaF](/66d5d4e84b8138004c26fbad.md)
- [FormatExample](/66d5d4ea4b8138004c26fbaf.md)
- [FormatRule](/66d5d4ed4b8138004c26fbb1.md)
- [Glossary](/66d5d4f14b8138004c26fbb3.md)
- [JavaScript](/66d5d4f34b8138004c26fbb5.md)
- [Logue](/66d5d50d4b8138004c26fbcf.md)
- [M3Sakura Make GUI](/66d5d51e4b8138004c26fbdf.md)
- [Marathon-AlephOne](/66d5d5204b8138004c26fbe1.md)
- [MenuBar](/66d5d5224b8138004c26fbe3.md)
- [MinGW](/66d5d5244b8138004c26fbe5.md)
- [NSIS](/66d5d5284b8138004c26fbe9.md)
- [Namazu](/66d5d52a4b8138004c26fbeb.md)
- [Navigation](/66d5d5334b8138004c26fbf3.md)
- [ONScripter](/66d5d5354b8138004c26fbf5.md)
- [PCの紹介](/66d5d5374b8138004c26fbf7.md)
- [Podcastについて](/66d5d5394b8138004c26fbf9.md)
- [PukiPlus](/66d5d53b4b8138004c26fbfb.md)
- [PukiWiki](/66d977b60e64af17b0d350a9.md)
- [PukiWiki Plus!](/66d5d53d4b8138004c26fbfd.md)
- [RMTフィルタ](/66d5d5514b8138004c26fc11.md)
- [RecentChanges](/66d5d5534b8138004c26fc13.md)
- [SMF](/66d5d5554b8138004c26fc15.md)
- [Sandbox](/66d6273c0e64af17b0d3465e.md)
- [Sidebar](/66d978730e64af17b0d3591b.md)
- [Software](/66d5d55a4b8138004c26fc19.md)
- [TTYSMenu](/66d5d55c4b8138004c26fc1b.md)
- [TextFormattingRule](/66d5d5604b8138004c26fc1f.md)
- [TrackBack](/66d5d5624b8138004c26fc21.md)
- [Web素材](/66d5d5644b8138004c26fc23.md)
- [Xfire](/66d5d59d4b8138004c26fc5d.md)
- [YouTube](/66d5d59f4b8138004c26fc60.md)
- [blog](/66d5d5a24b8138004c26fc62.md)
- [dojo](/66d5d8d54b8138004c26ff81.md)
- [jQuery](/66d5d8d94b8138004c26ff85.md)
- [pandora.tv](/66d5d8db4b8138004c26ff87.md)
- [prototype.js](/66d5d8dd4b8138004c26ff89.md)
- [user](/66d6273c0e64af17b0d3466d.md)
- [uupaa-js](/66d5d8df4b8138004c26ff8b.md)
- [zoome](/66d5d8e14b8138004c26ff8d.md)
- [エミルクロニクルオンライン](/66d5d8e34b8138004c26ff8f.md)
- [コメント](/66d977b60e64af17b0d350ce.md)
- [コラム](/66d5d8e74b8138004c26ff93.md)
- [テスト](/66d5d9004b8138004c26ffab.md)
- [ニコニコ動画](/66d5d9024b8138004c26ffad.md)
- [パーティー名](/66d5d9044b8138004c26ffaf.md)
- [ファイナルファンタジー１１](/66d5d9064b8138004c26ffb1.md)
- Last updated: 2024-09-02T16:46:45.781Z by
- Full page listing (all children regardless of count): https://logue.be/_api/v3/page-listing/children?id=66d5d4e44b8138004c26fba8