【前端调试】console

Console中常用的方法：

（1）console.log()/console.info()/console.warn()/console.error()/console.debug() 可以打印不同类型的值。

console对象的上面5种方法，都可以使用printf风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o, %O）四种。其中，%o占位符，可以用来查看一个对象内部情况。

注：console.log('%o', document.body)等同于按照console.log(document.body)显示，如果是使用'%O'则有所不同，它等同于console.dir(document.body). 对于普通的对象则没有差别。

　　console.log()取代alert()，是因为alert阻断线程运行。

（2）console.table()

可以用于打印对象或数组，在控制器中会以表格的形式显示，属性值都是整齐排列的。
不同于console.log()的树视图，不用每次都手动折叠查看信息。

如果只想显示某一属性，可以将这个属性作为第二个参数传入即可：
console.table(obj, 'name')
显示多个属性，则传入属性的数组，
console.table(obj, ['name', 'age']);

（3）console.group()/console.groupEnd()

作用：如果要输出的信息太多，可以分组显示。

console.group('第一组');
    console.log('一组一条');
    console.log('一组一条');
console.groupEnd();

console.group('第二组');
    console.log('二组一条');
    console.log('二组一条');
console.groupEnd();

 （4）console.assert()

作用：对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台。

var year = 2018
console.assert(year == 2017, '当前者为false时输出错误');

 （5）console.count()

作用：当你想统计代码被执行的次数可以使用，这个方法非常实用！！！

function exec() {
    console.count('代码被执行的次数：');
} 

 

其他不常使用的方法：

（1）console.clear()

作用：在控制台输入来实现清空控制台信息。

（2）console.dirxml()

作用：显示网页的某个节点（node）所包含的html/xml代码
比如，先获取一个表格，再显示该节点包含的代码。
var table = document.getElementById('table1');
console.dirxml(table);
或者直接使用id显示：
console.dirxml(table1);

（3）console.dir()

作用：显示一个对象的所有属性和方法。对DOM结构以对象的方式输出。
console.dir(document.body);

它与console.log()等方法的区别在于，console.log(document.body)只是输出html文档，而console.dir(document.body)则是转换为对象显示。

（4）console.time()/console.timeEnd()

作用：计时

// 计算实例化100000个对象所需的时间 Init Array: 57.504ms (时间每次都会不一致)
console.time('Init Array');    // lable : 'Init Array'
var array = new Array(100000);
for(var i=0; i<array.length; i++){
    array[i] = new Object();
}
console.timeEnd('Init Array');
// 传统的时间差计时：59
var start = new Date().getTime();
var array = new Array(100000);
for(var i=0; i<array.length; i++){
    array[i] = new Object();
}
time = new Date().getTime() - start;
console.log(time)

 （5）console.profile()/console.profileEnd()

作用：查看性能信息，分析程序各个部分运行的时间，找出瓶颈。配合一起使用来查看CPU使用相关信息，在Profiles面板里面查看。

console.profile('Init Array');
var array = new Array(100000);
for(var i=0; i<array.length; i++){
    array[i] = new Object();
}
console.profileEnd('Init Array');

 　　[ 这个函数的使用方法需要继续深入。]

其结果可以存储，一般默认后缀为.cpuprofile，打开是JSON数据。也可以在Profiles中load进来。

（6）console.trace

作用：堆栈跟踪相关的调试，用来跟踪函数的调用轨迹。

比如我想知道某个函数的执行轨迹，可以再其中加入console.trace()方法。

function add(num1, num2) {console.trace(); return num1 + num2;}
function add3(num1, num2) {return add2(num1, num2);}
function add2(num1, num2) {return add1(num1, num2);}
function add1(num1, num2) {return add(num1, num2);}
var a = add3(1, 10);

 　　从上到下，依次显示add()的调用轨迹：add() <-- add1() <-- add2() <-- add3() <-- <匿名>

add() demo.js:6
add1() demo.js:16
add2() demo.js:13
add3() demo.js:10
<匿名> demo.js:19

 （7） console.timeStamp(label)

Log a time stamp with the given label. May be logged to the console or a timeline.

 

console所有的函数：

 

 

Refer:

Chrome 控制台console的用法 : http://www.open-open.com/lib/view/open1421131601390.html

The JavaScript console API : http://www.2ality.com/2013/10/console-api.html

Chrome console : http://www.cnblogs.com/liyunhua/p/4529079.html