浏览器自动出现console（浏览器Web控制台console实用技巧大全）

Web控制台是现代浏览器中的内置调试器。熟练的Web开发人员会经常使用 console.log() 在其代码中打印消息和调试问题。该工具实际上还有很多很有用的功能和技巧，善用之可以极大提高Web开发，网站调优的效率，本文虫虫就来给大家普及一下这个工具。

打开一个浏览器，F12打开开发者模式，点击console页签，并输入命令（支持补全）：

console.log(console)

如上截图中所示， console 对象提供了大量的方法可供使用，而非我们最常用console.log() 一个函数。为了演示，首先创建一个测试对象作为示例：

const Chongchong={name:'example',page:30,contens:['program','database','security']}

我们用console.log()调用该对象Chonghchong：

console.log() 以字符串表示形式打印对象，console.dir()将对象识别为对象并以比较清晰的对象结构扩展列表的形式打印：

用console.assert()，可以通过属性做条件筛选，只有在条件不不成立时候才打印设置的消息，代码调试必备。

console.count() 用来来进行计数相关的工作，打印时候支持自定义标签，并且每次调用时计数器值都会增加1，可以结合forEach打印列表：

最棒的一个函数，可以用来将对象打印为成漂亮的表格形式，每个对象的属性带有标记的行：

是一组非常有用的时间函数。console.time()启动计时器。然后，每次调用 console.timeLog()时，都会打印自计时器启动3后的时间。

完成后，调用 console.timeEnd()打印总时间：

另一个非常有用的函数，用来调试深度嵌套的对象或函数时，需要打印代码的堆栈跟踪。调用 console.trace() 可以调用堆栈顶部所需的函数，查看调用它的代码确切位置：

用来对消息进行分组以避免混乱，所示：

提示:可以使用 console.groupCollapsed()来代替console.group() ，这样默认情况下该组会被折叠。

在控制台，可以自定义日志的显示方式，可以使使用“%c”并传递一个CSS 样式,比如：

console.log('%c Hello,虫虫!','font-weight:bold;background-color:cyan;color:red;padding:30px;')

Web控制台是个非常有用的工具，有很多很有用的工具帮助我们实现高效的Web内容调试和内容处理。