JavaScript console对象方法使用详解

1.console.assert()方法

[javascript]  view plain  copy

1. //示例代码  
2. //声明一个名为People的构造函数  
3. function People(name,age,performance){  
4.         this.name = name;  
5.         this.age = age;  
6.         this.performance = performance;  
7. }  
8. //引用上面的构造函数People,声明变量people  
9. var people =new People("john",20,[80,90,99]);  
10. //调用console.assert()方法  
11. console.assert( people.performance.length == 3, "长度不准确");  
12.   
13. //说明  
14. //上面在调用console.assert()的意思是：  
15. //如果people.performance.length == 3返回的结果是true，  
16. //就不输出"长度不准确"；  
17. //如果people.performance.length == 3返回的结果是false，  
18. //就输出"长度不准确"；  

2.console.clear()方法

[javascript]  view plain  copy

1. //示例代码  
2.     console.log("john");  
3.     console.clear();  
4.     console.log("is a good man");  
5.   
6.     //说明  
7.     console.clear()主要的作用是：  
8.     清空浏览器中的打印输出面板，也就是清空浏览器里面的console  

3.console.count()方法

[javascript]  view plain  copy

1. //实力代码  
2.     //定义一个简单的加法函数addition  
3.     function addition(a, b) {  
4.         //调用console.count()方法  
5.         console.count('addition function called times:');  
6.         return a + b;  
7.     }  
8.   
9.     //声明一个变量  
10.     var sum = 0;  
11.     for(var i = 0; i < 20; i++) {  
12.         if(i % 2 == 0) {  
13.              sum = addition(sum, i);  
14.         }  
15.     }  
16.     console.log(sum);  
17.   
18.     //说明  
19.     //console.count()方法用于统计代码块被执行的次数，  
20.     //console.count()参数是可选的标题，方便阅读  

4.console.debug()方法，console.info()方法 console.warn()方法 , console.error()方法 console.log()方法

[javascript]  view plain  copy

1. //console以上方法支持类似C语言的占位符，  
2.   //如 %s=>字符串, %d=>整数, %f=>浮点数, %o=>object  
3.   
4.   //示例代码  
5.   console.log('I %s more than %d %o.', 'want', 3, {animal: 'dogs', color: 'black'});  
6.   console.debug('I like', {'a': 'Dog', 'b': 'Cat'}, 'A');  
7.   console.debug('I %s more than %d %o.', 'want', 3, {animal: 'dogs', color: 'black'});  
8.   
9.   console.info('I like', {'a': 'Dog', 'b': 'Cat'}, 'A');  
10.   console.info('I %s more than %d %o.', 'want', 3, {animal: 'dogs', color: 'black'});  
11.   
12.   console.warn('I like', {'a': 'Dog', 'b': 'Cat'}, 'A');  
13.   console.warn('I %s more than %d %o.', 'want', 3, {animal: 'dogs', color: 'black'});  
14.   
15.   console.error('I like', {'a': 'Dog', 'b': 'Cat'}, 'A');  
16.   console.error('I %s more than %d %o.', 'want', 3, {animal: 'dogs', color: 'black'});  
17.   
18.   //说明  
19.   //上面几个方法比较简单，就不细说了  

5.console.dir()方法

[javascript]  view plain  copy

1. //示例代码  
2.     //声明一个名为People的构造函数  
3.     function People(name,age,performance){  
4.         this.name = name;  
5.         this.age = age;  
6.         this.performance = performance;  
7.     }  
8.     //引用上面的构造函数People,声明变量people  
9.     var people =new People("john",20,[80,90,99]);  
10.     //调用console.dir()方法  
11.     console.dir( people );  
12.   
13.     //说明  
14.     //在调试JavaScript程序时，有时需要转储对象的详细信息。  
15.     //通过手工编写JavaScript代码可以完成这一工作：  
16.     //针对对象的属性进行循环，将循环到的每一个属性值打印出来；  
17.     //可见，这一过程是比较繁琐的，但是在具备调试工具的浏览器上，  
18.     //通过console.dir()方法可以轻松完成  

5.console.dirxml()方法

[javascript]  view plain  copy

1. //示例代码  
2.     console.log(document.getElementById('myDiv'));  
3.     console.dirxml(document.getElementById('myDiv'));  
4.   
5.     //说明  
6.     输出网页的某个节点（node）包含的html/xml代码，  
7.     与console.log()功能相似  

6.console.group()方法

[javascript]  view plain  copy

1. console.groupCollapsed()方法  
2.       console.groupEnd()方法  
3.   
4.       //示例代码  
5.       console.group('第一组');  
6.       console.log('1.1');  
7.       console.log('1.2');  
8.       console.log('1.3');  
9.       console.groupEnd();  
10.   
11.       console.groupCollapsed('第二组');  
12.       console.log('2.1');  
13.       console.log('2.2');  
14.       console.log('2.3');  
15.       console.groupEnd();  
16.   
17.       //说明  
18.       //console.group()默认展开  
19.       //console.groupCollapsed()默认关闭  
20.       //console.groupEnd()结束分组  

7.console.profile()方法 console.profileEnd()方法

[javascript]  view plain  copy

1. //示例代码  
2.       function AllFunction(){  
3.           for(var i=0;i<100;i++){  
4.               functionA(10000);  
5.           }  
6.           functionB(10000);  
7.       }  
8.   
9.       function functionA(count){ for(var i=0;i<count;i++){} }  
10.       function functionB(count){ for(var i=0;i<count;i++){} }  
11.   
12.       console.profile('profile');  
13.       AllFunction();  
14.       console.profileEnd();  
15.   
16.       //说明  
17.       //分析profile和profileEnd之间代码的执行情况，即js代码的性能分析。  
18.       //注意，如果代码运行时间过短，则在性能分析时可能会被忽略（如上面的函数functionB）:  
19.       //在浏览器的开发工具中的profile面板里可以看到结果  

8.console.table()方法

[javascript]  view plain  copy

1. //示例代码  
2. //数组  
3. var dataArr = [  
4.     [111, 222, 332],  
5.     [442, 555, 666]  
6. ];  
7. console.table(dataArr);  
8.   
9. //JSON对象  
10. var dataJson = [  
11.     {'a':'1.11', 'b':'2.2'},  
12.     {'a':'11.1', 'b':'22.2'},  
13.     {'a':'111.1', 'b':'222.2'}  
14. ];  
15. console.table(dataJson);  
16.   
17. //说明  
18. //table方法用于把data对象用表格的方式显示出来，  
19. //在显示数组或格式一样的JSON数据时很有用：  

9.console.time()方法，console.timeEnd()方法

[javascript]  view plain  copy

1. //示例代码  
2.     console.time('time');  
3.     for(var i = 0; i < 1000; i++) {  
4.         for(var j = 0; j < 1000; j++) { }  
5.     }  
6.     console.timeEnd('time');  
7.   
8.     //说明  
9.     //计算time和timeEnd之间代码块的执行时间并显示  
10.     //从而来判断JavaScript语法的性能  

10.console.trace()方法

[javascript]  view plain  copy

1. //示例代码  
2. function add(a,b){  
3.     console.trace();  
4.     return a+b;  
5. }  
6. var x = add3(1,1);  
7. function add3(a,b){return add2(a,b);}  
8. function add2(a,b){return add1(a,b);}  
9. function add1(a,b){return add(a,b);}  
10.   
11. //说明  
12. //console.trace()用来追踪函数的调用轨迹  
13. //可以查看函数是怎么样调用的！