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

作者:mrr 时间:2023-08-07 19:24:14 

前言

写过前端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对象——你不知道的一些小技巧,希望对大家有所帮助

来源:http://www.toutiao.com/i6437846671991767554/

标签:js,console,对象
0
投稿

猜你喜欢

  • 对python数据切割归并算法的实例讲解

    2023-02-10 05:32:08
  • 基于信息排序的信息理解

    2008-05-16 10:37:00
  • go中new和make的区别小结

    2024-05-09 09:39:48
  • Golang信号处理及如何实现进程的优雅退出详解

    2024-05-28 15:24:29
  • 详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)

    2023-09-06 14:34:52
  • python用于url解码和中文解析的小脚本(python url decoder)

    2023-01-28 06:19:00
  • js实现微信聊天效果

    2024-04-16 09:14:33
  • Keras之fit_generator与train_on_batch用法

    2021-07-10 18:19:31
  • MySql 备忘录

    2024-01-22 12:56:48
  • vue后台管理如何配置动态路由菜单

    2024-05-05 09:25:57
  • PHP file_get_contents 函数超时的几种解决方法

    2024-06-05 09:35:53
  • 如何搜索查找并解决Django相关的问题

    2022-02-12 09:58:51
  • ASP网站远程客户实现EXCEL打印功能

    2009-02-02 09:01:00
  • mysql启用skip-name-resolve模式时出现Warning的处理办法

    2024-01-20 06:44:58
  • Python3 基础语法详解

    2023-06-24 06:10:55
  • 解决 myJSFrame 框架中 Ajax 方法一处明显的内存泄露

    2008-03-09 19:14:00
  • vue车牌搜索组件使用方法详解

    2024-04-30 10:30:37
  • 教你使用Python提取视频中的美女图片

    2021-05-21 22:41:50
  • Python调用Windows API函数编写录音机和音乐播放器功能

    2021-06-13 19:03:55
  • vscode搭建go开发环境案例详解

    2024-02-07 06:09:48
  • asp之家 网络编程 m.aspxhome.com