1

* 1、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");

image.png

* 2、console.table()

正常使用console.log()时,打印的为正常数据格式,但是console.table()时输入为表格,看数据更直观
image.png

* 3、console.time()、console.timeEnd()

console.time("for-test");
const arr = [];
for(let i = 0; i < 100000; i++) {
    arr.push({"key": i});
}
console.timeEnd("for-test");

输入为
VM1461:6 for-test: 10.18505859375 ms
从上面的例子可以看出,我们用 console.time() 和 console.timeEnd() 包围要测试运行时间的代码,这两个方法的参数保持一致,以便正确识别和匹配代码开始和结束的位置

* 4、console.assert()

类似于单元测试中的断言,当表达式为 false 时,输出错误信息。示例如下:

const arr = [1, 2, 3];
console.assert(arr.length === 4);

输出结果如下:
image.png

* 5、console.count()
调试代码时,我们经常需要知道一段代码被执行了多少次,我们可以使用 console.count() 来方便的达到我们的目的。示例如下:

function func() {
    console.count("label");
}

for(let i = 0; i < 3; i++) {
    func();
} 

运行结果为:

label: 1
label: 2
label: 3

* 6、console.group()、 console.groupEnd() 与 console.groupCollapsed()

一般的 console.log() 方法的输出没有层级关系,在需要一些显示层级关系的输出中显得苍白无力,使用 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(); 

运行结果为:

把 "group" 换成 "groupCollapsed",则默认为折叠运行结果。

*7、console.dir()

和console.log()相似,但打印 DOM 元素时,console.log() 会将 DOM 元素以 HTML 的形式输出,而 console.dir() 则会以 JSON 对象的形式输出。

对console是不是有了更深的了解? ( ̄︶ ̄)


芒果
28 声望5 粉丝

一个头发茂盛的小白程序媛🌻