写在前面
做前端开发已经有一两年了吧，对于console对象你应该不陌生吧，那我猜你经常用的是console.log()方法，对于console其它的方法你还了解多少呢？这篇文章我们一起来看看console这个对象的另外一些方法，增加你的一些小技能。
console介绍
console对象其实并不是我们JS内置的对象，而是宿主对象，也就是浏览器对象提供给我们的内置对象，我们可以拿这个对象来调试我们的程序，console对象最大的用处就是这个了。但是除了调试程序之外，它还提供了一个命令行接口，用来和网页代码进行互动，但这个用途貌似被我们忽略很久了。
console对象方法汇总
| 方法 | 描述 | 实例 |
|---|---|---|
| assert() | ssert方法接受两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为false，才会输出第二个参数，否则不会有任何结果。 | // 实例 console.assert(true === false, "判断条件不成立") // Assertion failed: 判断条件不成立 |
| clear() | 清除当前控制台的所有输出，将光标回置到第一行。 | console.clear() |
| count() | 用于计数，输出它被调用了多少次。 | (function() {
for (var i = 0; i < 5; i++) {
console.count('count');
}
})(); |
| error() | 输出信息时，在最前面加一个红色的叉，表示出错，同时会显示错误发生的堆栈。 | console.error("Error: %s (%i)", "Server is not responding",500) |
| group() | 用于将显示的信息分组，可以把信息进行折叠和展开。 | console.group('第一层');
console.group('第二层');
console.log('error');
console.error('error');
console.warn('error');
console.groupEnd();
console.groupEnd(); |
| groupCollapsed() | 与console.group方法很类似，唯一的区别是该组的内容，在第一次显示时是收起的（collapsed），而不是展开的。 | console.groupCollapsed('第一层');
console.groupCollapsed('第二层');
console.log('error');
console.error('error');
console.warn('error');
console.groupEnd();
console.groupEnd(); |
| groupEnd() | 结束内联分组 | console.group('Group One');
console.group('Group Two');
// some code
console.groupEnd(); // Group Two 结束
console.groupEnd(); // Group One 结束 |
| info() | console.log 别名，输出信息 | console.info("runoob") |
| log() | 输出信息 | console.log("runoob") |
| 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); |
| time() | 计时开始 | console.time('计时器1');
for (var i = 0; i < 100; i++) {
for (var j = 0; j < 100; j++) {}
}
console.timeEnd('计时器1');
console.time('计时器2');
for (var i = 0; i < 1000; i++) {
for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('计时器2'); |
| timeEnd() | 计时结束 | console.time('计时器1');
for (var i = 0; i < 100; i++) {
for (var j = 0; j < 100; j++) {}
}
console.timeEnd('计时器1');
console.time('计时器2');
for (var i = 0; i < 1000; i++) {
for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('计时器2'); |
| trace() | 追踪函数的调用过程 | function d(a) {
console.trace();
return a;
}
function b(a) {
return c(a);
}
function c(a) {
return d(a);
}
var a = b('123'); |
| warn() | 输出警告信息 | console.warn("警告") |
console常用方法
1、常见的几种方法
console.log('输出调试信息');
console.info('输出一般信息');
console.error('输出错误信息');
console.warn('输出警告信息');
2、信息分组
console.group('第一组');
console.log('第一组信息');
console.log('第一组信息');
console.log('第一组信息');
console.groupEnd();
console.group('第二组');
console.log('第二组信息');
console.log('第二组信息');
console.log('第二组信息');
console.groupEnd();
3、查看对象信息
var myself = {
name: 'X北辰北',
url: 'www.xbeichen.cn',
age: 25
};
console.dir(myself);
4、显示某个节点的内容
<div id="xbeichen">
<h1>Hello World</h1>
<span>用来测试显示节点内容的console对象方法</span>
</div>
<script>
var dom = document.getElementById("xbeichen");
console.dirxml(dom);
</script>
5、判断变量是否为真
var data = 1;
console.assert(data);
var year = 2020;
console.assert(year == 2019);
第一段代码中结果为真，所以没有输出任何信息，第二段由于结果为假，所以输出了异常信息。
6、追踪函数的调用轨迹
function addNumber(a, b) {
console.trace();
return a + b;
}
var result = addNumber3(22, 22);
function addNumber3(a, b) {
return addNumber2(a, b);
}
function addNumber2(a, b) {
return addNumber1(a, b);
}
function addNumber1(a, b) {
return addNumber(a, b);
}
7、计时功能
console.time('计时器');
for(var i = 0; i < 99; i++) {
for(var m = 0; m < 1000; m++) {
//空循环
}
}
console.timeEnd('计时器');
8、性能分析
function All() {
console.log('这部分可以是你的逻辑操作');
for (var i = 0; i < 10; i++) {
funcA(1000);
}
funcB(10000);
}
function funcA(count) {
for (var i = 0; i < count; i++) {
//空循环
}
}
function funcB(count) {
for (var i = 0; i < count; i++) {
//空循环
}
}
console.profile('性能分析器');
All();
console.profileEnd();
9、表格显示复合型数据
var data = [{
name: 'xbeichen',
url: 'www.xbeichen.cn'
}, {
name: 'Geov',
url: 'www.geov.online'
}];
console.table(data);
总结
以上就是关于console对象中我们常用的几个方法了，除了这些之外还有很多，希望大家自己去学习总结了。