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 相关文章推荐
广告代码静态化js通用函数
May 09 Javascript
JavaScript去掉空格的方法集合
Dec 28 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
限制上传文件大小和格式的jQuery插件实例
Jan 24 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
Angularjs过滤器使用详解
May 25 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
js实现随机抽奖
Mar 19 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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
adodb与adodb_lite之比较
2006/12/31 PHP
PHP 数组实例说明
2008/08/18 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
文本链接逐个出现的js脚本
2007/12/12 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
python运行其他程序的实现方法
2017/07/14 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
python中的列表与元组的使用
2019/08/08 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
停车位租赁协议书
2014/09/24 职场文书
公务员考察材料范文
2014/12/23 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
政审证明范文
2015/06/19 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
JS的深浅复制详细
2021/10/16 Javascript
在js中修改html body的样式
2021/11/11 Javascript