JavaScript Console 对象

控制台console对象方法大全

一、console 与 alert

console与alert是前端在调试页面时最常用的两种方法啊。但是很多过来人都会推荐使用console而非alert。这是因为：

1. alert会阻断线程的运行，需要手动的点击【确定】按钮才可以继续加载页面，或是其他的alert信息；
2. 若调试结束后忘记删除alert调试代码，会影响用户体验度。

运行如下代码：

在浏览器中打开，效果如下：

这个显示是alert的信息，同时我们发现页面红框，在我们点击【确定】按钮之前是一个一直加载的状态，并且没有输出console相关信息，就是如果不删除相应的alert相应调试代码，就会阻止页面加载，这在我们项目开发中是不想看到的。
但是我们的console就可以在不影响代码加载的情况下进行调试。

二、console的方法

平时我们使用最多的就是console.log()，但是除此之外console还有好多方法。
执行代码如下：

console.dir(console)

在控制台中我们可以发现console有如下方法：

console 常用的一些方法

1.console.log()：调试中最常用的方法，用于在控制台窗口显示信息。

console.log(Head_Bird);   //Head_Bird

2.console.warn()：输出信息时，在最前面加一个黄色三角，表示警告

console.warn('输出警告信息')； //输出警告信息

3.console.error()：输出信息时，在最前面加一个红色叉，表示出错

console.error('输出错误信息')； //输出错误信息

4.console.assert()：用来验证某个条件是否为真，如果是假，则显示一条事先指定的错误信息

console.assert(true == false, '判断条件不成立')； //判断条件不成立

5.console.time()和console.timeEnd()：用于计算一个操作所花费的准确时间

//time: 0.06ms
console.time('time');
for (var i = 0; i > 100000000; i++){}
console.timeEnd('time')

6.console.dirxml()：用于显示网页元素的代码结构

//显示当前元素的代码结构
var oDiv = document.getElementById('one');
console.dirxml(oDiv)

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

 console.group('组1')
 console.log('组1信息01');
 console.log('组1信息02');
 console.groupEnd('组1')

 console.group('组2')
 console.log('组2信息01');
 console.log('组2信息02');
 console.groupEnd('组2')

8.console.trace()：追踪函数的调用过程

function d(a) { 
  console.trace();
  return a;
}
function b(a) { 
  return c(a);
}
function c(a) { 
  return d(a);
}
var a = b('123');

9.console.table()：将复合类型的数据转为表格显示。

var arr= [ 
      { num: "1"},
      { num: "2"}, 
      { num: "3" }
   ];
console.table(arr);

var obj= {
     a:{ num: "1"},
     b:{ num: "2"},
     c:{ num: "3" }
};
console.table(obj);