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);

来源:http://www.cnblogs.com/chemdemo/archive/2011/03/01/1968487.html

About 智足者富

http://chenpeng.info

发表评论

电子邮件地址不会被公开。 必填项已用*标注

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>