控制台（Console）选项卡

它会收集到我们浏览器在整个的运行期间所产生的一些信息，我们经常使用这个console.log()在控制台里面去打印一些东西。Console对象不仅仅有log函数，它有很多很多的函数。

debug(‘打印调试信息’)

浏览器在默认情况下，是隐藏这个调试信息的，那么我们如何来打开呢？

找到默认级别(All levels)选项，勾选详细(Verbose)就可以看到调试信息了，这个debug()跟log()没有什么本质的区别，只是浏览器会把它归类到详细(Verbose)类型里面去，这里边显示的一些消息一般级别很低，如页面上有一个循环，它卡的时间比较长，那么它就会显示到这个地方，默认情况下是不显示的。

log(‘打印消息’)

打印消息，在开发中常用的打印方法。

info(‘打印消息’)

在谷歌浏览器中显示效果同‘log()’，在safari浏览器中打印消息前会有个蓝色感叹号

table()表格

console.table([{name:'前端'},{name:'学习'},{name:'笔记'}])

当我们通过网络请求，拿到一个对象数组，这时候如果用console.log去打印的话，打印出来的结果不利于观察，如果用table打印的话，它会给你列出详情，它会把这里边的每一个对象的每一个属性形成一个列，看上去比较直观一点。

group(‘分组’)~groupEnd(‘分组’)

有的时候，我们打印的消息可能比较多，当我们在一个方法里边可能要打印很多的消息，我们可以把一些同类型的消息分成一个组。

const name = '分组名称'

console.group(name)

//console.groupCollapsed(name) //打印结果默认展开，开启可设置默认折叠

console.log('前端')

console.log('学习')

console.log('笔记')

console.groupEnd(name)

dir(‘对象结构’)

当我们直接用log打印DOM时展现的的时元素结构，如果我们想要展现它的对象结构需要用到dir。

console.dir(document.body)

time(‘计时’)~timeEnd(‘计时’)

当我们要比较几段代码它们的耗时时间，我们会用到time，在代码开始之前加上console.time(‘计时’)，表示计时开始，在代码结束位置加上console.timeEnd(‘计时’)，表示计时结束，运行得到耗时时间。

count(‘计数’)

const start = Date.now()

while (Date.now() - start < 20){

console.count('loop') // 调用一次就会累加一次

}

console.countReset('loop') // 对loop计数清零

trace(‘打印消息’)堆栈

当我们代码量很大，特别是在一些框架里，分成很多的文件，分成很多的模块和子函数，有的时候，我们一个函数，它可能会被多个地方所调用，但是突然有一天，这个函数运行的过程中，出了一些问题，没有报错，但是达不到我们的预期，这时需要知道这个函数到底是被谁在调用，那么我们可以通过在这个函数里边使用console.trace()把堆栈信息打印出来，从而找到是谁调用出了问题。

在函数B里边打印了console.trace()，然后函数a调用函数B，然后运行函数a，看一下最终输出的结果，它会告诉你，打印的位置，在B函数里边，然后a调用了B，全局调用的是a。

assert(‘断言’)

assert可以做一些简单的测试，当测试结果为真时不会打印，当测试结果为假时会输出“断言失败”

warn(‘警告消息’)

是写框架或者是写库的人用的比较多，当你用了一个不合适的方法，或者你用了一些快要过时的API的时候，可能会给你写一些警告。

error(‘错误消息’)

也是写框架或者是写库的人用的比较多，当你有一些严重错误的用法，可能会用error打印错误消息。

clear(‘清空消息’)

把之前的打印消息呢全部清空。

给消息添加样式

const styles = `color:red;font-size:30px;border:5px solid #90442E`

console.log('%c给打印信息加样式',styles)

要在打印信息前添加‘%c’