Web控制台是现代浏览器中的内置调试器。熟练的Web开发人员会经常使用console.log()在其代码中打印消息和调试问题。该工具实际上还有很多很有用的功能和技巧,善用之可以极大提高Web开发,网站调优的效率,本文虫虫就来给大家普及一下这个工具。
打开一个浏览器,F12打开开发者模式,点击console页签,并输入命令(支持补全):
console.log(console)
如上截图中所示,console对象提供了大量的方法可供使用,而非我们最常用console.log()一个函数。为了演示,首先创建一个测试对象作为示例:
constChongchong={name:example,page:30,contens:[program,database,security]}
我们用console.log()调用该对象Chonghchong:
.dir()
console.log()以字符串表示形式打印对象,console.dir()将对象识别为对象并以比较清晰的对象结构扩展列表的形式打印:
assert()
用console.assert(),可以通过属性做条件筛选,只有在条件不不成立时候才打印设置的消息,代码调试必备。
.count()
console.count()用来来进行计数相关的工作,打印时候支持自定义标签,并且每次调用时计数器值都会增加1,可以结合forEach打印列表:
.table()
最棒的一个函数,可以用来将对象打印为成漂亮的表格形式,每个对象的属性带有标记的行:
.time()/timeLog()/timeEnd()
是一组非常有用的时间函数。console.time()启动计时器。然后,每次调用console.timeLog()时,都会打印自计时器启动3后的时间。
完成后,调用console.timeEnd()打印总时间:
.trace()
另一个非常有用的函数,用来调试深度嵌套的对象或函数时,需要打印代码的堆栈跟踪。调用console.trace()可以调用堆栈顶部所需的函数,查看调用它的代码确切位置:
.group()/groupEnd()
用来对消息进行分组以避免混乱,所示:
提示:可以使用console.groupCollapsed()来代替console.group(),这样默认情况下该组会被折叠。
控制台的CSS样式
在控制台,可以自定义日志的显示方式,可以使使用“%c”并传递一个CSS样式,比如:
console.log(%cHello,虫虫!,font-weight:bold;background-color:cyan;color:red;padding:30px;)
总结
Web控制台是个非常有用的工具,有很多很有用的工具帮助我们实现高效的Web内容调试和内容处理。