console.log 优雅指南 | 您所在的位置:网站首页 › consolelog打印数组 › console.log 优雅指南 |
所有做过前端项目的同学都有在浏览器控制台打印消息的经历,相信你们中的大部分都和我一样,习惯用 console.log 调试代码,所谓一招鲜吃遍天。 《鬼灭之刃》中,我妻善逸只会雷之呼吸一之型,把一之型练到了极致中的极致,练成了只属于我妻的独特雷之呼吸。但是调试代码可不一样,console.log 再怎么极致,也就打印的漂亮点罢了。 因此,还是把 console API 的所有型都学会,才能事半功倍,获得快速便捷的调试体验。 基本型 console.log() | info() | debug() | warn() | error()基本的 console API 都是在控制台输出一条语义化的信息。 Log 和 Info 代表一条普通日志信息,唯一区别是在 Firefox 浏览器里,info 会在旁边显示一个小 i 图标。 Debug 代表一条调试信息,一般不显示,需要在控制台过滤选项里选上 verbose 级别的信息。 Warn 代表一条警告信息。 Error 代表一条错误信息,在 Firefox 浏览器里有个别称,叫 exception。 基本型还有 2 种高级的用法,占位符和添加样式。 首先是占位符,有 4 种可以选择: %o 代表一个对象%s 代表一个字符串%d 代表一个整数%f 代表一个浮点数添加样式,个性化你的控制台吧!打印的信息里需要更变样式的部分以 %c 开头,接下来的参数填入对应样式。 聪明机智的你可能已经发现,控制台的样式其实就是写 CSS。 进阶型下面是一些进阶的 console API,他们一定能够升级你的调试体验,提高你的调试逼格,提升你的调试速度。如果不行,你找我。 Console API trace在控制台输出调用堆栈信息。 如果你有一个函数被触发,但是你不知道是哪里触发这个函数,这时候 trace 就很有帮助了。 想要测试一段代码的执行时间,你可能会这样写: 但是现在再也不用那么麻烦了: 以表格的形式打印对象或者数组,这在需要横向对比对象或者数组中的数据时很有用: 一个用于计数的 API,会在控制台打印出调用自己的次数,接收一个参数作为打印结果的前缀,默认为 default: 用来为日志分组,同样接收一个参数,用来表示组名,默认为 console.group: 断言,接收 2 个参数,第一个是表达式,第二个是标识名称,当表达式值为 false 时表示断言失败并打印日志,否则什么也不会发生: 这个就厉害了,清除所有控制台的日志。 恭喜你完成了从 console.log 到 console.love 的过渡,打印 log 也是一种艺术。 最后推荐一个网站:console.❤ |
CopyRight 2018-2019 实验室设备网 版权所有 |