Web开发

首页 » 常识 » 预防 » 浏览器console控制台详解虫虫搜奇
TUhjnbcbe - 2023/7/9 21:20:00
白癜风哪里能治最好 http://pf.39.net/bdfyy/dbfzl/191124/7637171.html

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内容调试和内容处理。

1
查看完整版本: 浏览器console控制台详解虫虫搜奇