也许主题应该改为:你只会使用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()
通知你。这是个多参数的,除了第一个参数之外,后面接的参数是被输出的对象也好,字符串也好,并且会拼接。
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()
没有区别,就是可以利用占位符然后再把参数接在后面。
console.log("%d年%d月%d日",2017,11,20)
最后感谢MDN,也感谢AlphaGo!