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兼容标准的表格变色效果
Jun 28 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
深入理解JQuery keyUp和keyDown的区别
Dec 12 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
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
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
javascript 获取图片颜色
2009/04/05 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
JS实现简单日历特效
2020/01/03 Javascript
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
python连接字符串的方法小结
2015/07/13 Python
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
python自带的http模块详解
2016/11/06 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
python 接口返回的json字符串实例
2018/03/27 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
利用python画出折线图
2018/07/26 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
Python API自动化框架总结
2019/11/12 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
中文系学生自荐信范文
2013/11/13 职场文书
饲料采购员岗位职责
2013/12/19 职场文书
远程教育心得体会
2014/01/03 职场文书
班干部演讲稿
2014/04/24 职场文书
八达岭长城导游词
2015/01/30 职场文书