console
对象拥有多种方法可以更好的呈现信息。几种console
对象常用的方法:
-
console.log()
打印字符串 -
console.debug()
打印调试信息、console.info()
打印提示信息、console.warn()
打印警告信息、console.error()
打印错误信息 -
console.table()
查看对象信息 -
console.time()
、console.timeEnd()
性能测试 -
console.assert()
判断真假 -
console.count()
统计次数 -
console.group()
、console.groupEnd()
、console.groupCollapsed()
分组 -
console.dir()
交互式列表
console.log()
它可以用来输出一个变量或输出一个字符串。
console.log("Hello");
const str="Hello";
console.log(str);
console.log()
的参数可以有多个,输出的结果以一个空格隔开。
const str1="hello";
const str2="world";
console.log(str1,str2);
运行效果:
console.log()
可以使用C语言printf()
风格的占位符,不过支持的占位符种类较少,只支持字符串(%s)、整数(%d或%i)、浮点数(%f)和对象(%)。
console.log("%d年%d月%d日",2016,12,30);
运行效果:
console.debug()、console.info()、console.warn()、console.error()
这四个方法的使用方法跟console.log()
一样,差别在于输出的颜色与图标不同。
console.log("log");
console.debug("debug");
console.info("info");
console.warn("warn");
console.error("error");
console.table()
const people={
"person1":{"fname":"san","lname":"zhang"},
"person2":{"fname":"si","lname":"li"},
"person3":{"fname":"wu","lname":"wang"}
};
console.table(people);
运行效果:
console.time()和console.timeEnd()
记录代码运行花费的时间。
console.time("test");
const arr=[];
for(let i=0;i<100000;i++){
arr.push({"key":i});
}
console.timeEnd("test");
运行效果:
console.assert()
cnosole.asseert()
类似于单元测试中的断言,用来判断当前值的真假,当表达式为false
时,输出错误信息。
const arr=[1,2,3];
console.assert(arr.length===2);
运行效果:
console.count()
调试代码时,我们经常需要知道一段代码被执行了多少次,我们可以使用console.count()
来达到目的。
function demo() {
console.count("label");
};
for(let i=0;i<3;i++){
demo();
}
运行效果:
console.group()、console.groupEnd()和console.groupCollapsed()
console.group()
可以输出显示层级关系。
console.group("1");
console.log("1-1");
console.log("1-2");
console.log("1-3");
console.groupEnd();
console.group("2");
console.log("2-1");
console.log("2-2");
console.log("2-3");
console.groupEnd();
运行效果:
console.groupCollapsed()
与console.group()
用法相同,只是默认为折叠显示。
console.dir()
将特定的JS对象显示为可以交互的列表,列表默认是折叠起来的。
在Chrome中打印DOM元素时,console.log()
会将DOM元素以HTML的形式输出,而console.dir()
会以JSON对象的形式输出。
console.log(document.body);
console.dir(document.body);
运行效果: