http://www.joehewitt.com/software/firebug/

'''调试工具'''
{{http://www.joehewitt.com/software/firebug/firebug.png}}
[[http://www.joehewitt.com/software/firebug/|FireBug]]

1.控制台输出
调试Javascript，不必再加入很多的alert了，用Firebug提供的console会方便很多

 1. console.log('width: %d height: %d', width, height);
就会在Firebug控制台显示出数据
{{http://www.encytemedia.com/blog/files/200605120356.jpg}}

当然也可以直接打印对象

 1. var myArray = ['item1', 'item2', 'item3'];
 1. console.log(myArray);
{{http://www.encytemedia.com/blog/files/200605120414.jpg}}

还支持log级别，方便标识不同的情况

 1. console.debug('I am debug');
 1. console.info('I am info');
 1. console.warn('I am a warning');
 1. console.error('I am an error');
{{http://www.encytemedia.com/blog/files/200605120440.jpg}}

2.计算代码运行时间
有时我们为了看到代码的运行效率，经常要加入计算时间的代码，现在可以直接加入了，在要计算的代码前后分别加入如下代码：

 1. console.time(key);
 1. console.timeEnd(key);
详细例子：

 1. importImages: function() {
 1.     console.time('Loading Images');
 1.     this.options.images.collect(function(image) {
 1.       var img = new Image();
 1.       img.src = this.options.filePath + image;
 1.       console.time('event binding');
 1.       Event.observe(img, 'load', this.onImageLoaded.bind(this, img));
 1.       console.timeEnd('event binding');
 1.       return img;
 1.     }.bind(this));
 1.     console.timeEnd('Loading Images');
 1.   },
{{http://www.encytemedia.com/blog/files/200605120448.jpg}}

3.Trace Execution
看看哪些地方引用了某个函数，很方便，对于接手的代码，可能会改动某一个函数而影响很多地方，为了做到心中有数，可以在函数的最后执行console.trace();控制台就会打印出哪些文件引用了该函数。

例子：

 1. importImages: function() {
 1.     this.options.images.collect(function(image) {
 1.       var img = new Image();
 1.       img.src = this.options.filePath + image;
 1.       Event.observe(img, 'load', this.onImageLoaded.bind(this, img));
 1.       return img;
 1.     }.bind(this));
 1.     console.trace();
 1.   },
{{http://www.encytemedia.com/blog/files/200605120503.jpg}}

4.断点
切换到debugger窗口，可以看到当前页相关的js和html代码，在行首双击就可以加入断点
{{http://www.encytemedia.com/blog/files/firebug-debug-console-1-tm.png}}
然后可以随时在console窗口监视变量的值
{{http://www.encytemedia.com/blog/files/200605120612.jpg}}

5.查看动态DOM
切换到Inspector窗口，点击Inspect，然后就可以看到页面任意部分的html代码了，注意，这里看到的html源码，也包含通过js动态生成的html部分，这个特性非常方便，可以很容易的看到最终的渲染结果是否正确。
{{http://qingfeng.ushared.com/blog/wp-content/uploads/2006/07/1.GIF}}