在前端开发过程中想必 console.log 是大家经常用的，来打印一些变量看一些代码输出，今天给大家介绍一下不一样的 console, 让你更加优雅的使用 console。
console.warn() 和 console.error()
当代码中可能存在阻止应用程序正常工作时，在使用 console.log() 来调试不会生效。
当控制台消息很多时，不利于你方便查找打印消息时就可以使用 console.warn() 和 console.error() 来解决这些问题。
js
console.warn("This is a warning");
js
console.error("This is an error")
定时操作 console.time() 和 console.timeEnd()
在你想看你的代码运行了多长时间可以使用 console.time() 和 console.timeEnd()
代码如下：
js
console.time("Loop timer")
for(i = 0; i < 10000; i++){
console.log(1)
}
console.timeEnd("Loop timer")
这在需要较长时间的CPU密集型应用程序中非常有用，比如: HTML Canvas读取等情况。
追踪代码是如何到达某个位置的 console.trace()
如果想看一个函数是如何被调用的可以用 console.trace()
js
function trace(){
console.trace()
}
function randomFunction(){
trace();
}这里有一个名为 randomFunction 的方法，它调用了 trace，而 trace 又调用了 console.trace()。
因此，当你调用 randomFunction 时，你会得到类似以下输出：
这显示了匿名函数（即主要的JavaScript代码）调用了 randomFunction，而 randomFunction 又调用了 trace()。 这种追踪功能有助于你了解代码的执行流程和调用关系。
对控制台消息分组 console.group() 和 console.groupEnd()
如果你对控制台消息进行分组，你可以使控制台更易阅读。
js
console.log("Test1!");
console.group("My message group");
console.log("Test2!");
console.log("Test2!");
console.log("Test2!");
console.groupEnd()所有的 "Test2" 消息都属于 "My message group" 分组。这可以让你将相关的控制台消息组织在一起，以便更轻松地阅读和理解它们。
清空控制台 console.clear()
在控制台输入 console.clear() 你控制台所有的内容都将被清空。
表格化控制台 console.table()
如果你想让你打印多条一样的对象在控制台中可视化可以使用 console.table()
js
// 假如我有两个对象
var person1 = {name: "Weirdo", age : "-23", hobby: "singing"}
var person2 = {name: "SomeName", age : "Infinity", hobby: "programming"}
console.log(person1,person2)
// 使用table 对比
console.table({person1, person2})如下图：
是不是从未想过控制台可以看起来如此清晰，console.table() 调试技巧可以帮助使控制台更易于阅读和理解，特别是在处理大量数据或进行复杂调试时。
在控制台中添加 css
没错，你确实没看错，确实是要在控制台中添加css。
js
console.log("%c I love juejin!",
"color: red; background-color: lightblue; border: solid");
注意到了%c标记吗？这就是关键所在。
点赞收藏支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。
往期热门精彩推荐
面试相关热门推荐
实战开发相关推荐
移动端相关推荐
Git 相关推荐
更多精彩详见：个人主页