Javascript调试之console对象——你不知道的一些小技巧


Posted in Javascript onJuly 10, 2017

前言

写过前端Javascript代码的同学肯定不会对console对象感到陌生,在调试的过程中我们经常会用console对象在控制台输出一些常量或者变量。

但是相信很多人也就只用过console.log()这一个方法,今天我们就一起来看看console对象还有哪些比较有用的方法。由于本篇文章是跟控制台有关,代码就直接在控制台展现而没有另外用新文件展示。

Javascript调试之console对象——你不知道的一些小技巧

不同级别日志

通过console对象的不同方法,可以在控制台上输出不同级别的日志信息,它们会采用不同的标志来展示,如下图所示。

Javascript调试之console对象——你不知道的一些小技巧

不同级别的日志

Javascript调试之console对象,它的一些小技巧你都知道吗?

包含占位符

在输出信息时可以通过%占位符来指定对应的值,而不用总是采用拼接字符串的方法。支持的占位符包括以下几种。

  • %s - 字符
  • %d - 整数
  • %f - 浮点数
  • %o - 对象

通过以下一个简单的例子可以看出其用法。

Javascript调试之console对象——你不知道的一些小技巧

包含占位符

Javascript调试之console对象,它的一些小技巧你都知道吗?

打印分组信息

通过group()方法可以以分组的形式展示出信息,类似于列表结构。

Javascript调试之console对象——你不知道的一些小技巧

打印分组信息

Javascript调试之console对象,它的一些小技巧你都知道吗?

表达式判断

在一些测试框架中,经常会用assert断言来判断一个表达式的值是否为真。同样在console对象中也有assert方法,在断言为真时并不会输出任何信息,而在断言为false时,直接抛出异常。

Javascript调试之console对象——你不知道的一些小技巧

表达式判断

上述代码中前两条语句判断结果都为true,所以没有输出任何信息,第三条语句判断结果为false,所以会直接抛出异常。

表格打印

console对象有个table方法,可以直接将对象类型的数据以表格展示。

Javascript调试之console对象——你不知道的一些小技巧

表格打印

函数调用栈信息

通过console.trace()方法可以展示出函数调用栈的信息,来查看函数调用过程,一般会选择将这个方法放在最后执行的函数的方法体中。

Javascript调试之console对象——你不知道的一些小技巧

函数调用栈信息

由于栈是先进后出机制,所以先执行的方法会在后面输出,因此上述代码结果会按照sum, f2, f1的顺序输出。

计时

一般统计一段代码执行耗时,方法会是通过Date对象获取毫秒数,然后将两个毫秒数进行相减。

Javascript调试之console对象——你不知道的一些小技巧

一般计时方法

在上述代码中通过endTime和startTime两个变量的差值来计算出中间执行代码的耗时,我们可以看出往一个数组中添加100000个字符串耗时为15毫秒。

同样可以通过console对象的time()和timeEnd()方法来统计代码段的执行耗时。time()和timeEnd()可以接收一个字符串作为标识,而且两个方法接收的字符串必须一样,如果没有传入字符串则默认为‘default'字符串。

Javascript调试之console对象——你不知道的一些小技巧

 console对象计时方法

上述代码执行结果为16毫秒,与之前那个方法产生的结果大致一样。

性能分析

通过console.profile()和console.profileEnd()方法,可以展示出代码中各个函数执行所消耗的时间,可以用来评估代码性能。

我们使用以下测试代码来进行说明。

Javascript调试之console对象——你不知道的一些小技巧

打开chrome浏览器的控制台会有一个Javascript Profile菜单栏,如果默认情况下没有的话,可以按照以下方法打开。

Javascript调试之console对象——你不知道的一些小技巧

 Javascript Profile

打开这个菜单选项后,我们可以看出每个方法执行消耗的时间。

Javascript调试之console对象——你不知道的一些小技巧

时间消耗

以上所述是小编给大家介绍的Javascript调试之console对象——你不知道的一些小技巧,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用正则xmlHttp实现的偷(转)
Jan 22 Javascript
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 Javascript
vue实现表格数据的增删改查
Jul 10 #Javascript
激动人心的 Angular HttpClient的源码解析
Jul 10 #Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 #Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 #jQuery
Underscore之Array_动力节点Java学院整理
Jul 10 #Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 #Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 #Javascript
You might like
第三节--定义一个类
2006/11/16 PHP
PHP安全性漫谈
2012/06/28 PHP
php 多文件上传的实现实例
2016/10/23 PHP
任意位置显示html菜单
2007/02/01 Javascript
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
Python与shell的3种交互方式介绍
2015/04/11 Python
简化Python的Django框架代码的一些示例
2015/04/20 Python
Python3写入文件常用方法实例分析
2015/05/22 Python
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
Python Process多进程实现过程
2019/10/22 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
网络工程专业毕业生推荐信
2013/10/28 职场文书
优秀应届毕业生自荐信
2013/11/16 职场文书
安全生产大检查方案
2014/05/07 职场文书
学校个人对照检查材料
2014/08/26 职场文书
天那边观后感
2015/06/09 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis