你还只是知道Console.log方法嘛,Console对象其实还有很多方法。下面带大家一起来深入了解下Console对象的各个方法。
1. assert()描述: ssert方法接受两个参数,第一个参数是表达式,第二个参数是字符串。只有当第一个参数为false,才会输出第二个参数,否则不会有任何结果。 实例:
// 实例
console.assert(true === false, "判断条件不成立")
// Assertion failed: 判断条件不成立
运行结果,如下图:
2. clear() 描述: 清除当前控制台的所有输出,将光标回置到第一行。 实例:
console.clear()
3. count() 描述: 用于计数,输出它被调用了多少次。 实例:
(function() {
for (var i = 0; i < 5; i++) {
console.count('count');
}
})();
运行结果,如下图:
4. error()
描述: 输出信息时,在最前面加一个红色的叉,表示出错,同时会显示错误发生的堆栈。 实例:
console.error("Error: %s (%i)", "Server is not responding",500)
运行结果,如下图:
5. group() 描述: 用于将显示的信息分组,可以把信息进行折叠和展开。 实例:
console.group('第一层');
console.group('第二层');
console.log('error');
console.error('error');
console.warn('error');
console.groupEnd();
console.groupEnd();
运行结果,如下图:
6. groupCollapsed()
描述: 与console.group方法很类似,唯一的区别是该组的内容,在第一次显示时是收起的(collapsed),而不是展开的。 实例:
console.groupCollapsed('第一层');
console.groupCollapsed('第二层');
console.log('error');
console.error('error');
console.warn('error');
console.groupEnd();
console.groupEnd();
运行结果,如下图:
7. groupEnd()
描述:结束内联分组 实例:
console.group('Group One');
console.group('Group Two');
// some code
console.groupEnd(); // Group Two 结束
console.groupEnd(); // Group One 结束
8.info()
描述: console.log 别名,输出信息 实例:
console.info("runoob")
9.log()描述: 输出信息
实例:
console.log("runoob")
10. 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);
运行结果,如下图:
11. 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');
运行结果,如下图:
12. 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');
13.trace()
描述:追踪函数的调用过程
实例:
function d(a) {
console.trace();
return a;
}
function b(a) {
return c(a);
}
function c(a) {
return d(a);
}
var a = b('123');
运行结果,如下图:
14. warn() 描述:输出警告信息 实例:
console.warn("警告")
运行结果,如下图:
console上述方法支持printf的占位符格式,支持的占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o):
占位符 | 作用 |
---|---|
%s | 字符串 |
%d or %i | 整数 |
%f | 浮点数 |
%o | 可展开的DOM |
%O | 列出DOM的属性 |
%c | 根据提供的css样式格式化字符串 |
实例:
console.log("%d年%d月%d日",2011,3,26);
%o、%O 都是用来输出 Object 对象的,对普通的 Object 对象,两者没区别,但是打印dom节点时就不一样了:
// 格式成可展开的的DOM,像在开发者工具Element面板那样可展开
console.log('%o',document.body.firstElementChild);
// 像JS对象那样访问DOM元素,可查看DOM元素的属性
// 等同于console.dir(document.body.firstElementChild)
console.log('%O',document.body.firstElementChild);
参考:https://www.runoob.com/w3cnote/javascript-console-object.html