如何优雅的在控制台中使用 console.log

在前端开发过程中想必 console.log 是大家经常用的，来打印一些变量看一些代码输出，今天给大家介绍一下不一样的 console, 让你更加优雅的使用 console。

console.warn() 和 console.error()

当代码中可能存在阻止应用程序正常工作时，在使用 console.log() 来调试不会生效。

当控制台消息很多时，不利于你方便查找打印消息时就可以使用 console.warn() 和 console.error() 来解决这些问题。

console.warn("This is a warning");

console.error("This is an error")

定时操作 console.time() 和 console.timeEnd()

在你想看你的代码运行了多长时间可以使用 console.time() 和 console.timeEnd()

代码如下：

console.time("Loop timer")  
for(i = 0; i < 10000; i++){  
    console.log(1)
}  
console.timeEnd("Loop timer")

这在需要较长时间的CPU密集型应用程序中非常有用，比如: HTML Canvas读取等情况。

追踪代码是如何到达某个位置的 console.trace()

如果想看一个函数是如何被调用的可以用 console.trace()

function trace(){  
    console.trace()  
}  
function randomFunction(){  
    trace();  
}

这里有一个名为 randomFunction 的方法，它调用了 trace，而 trace 又调用了 console.trace()。

因此，当你调用 randomFunction 时，你会得到类似以下输出：

这显示了匿名函数（即主要的JavaScript代码）调用了 randomFunction，而 randomFunction 又调用了 trace()。 这种追踪功能有助于你了解代码的执行流程和调用关系。

对控制台消息分组 console.group() 和 console.groupEnd()

如果你对控制台消息进行分组，你可以使控制台更易阅读。

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()

// 假如我有两个对象
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。

注意到了%c标记吗？这就是关键所在。

点赞收藏支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。

往期热门精彩推荐

面试相关热门推荐

实战开发相关推荐

移动端相关推荐

Git 相关推荐