Console 是前端开发中常用到的调试工具，它可以在浏览器控制台中输出信息，帮助我们定位和解决问题。但是除了 console.log() 这个基本用法外，Console 还有许多其他强大的功能，本文将介绍一些你可能不知道的 Console 技巧。
Console 的各种输出方式
除了最常见的 console.log()，Console 还提供了很多输出方式。
console.dir()
console.dir() 可以输出一个对象的所有属性和方法，方便我们查看其内部结构。例如：
const obj = { name: "Tom", age: 18 };
console.dir(obj);这段代码会在控制台中输出如下信息：
Object age: 18 name: "Tom" __proto__: Object
console.error()
console.error() 可以输出一个错误信息，通常用于捕获异常。例如：
try {
// do something that may throw an error
} catch (e) {
console.error("An error occurred:", e);
}这段代码会在控制台中输出类似以下信息的红色错误提示：
An error occurred: Error: Something went wrong
console.warn()
console.warn() 可以输出一个警告信息，通常用于提醒开发者注意某些情况。例如：
if (age < 18) {
console.warn("The user is under 18 years old");
}这段代码会在控制台中输出类似以下信息的黄色警告提示：
The user is under 18 years old
console.info()
console.info() 可以输出一些提示性的信息，通常用于提供某些有用的信息。例如：
console.info("The page was loaded at " + new Date());这段代码会在控制台中输出类似以下信息的蓝色提示：
The page was loaded at Wed Apr 07 2023 00:00:00 GMT+0800 (中国标准时间)
Console 的格式化输出
Console 提供了一些格式化输出的方式，使得输出的信息更加易读。
console.table()
通过 console.table() 可以将一个数组或对象以表格形式输出。例如：
const data = [
{ name: "Tom", age: 18 },
{ name: "Jerry", age: 20 },
];
console.table(data);这段代码会在控制台中输出如下的表格：
(index) | name | age --------|-------|---- 0 | Tom | 18 1 | Jerry | 20
console.group() 和 console.groupEnd()
通过 console.group() 和 console.groupEnd() 可以将输出信息分组，方便查看。例如：
-- -------------------- ---- ------- -------------------- ---- ---------------- ---- ---------------- ---- ------------------- -------------------- ---- ---------------- ---- ---------------- ---- -------------------
这段代码会在控制台中输出如下的分组信息：
Group 1 Log 1 Log 2 Group 2 Log 3 Log 4
console.time() 和 console.timeEnd()
通过 console.time() 和 console.timeEnd() 可以计算一段代码的执行时间。例如：
console.time("Test");
// do something that takes some time
console.timeEnd("Test");这段代码会在控制台中输出类似以下信息的计时提示：
Test: 1234.567ms
Console 的高级用法
除了上述常用的 Console 输出方式和格式化输出之外，Console 还有一些高级用法，可以帮助我们更好地调试前端代码。
console.trace()
console.trace() 可以输出当前代码的调用栈，方便我们查看函数调用过程中的信息。例如：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35497