JS 基础: 你真的了解 console 吗？
文章目录
- JS 基础: 你真的了解 console 吗？
- 简介
- 参考
- 正文
- `console` 的方法
- console.log
- console.warn
- console.error
- console.clear
- console.time & console.timeEnd
- console.table
- console.count
- console.group & console.groupEnd
- console.log（自定义样式）
- 结语
简介
相信大部分的人学习任何语言或是工具都是从 Hello World 开始的，它代表的不仅仅是输出字符串的 demo，更是一个以最基础的实现最快了解工具运行原理的重要思想。不过这不是本篇要讨论的（笑，本篇要讨论的是 js 开发者中用得最多没有之一的 console。
用过 js 都知道 console 就是在控制台输出一些信息，可以是任何类型。甚至到了现在我还是会用上 console 来输出一些信息用于 debug。但是 console 除了最常用的 log 方法还有许多在浏览器可视化的版本，接下来就让我们来看看到底有哪些变化吧。
参考
别只用 console.log() 调试 js 代码了 |
正文
console 的方法
首先我们先来看看 console 实际上有哪些可用的方法
哗的就是一大票hhh，不过我们也不是全试一遍，下面列出我们将要演示的方法和用途的简要说明
Method | Usage |
log | 一般输出 |
warn | 输出警告 |
error | 输出异常 |
clear | 清除控制台 |
time & timeEnd | 计时 |
table | 可视化键值对 |
count | 变量使用次数计数 |
group & groupEnd | 输出分块 |
log(with style) | 自定义样式输出 |
接下来我们就一个个看看效果吧，注意！要在浏览器输出或是支持可视化的控制台输出才有用，你在命令行那就都是一般输出
console.log
一般输出，没啥好说的hhh
console.warn
输出警告（黄底样式）
console.error
输出异常（红底样式）
console.clear
清理输出，清完就没了hhh，所以我也只能放两张图你自己领悟了，看能不能悟出些什么hhh
console.time & console.timeEnd
相当于一个计时器，开始和结束需要传入计时器的标识
console.table
这大概是众多方法最令人意外的一个，做成一个表格，左边为键右边为值（数组则是以下标为键）
偷偷告诉你，他只能展开一层hhh，如果值又是一个对象就会变成 {...}
console.count
计数器，记录该变量被引用的次数，值改变之后会被重置（输出格式为 变量值:使用次数）
console.group & console.groupEnd
group 方法也是比较特别的一个，可以对输出做分块
console.log（自定义样式）
最后一个，使用 log 方法的时候在字符串开头传入 %c 并将样式作为第二个参数就可以产生自定义样式的输出
结语
到此为止啦，console 其实还是有很多花样的，供大家参考参考（回头还是 log 最香hhhh。
