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

在前端开发过程中想必 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标记吗？这就是关键所在。

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

往期热门精彩推荐

面试相关热门推荐

前端万字面经------基础篇

前端万字面积------进阶篇

实战开发相关推荐

前端常用的几种加密方法

探索Web Worker在Web开发中的应用

不懂 seo 优化？一篇文章帮你了解如何去做 seo 优化

【实战篇】微信小程序开发指南和优化实践

前端性能优化实战

聊聊让人头疼的正则表达式

获取文件blob流地址实现下载功能

Vue 虚拟 DOM 搞不懂？这篇文章帮你彻底搞定虚拟 DOM

移动端相关推荐

移动端横竖屏适配与刘海适配

移动端常见问题汇总

聊一聊移动端适配

Git 相关推荐

通俗易懂的 Git 入门

git 实现自动推送

更多精彩详见：个人主页