Javascript调试console对象的小技巧
2020-02-20 16:01:14来源:爱站网 阅读 ()
写过前段JavaScript的小伙伴们一个对于console都不会陌生,但是对于调试console的技巧却不是所有人都了解的,那么今天爱站小编就将为大家介绍Javascript调试console对象的小技巧。
前言
在调试的过程中我们经常会用console对象在控制台输出一些常量或者变量。
但是相信很多人也就只用过console.log()这一个方法,今天我们就一起来看看console对象还有哪些比较有用的方法。由于本篇文章是跟控制台有关,代码就直接在控制台展现而没有另外用新文件展示。
不同级别日志
通过console对象的不同方法,可以在控制台上输出不同级别的日志信息,它们会采用不同的标志来展示,如下图所示。
不同级别的日志
Javascript调试之console对象,它的一些小技巧你都知道吗?
包含占位符
在输出信息时可以通过%占位符来指定对应的值,而不用总是采用拼接字符串的方法。支持的占位符包括以下几种。
- %s - 字符
- %d - 整数
- %f - 浮点数
- %o - 对象
- ?
通过以下一个简单的例子可以看出其用法。
包含占位符
Javascript调试之console对象,它的一些小技巧你都知道吗?
打印分组信息
通过group()方法可以以分组的形式展示出信息,类似于列表结构。
打印分组信息
Javascript调试之console对象,它的一些小技巧你都知道吗?
表达式判断
在一些测试框架中,经常会用assert断言来判断一个表达式的值是否为真。同样在console对象中也有assert方法,在断言为真时并不会输出任何信息,而在断言为false时,直接抛出异常。
表达式判断
上述代码中前两条语句判断结果都为true,所以没有输出任何信息,第三条语句判断结果为false,所以会直接抛出异常。
表格打印
console对象有个table方法,可以直接将对象类型的数据以表格展示。
表格打印
函数调用栈信息
通过console.trace()方法可以展示出函数调用栈的信息,来查看函数调用过程,一般会选择将这个方法放在最后执行的函数的方法体中。
函数调用栈信息
由于栈是先进后出机制,所以先执行的方法会在后面输出,因此上述代码结果会按照sum, f2, f1的顺序输出。
计时
一般统计一段代码执行耗时,方法会是通过Date对象获取毫秒数,然后将两个毫秒数进行相减。
一般计时方法
在上述代码中通过endTime和startTime两个变量的差值来计算出中间执行代码的耗时,我们可以看出往一个数组中添加100000个字符串耗时为15毫秒。
同样可以通过console对象的time()和timeEnd()方法来统计代码段的执行耗时。time()和timeEnd()可以接收一个字符串作为标识,而且两个方法接收的字符串必须一样,如果没有传入字符串则默认为‘default'字符串。
?console对象计时方法
上述代码执行结果为16毫秒,与之前那个方法产生的结果大致一样。
性能分析
通过console.profile()和console.profileEnd()方法,可以展示出代码中各个函数执行所消耗的时间,可以用来评估代码性能。
我们使用以下测试代码来进行说明。
打开chrome浏览器的控制台会有一个Javascript Profile菜单栏,如果默认情况下没有的话,可以按照以下方法打开。
?Javascript Profile
打开这个菜单选项后,我们可以看出每个方法执行消耗的时间。
时间消耗
以上所述是小编给大家介绍Javascript调试console对象的小技巧,如果大家有任何疑问请给我留言,小编会及时回复大家的。
原文链接:https://js.aizhan.com/develop/JavaScript/11650.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- javascript面向对象入门基础详细介绍 2020-03-29
- JavaScript函数表达式详解及实例 2020-03-25
- 如何用javascript连接access数据库 2020-03-20
- js中去掉字串左右空格 2020-03-20
- Javascript中的经典技巧 2020-03-20
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash