也许主题应该改为:你只会使用Console.log()?

现在的前端虽说是越来越复杂,但是我怎么觉得现在前端的要求越来越低了?应该说现在的人,看个几遍vue,知道console.log(),知道var, {}, [],就敢出来找工作了。但是console就这么个方法?

搞笑,你在你的浏览器输入console,自己看看有多少东西!所以为了高效调试我觉得有必要全了解一遍。

log(), info(), error(), warn()

这几个放在一起讲

log() 普通输出

这是最普通,最常见,最没什么东西好讲的。输出的样式是普通样式。

info() 提醒输出

这是一个早期chrome才能看到的效果,现在的FireFox也能看到,是一个圆形中间一个叹号的标记。作提醒作用。chrome不是不会显示,是显示成普通样式。

error() 错误输出

这个应该跟log()同个使用数量级的,表示错误,大红颜色。chrome表现是一整行都是红色的,很显眼。用来显示错误信息。比如throw 错误之类的。如果一套都是log()的话肯定很难一眼看到错误。珍爱视力,路还长着…

warn() 警告输出

就是警告咯,可能用的比较少,但是工具类和一些库肯定会容易看到,原来跟info()平起平坐,现在应该是替代了。显示效果会显眼的黄色,chrome会有黄色背景。

debug() 调试输出

这个就是log(),用来输出调试信息的。不过现在的调试信息都在花式log(),也不需要用到这个了。

_exception(), debug()

这组只有两个,因为这两个没卵用…为什么…

_exception() 例外输出

说白了就是用来输出错误的,那错误不能用error()吗?!

debug() 调试输出

早期可能还有区别,但是这就是一个log(),不过现在各前端都在花式log()调试信息,可能也有些人debug()都没听说过。

assert(…), clear(), count()

为什么第一个函数搞了三个点?

assert() 断言输出:判断第一个参数是否为真,false的话抛出异常并且在控制台输出相应信息。——MDN

从这里开始就要骚了,这是一个判断的方法,里面需要填写参数,然后得到返回值。如果值为真,就什么都不会发生,反之则以error()通知你。这是个多参数的,除了第一个参数之外,后面接的参数是被输出的对象也好,字符串也好,并且会拼接。

1
2
3
console.assert(1>2, "你这么骚的?")

Assertion failed: 你这么骚的? // 假装这里是红字红色背景

clear() 清空控制台

就是把控制台全清空,terminal里面的clear

count() 次数输出:以参数为标识记录调用的次数,调用时在控制台打印标识以及调用次数。——MDN

并且MDN明确指出,这个不应该列入正常使用范围,因为这是非标准方法。这是这组里最骚的方法。用来输出本身被调用了几次…虽然如果测试循环的话,一般都直接log(i)的,直接看1234567不是更明确嘛。显示效果就是,每运行一次就会在控制台打印 n + 1。

dir(), dirxml()

这两个一起说是因为,有相同点和不同点。

dir() 对象结构输出

dirxml() 节点结构输出

这两个都是输出一个树状结构,就是前面有个小三角。但不同点就是,dir()是把一个对象按照对象的形式呈现,当然用来输出节点就是把节点信息按object呈现。dirxml()是把节点呈现出来,就还是保留xml的样式呈现。都是非标准,偶尔用用还行?

group(), groupCollapsed(), groupEnd()

这是上面那组的正房版。都是打印结构。我就不一行一行解释了有点累…

第二跟第一都是打印树状结构,但是第一个会自动打开显示结构里面有什么结构(没问题的),第二个叫内联树状,默认不打开。

而且只要你不结束,你可以一直联下去的,这样一个父节点可以一直续下去…直到通过groupend()来结束。

table(…)

我必须强调!这是最棒的我最喜欢的console方法,没有之一!

table() 表格输出

这个方法必须传入内容,内容的类型是array或者object,输出的样式是一个key:value的表格!如果你觉得输出成对象不方便检查的话,那就用table()吧!(当然在表格下方还是会return一次对象或者数组)

而且不仅是key:value,你甚至还能多元数组!对象套对象!甚至是JSON!

另外的技巧就是可以用占位符了

跟C语言的printf()没有区别,就是可以利用占位符然后再把参数接在后面。

1
console.log("%d年%d月%d日",2017,11,20)

最后感谢MDN,也感谢AlphaGo!