console对象

console 对象是JavaScript的原生对象，可以将信息输出在控制台。

1、打开控制台

不同系统平台打开浏览器的控制台可能有些不一样，下面以chrome浏览器为例，可以使用下列方式打开：

  • 按F12
  • 鼠标右键里选择“检查”
  • 在右上角的菜单中点击“更多工具/开发者工具”

打开控制台以后，你可以看到下列不同的面板：

Elements：查看网页的HTML源码和CSS代码。 
Resources：查看网页加载的各种资源文件（比如代码文件、字体文件、css文件等），以及在硬盘上创建的各种内容（比如本地缓存、Cookie、Local Storage等）。 

Network：查看网页的HTTP通信情况。 

Sources：查看网页加载的所有源码。 

Timeline：查看各种网页行为随时间变化的情况。 

Profiles：查看网页的性能情况，比如CPU和内存消耗。 

Console：用来运行JavaScript命令。

2、console对象的方法

2.1 log()、warn()、info()、error()、debug()

console.log() ，在控制台中打印信息，它会自动在每次输出的结尾，添加换行符，它可以接受任何字符串、数字和JavaScript对象，也可以接受换行符n以及制表符t。 

console.log(1);  // 1 

console.log('hello');  // "hello"

它可以接受多个参数，将它们的结果连接起来输出。

console.log('a', 'b', 1);  // a b 1

当然 console 可不止这一个方法，它还有：

  • console.info 用于输出提示性信息，会带上一个蓝色图标
  • console.error用于输出错误信息，会在最前面带上红色的叉，表示出错
  • console.warn用于输出警示信息，会在最前面带上黄色三角
  • console.debug用于输出调试信息
console.info(“提醒”);  

console.error(“报错了”);  

console.warn(“警告”);  

console.debug(“调试信息”);

console对象的上面5种方法，如果第一个参数是格式字符串（使用了格式占位符），将依次用后面的参数替换占位符，然后再进行输出。

不过，占位符的种类比较少，只支持下列五种： 

字符（%s） 

整数（%d或%i） 

浮点数（%f） 

对象（%o） 

CSS格式字符串（%c）

例子：

console.log('%s%s',1,2);  // 12

2.2 trace()、clear()

console.trace() 方法显示当前执行的代码在堆栈中的调用路径。

用 console.clear() 清空控制台。

2.3 dir()、dirxml()

console.dir 直接将该DOM结点以DOM树的结构进行输出，可以详细查对象的方法发展等等 

console.log({name: 'tg', age: 12}); 
// Object {name: "tg", age: 12}

console.dirxml 用来显示网页的某个节点（node）所包含的html/xml代码 

<table> 
<thead> 
<tr> 
<th></th> 
<th></th> 
<th></th> 
<th></th> 
<th></th> 
</tr> 
</thead> 
</table> 
<script> 
var table=document.querySelector("table"); 
console.dirxml(table); 
</script>

2.4 group()、groupEnd()、groupCollapsed()

console.group 和 console.groupend 这两个方法用于将显示的信息分组。它只在输出大量信息时有用，分在一组的信息，可以用鼠标折叠/展开。
console.group 输出一组信息的开头
console.groupEnd 结束一组输出信息

console.groupCollapsed 方法与 console.group 方法很类似，唯一的区别是该组的内容，在第一次显示时是收起的（collapsed），而不是展开的。

2.5 assert()

console.assert 对输入的表达式进行断言，接受两个参数，第一个参数是表达式，第二个参数是字符串。只有表达式为false时，才输出相应的信息到控制台，否则不输出。 

var isTrue=true; 

console.assert(isTrue,"我是错误"); 

isTrue=false; 

console.assert(isTrue,"我是错误2");  // "我是错误2"

2.6 count()

console.count 当你想统计代码被执行的次数，这个方法很有用 

function play(){ 
console.count("执行次数："); 

} 
play();  // 执行次数：1 
play();  // 执行次数：2 
play();  // 执行次数：3

2.7 time()、timeEnd()

这两个方法用于计时，可以算出一个操作所花费的准确时间。

console.time 计时开始
console.timeEnd 计时结束 

console.time("array"); 

var a=0; 

for(var i=0;i<100000;i++){ 

  a += i; 

} 

console.timeEnd("array");  // array : 6.063ms

2.8 profile()、profileEnd()

console.profile 和 console.profileEnd 配合一起使用来查看CPU使用相关信息

打开浏览器的开发者工具，在profile面板中，可以看到这个性能调试器的运行结果。

2.9 timeLine()、timeLineEnd()

console.timeLine 和 console.timeLineEnd 配合一起记录一段时间轴

3、自定义console对象的方法

console对象的所有方法都可以被覆盖，也就是说，我们可以自定义方法。

console['log'] = console['log'].bind(console, '温馨提示');