在设计页面时,经常要记录下页面的一些信息,这个时候,可以使用Firebug中的log日志功能,把一些信息输出到firebug的控制台中,这样就方便调试了。Firebug提供了一个console对象,在插件加载的时候就注册到Javascript的运行环境中去了,可以在程序中直接使用。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);