如何优雅的在控制台中使用 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 实现自动推送

更多精彩详见:个人主页

相关推荐
千鼎数字孪生-可视化9 分钟前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月9 分钟前
7月10号总结 (1)
前端·css·css3
aramae13 分钟前
C++ -- STL -- vector
开发语言·c++·笔记·后端·visual studio
lifallen32 分钟前
Paimon 原子提交实现
java·大数据·数据结构·数据库·后端·算法
天天扭码33 分钟前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder35 分钟前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte40 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang1 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
舒一笑1 小时前
PandaCoder重大产品更新-引入Jenkinsfile文件支持
后端·程序员·intellij idea
中微子2 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端