Javascript中你不知道的console用法(2)

在Javascript中你不知道的console用法(1)中介绍了console对象中的assert,clear,count,countReset等方法。

本文接着介绍其它你不知道的console对象的方法。

输出错误信息console.error()

打印一条错误信息，使用方法和前文中提到的console.log()方法一样也可以使用格式化字符串。 但该方法打印出的内容是红色的，而且可以展开显示调用堆栈。

分组输出内容

分组输出内容要两个方法配合使用

1. console.group()和console.groupEnd()
2. console.groupCollapsed()和console.groupEnd()

用法

1、console.group()和console.groupEnd()配合使用

参数标记可以不传，调用group()方法告诉控制台要新建一个[标记为标记的]分组， 在调用groupEnd之前输出的内容会被输出到一个里面。

分组是可以嵌套的，但要正确的调用groupEnd()方法结束分组。

console.group([标记])
console.log();
console.error();
console.xxx();
console.groupEnd([标记]);

2、console.groupCollapsed()和console.groupEnd()

和1用法一样，不过该方法输出的是折叠的，要点击展开才能看到

例子

console.group();
console.log('何方博客');
console.error('出现错误');

console.groupCollapsed('分组名');
console.log('内分组');
console.groupEnd('分组名');

console.log('外分组');
console.groupEnd();

输出带叹号的信息 console.info()

该IE中测试会在内容前面加个感叹号:fa exclamation-circle:输出且没有格式化效果， 但在Chrome中测试并没有:fa exclamation-circle:且和console.log()方法效果完全一致。

记录性能信息

该方法非标准方法，在有些浏览器上可能没有实现， 就算实现了能调用也可能没有任何效果 若要统计一段代码的执行时间可以使用下面介绍的console.time()

记录性能信息和分组输出内容一样，要两个方法配合使用

1. console.profile()
2. console.profileEnd()

用法

console.profile([标记])//开始记录

//在这里执行要记录的代码

console.profileEnd([标记])//结束记录

例子

console.profile()//开始记录

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

}

console.profileEnd()//结束记录

输出表格 console.table()

调用该方法可以把数组或对象输出为表格的形式

用法

数据可以是对象或数组或对象数组 数据为对象数组时，可使用第二个参数指定要显示的字段

console.table(数据[,要显示的列数组]);

例子

var hefang = {
    name: '何方',
    email: 'he@iamhefang.cn'
};

var xiaoming = {
    name: '小明',
    email: 'ming@xxx.xxx'
};

var arr = ['何方博客','https://iamhefang.cn'];

console.table(hefang);
console.table(arr);
console.table([hefang,xiaoming],['email']);

统计代码执行时间

统计代码执行时间和分组输出内容一样，要两个方法配合使用

1. console.time()
2. console.timeEnd()

用法

console.time([计时器名称])//开始计时

//在这里执行要计时的代码

console.timeEnd([计时器名称])//结束计时

例子

console.time()//开始计时

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

}

console.time('inner');

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

}

console.timeEnd('inner')

console.timeEnd()//结束计时

添加时间标记 console.timeStamp()

向浏览器的 Performance 或者 Waterfall 工具添加一个标记。 这样可以让你将代码中的一个点和其他在时间轴上已记录的事件相关联， 例如布局事件和绘制事件等。

该方法为非标准方法

用法

console.timeStamp([标记]);

输出警告 console.warn()

该方法和console.error()一样， 支持格式化输出，可以展开查看堆栈， 不过该方法输出的内容是黄色的

输出调用堆栈console.trace()

调用该方法可以输出从代码执行到当前位置的调用堆栈信息

用法

console.trace([标记]);

例子

function func1(){
    console.trace();
}
function func2(){
    func1();
    console.trace('other trace');
}
function func3(){
    func2();
}

func3();