Console 调试方法

136 阅读2分钟

「这是我参与2022首次更文挑战的第27天,活动详情查看:2022首次更文挑战

前言

在前端,我们经常使用 Console 对象来进行调试,使用最多的就是 cosnole.log 了,但是除了这个api 外,Console 对象还支持多种调试方法,今天我们一起来学习一下这些方法。

Console.log()

log 是最基本的打印内容方法

console.log('info')

Console.info()

Console.info() 用来打印资讯类说明信息,使用方法和打印出来的效果和Console.log()是一致的。

Console.warn()

Console.warn() 打印一个警告信息

console.warn('warn info')

image.png

Console.assert()

Console.assert() 方法用来语句断言, console.assert(assertion, obj1 [, obj2, ..., objN]);

  • assertion:一个布尔表达式。如果assertion为假,消息将会被输出到控制台之中。
  • obj1 ... objN 被用来输出的Javascript对象列表,最后输出的字符串是各个对象依次拼接的结果。

如果断言为false,则将一个错误消息写入控制台。如果断言是 true,没有任何反应。

console.assert(false, '22')

image.png

Console.clear()

这个方法用来清空控制台,清空完控制台后,会显示‘Console was cleared’这样的信息。

console.clear() // Console was cleared

Console.count()

输出 count() 被调用的次数。函数接受一个可选参数 label。

// 没有传 label 的情况
console.count(); // default: 1
console.count(); // default: 2
console.count(); // default: 3
console.count(); // default: 4
// 有传label的情况

console.count('错误'); // 错误: 1
console.count('错误'); // 错误: 2
console.count('错误'); // 错误: 3
console.count('错误'); // 错误: 4

Console.countReset()

这个方法和Console.count(label)搭配使用,可以重制对应label的数量

// 没有传 label 的情况
console.count(); // default: 1
console.count(); // default: 2
console.count(); // default: 3
console.count(); // default: 4
console.countReset()
console.count(); // default: 1

Console.debug()

console.debug()  输出“调试”级别的消息且仅仅控制台配置为显示调试输出时才显示该消息。

console.debug(对象1 [, 对象2, ..., 对象N]);

console.dir

console.dir(object); 显示一个由特定的 Javascript 对象列表组成的可交互列表。这个列表可以使用三角形隐藏和显示来审查子对象的内容。

console.dir({a: 1, b: 2})

image.png

Console.table()

将数据以表格的形式显示。这个方法需要一个必须参数 datadata 必须是一个数组或者是一个对象;还可以使用一个可选参数 columns

console.table(["apples", "oranges", "bananas"]);

image.png

console.time && onsole.timeEnd

可以启动一个计时器来跟踪某一个操作的占用时长。必须传入唯一的名字,

console.time("timer1"); 
setTimeout(() => { console.timeEnd("timer1"); }, 1000);

image.png