firebug在js调试中的log功能列举
凡是写js或者进行前端开发的人员对firebug都不陌生，firebug在js的调试中功不可没。总的说来，用firebug调试js包括以下几个部分：
1、检查常规错误：这个就是运行js之后，如果有错误的话在ff（或者在使用firebug lite的其他浏览器）右下角就会有相应的提示，最常见的就是一个表示错误的“X”图标，具体就不赘述的，大家都懂；
2、完善的log功能：就是创建了一个console的对象（window.console），它有一些强大的方法帮助我们调试js，详细见下文；
3、控制台的命令行功能：打开firebug的“控制台”面板，在最低端“>>>”符号之后即可输入相应的js代码进行调试，还可以单击右下角的三角按钮展开输入面板已输入多行代码，此时提供了一些命令行便捷方法，比如用$()替代document.getElementById()方法等，更多可以google；
4、断点、单步执行和变量信息：打开firebug的“脚本”面板，可以设定调试时的断点（条件断点）、单步调试（单步进入、单步跳过、但不跳出等），具体打开一看便知。
接下来的代码详细展示firebug的log功能：
View Code
// console.log的使用
// console.log提供了控制台中输出信息的方法
console.log( ' Message start: ' ); // Message start:
var number = 123.123 ;
var int = 10 ;
var string = ' 234 ' ;
var object = { ' name ' : ' chemdemo ' , ' sex ' : ' mail ' };
console.log( ' number= ' , number); // number= 123.123
console.log( ' number=%f ' , number); // number= 123.123
console.log( ' int=%d ' , int ); // int=10
console.log( ' string=%s ' , string); // string=234
console.log( ' object=%o ' , object); // object=Object { name="chemdemo", sex="mail"}
console.log( ' number=%f, int=%d, string=%s, object=%o ' , number, int , string, object);
// number=123.123, int=10, string=234, object=Object { name="chemdemo", sex="mail"}
console.log( ' Message end! ' ); // Message end!
// console.info
// 会在输出到firebug控制台的信息前面加上一个表示注意信息的小图标
function func(a, b) {
return a + b;
}
window.onload = function () {
var object = {name: ' chemdemo ' , sex: ' mail ' };
var number = 12 ;
var string = ' 123 ' ;
var array = [ 123 , 34 , object, number, string];
var node = document.getElementById( ' node ' );
console.info(object);
console.info(number);
console.info(string);
console.info(array);
console.info(func);
console.info(node);
console.info(window);
console.info(document);
console.info(screen);
console.info(navigator);
}
// console.warn
// 会在输出到firebug控制台的信息前面加上一个表示警告的小图标
function func(a, b) {
return a + b;
}
window.onload = function () {
var object = {name: ' chemdemo ' , sex: ' mail ' };
var number = 12 ;
var string = ' 123 ' ;
var array = [ 123 , 34 , object, number, string];
var node = document.getElementById( ' node ' );
console.warn(object);
console.warn(number);
console.warn(string);
console.warn(array);
console.warn(func);
console.warn(node);
console.warn(window);
console.warn(document);
console.warn(screen);
console.warn(navigator);
}
// console.error
// 功能同上，会在输出到firebug控制台的信息前面加上一个表示错误的小图标
// console.assert
// 可以进行断言，接受一个表达式作为参数,当表达式的值为true时，不输出任何信息，为false时，输出一条表示断言失败的错误信息
// console.assert还可以接受更多的参数，一次作为断言失败时显示的信息
function func(a, b) {
console.assert( typeof a == ' string ' , ' arguments a is not a string! ' );
console.assert( typeof b == ' number ' , ' arguments b is not a number! ' );
// dosomething
}
console.log( " func('123', 1) " ); // func('123', 1)
func( ' 123 ' , 1 );
console.log( " func('123', 1) " ); // func('123', 1)
func( 123 , 1 ); // arguments a is not a string!
console.log( " func(new Object(), '123') " ); // func(new Object(), '123')
func( new Object(), ' 123 ' ); // arguments a is not a string!
// arguments b is not a string!
console.log( " func('css', []) " ); // func('css', [])
func( ' css ' , []); // arguments b is not a number!
// console.dir
// 可以将对象或HTML元素的详细信息输出到firebug中，就像在DOM查看器中查看一样
window.onload = function () {
var object = {
a: ' 123 ' ,
b: 44 ,
c: null ,
d: function () {}
};
console.log( ' object information: ' );
console.dir(object);
console.log( ' node information: ' );
console.dir(document.getElementById( ' node ' ));
}
// console.dirxml
// 可以将HTML或XML节点元素的源代码输出到控制台中，就如同在HTML查看器中查看一样
window.onload = function () {
console.log( ' node:div ' );
console.dirxml(document.getElementById( ' node ' )); // 返回div节点（outerHTML）
console.log( ' node.body ' );
console.dirxml(document.body); // 返回body标签及其子节点（outerHTML）
}
// console.trace
// 在函数或方法中添加此语句，可以在firebug的控制台中输出函数被调用的信息及调用该函数的函数或方法
function func(a, b, c) {
console.trace();
}
function test_a() {
func(); // func(a=undefined, b=undefined, c=undefined)
}
function test_b() {
func( 1 , 2 , 3 ); // func(a=1, b=2, c=3)
}
var test_c = function () {
func( ' parameter ' , {a: 1 , b: 2 , c: 3 }); // func(a='parameter', b={a: 1, b: 2, c: 3}, c=undefined)
}
test_a();
test_b();
test_c();
( function () {
func( ' special ' ); // func(a=special, b=undefined, c=undefined)
})();
// console.group,console.groupEnd
// 给输出的log信息分组
// console.group标识一个分组开始，接受一个或多个参数作为该分组的名称或者提示语
// console.groupEnd标识一个分组结束
console.group( ' G a ' );
console.log( ' information ' );
console.info( ' information ' );
console.warn( ' information ' );
console.error( ' information ' );
console.groupEnd();
console.group( ' G b ' );
console.log( ' information ' );
console.info( ' information ' );
console.warn( ' information ' );
console.error( ' information ' );
console.groupEnd();
// console.time,console.timeEnd
// 将他们添加到一段代码的开头和结尾，可以计算并输出执行这段代码所用时间，以毫秒记
// console.time接受一个字符串参数作为这个计算器的名字，在遇到一个同样字符串作为参数的console.timeEnd时就停止计时名输出时间
var sum = 0 ;
console.time( ' sum ' );
for ( var i = 0 ; i < 10000 ; i ++ ) {
sum += i;
}
console.timeEnd( ' sum ' ); // 2ms
// console.profile,console.profileEnd
// 与console.time,console.timeEnd相似，它们输出的是对所包含代码段的性能测试数据
function sum() {
var sum = 0 ;
for ( var i = 0 ; i < 10000 ; i ++ ) {
sum += i;
}
console.log(sum);
}
console.profile( ' sum ' );
sum();
sum();
sum();
sum();
sum();
console.profileEnd( " sum " );
// console.count
// 可以统计其自身被执行的次数，它接受一个字符串参数作为输出到控制台的信息的标题
// 一般用console.count放入到函数或者方法中来查看某个函数或者方法被调用的次数
var num = 0 ;
function funcA() {
num ++ ;
console.count( ' funcA ' ); // funcA n(n表示funcA被调用的次数)
if (num % 2 == 0 ) {
funcB();
}
}
function funcB() {
console.count( ' funcB ' ); // funcB n(n表示funcB被调用的次数)
}
windaow.setInterval(funcA, 500 );