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

 更新时间:2017年07月10日 11:40:19   投稿:mrr  
这篇文章主要总结了console对象的一些有用的方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧

前言

写过前端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实现DDoS攻击原理与保护措施

    解析JavaScript实现DDoS攻击原理与保护措施

    本文主要对JavaScript实现DDoS攻击原理与保护措施进行介绍,具有一定的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • javascript去掉代码里面的注释

    javascript去掉代码里面的注释

    这篇文章主要介绍了javascript去掉代码里面的注释的方法和具体代码,有需要的小伙伴可以参考下。
    2015-07-07
  • js操作XML文件的实现方法兼容IE与FireFox

    js操作XML文件的实现方法兼容IE与FireFox

    下面小编就为大家带来一篇js操作XML文件的实现方法兼容IE与FireFox。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 浏览器兼容console对象的简要解决方案分享

    浏览器兼容console对象的简要解决方案分享

    不同浏览器或者版本之间对于console对象的支持不尽相同,而console方法在开发调试过程中都是不错的工具。难道要在上线前把所有console.xxxx去掉以保证某些浏览器不报错么。其实可以变通解决
    2013-10-10
  • JavaScript获得页面base标签中url的方法

    JavaScript获得页面base标签中url的方法

    这篇文章主要介绍了JavaScript获得页面base标签中url的方法,涉及javascript中元素的获取及href属性的使用技巧,需要的朋友可以参考下
    2015-04-04
  • JavaScript 数组中插入元素的实例方法

    JavaScript 数组中插入元素的实例方法

    这篇文章主要介绍了如何在 JavaScript 数组中插入元素,在本文中,我们学习了使用 splice() 方法将元素添加到数组的开始、末尾或任何位置的各种方法,需要的朋友可以参考下
    2023-09-09
  • JS命名空间的另一种实现

    JS命名空间的另一种实现

    这篇文章介绍了js命名空间的另一种简单实现方法,有需要的朋友可以参考一下
    2013-08-08
  • 解决Layui数据表格显示无数据提示的问题

    解决Layui数据表格显示无数据提示的问题

    今天小编就为大家分享一篇解决Layui数据表格显示无数据提示的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • JavaScript判断数组重复内容的两种方法(推荐)

    JavaScript判断数组重复内容的两种方法(推荐)

    本文给大家介绍两种JavaScript判断数组重复内容的方法(推荐)非常不错具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-06-06
  • 基于JavaScript+HTML编写一个日期选择插件

    基于JavaScript+HTML编写一个日期选择插件

    在现代Web应用程序中,日期选择器是一个非常常见的组件,用户可以使用它来选择特定的日期,在本篇文章中,我们将使用JavaScript和HTML来创建一个简单但功能强大的日期选择插件,这个日期选择插件是比较考验Js基本功的,需要的朋友可以参考下
    2023-10-10

最新评论