当前位置:首页 > 日记 > 正文

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

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

前言

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

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

不同级别日志

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

不同级别的日志

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

包含占位符

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

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

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

包含占位符

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

打印分组信息

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

打印分组信息

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

表达式判断

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

表达式判断

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

表格打印

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

表格打印

函数调用栈信息

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

函数调用栈信息

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

计时

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

一般计时方法

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

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

 console对象计时方法

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

性能分析

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

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

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

 Javascript Profile

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

时间消耗

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

相关文章

Excel怎样设置输入数据自动变成数

Excel怎样设置输入数据自动变成数

输入,设置,数据,方法,数值,  在Excel编辑的时候,在添加数据后自动变成了日期,怎么修改?在Excel中,可以通过设置禁止将数据转换为日期。接下来小编举例简单的例子告诉大家Excel如何设置输入数据自动变成数字。Excel设置输入数据自动变成数值…

excel表格的筛选教程

excel表格的筛选教程

教程,筛选,表格,电脑软件,excel,  Excel的筛选功能如何筛选数据呢?接下来是小编为大家带来的excel表格的筛选教程,供大家参考。excel表格的筛选教程:  筛选步骤1:比如我们建立有三列数据的Excel表来进行说明,分别是商品类别、商品名称和商…

AI基础教程:手把手教你绘制萌萌的

AI基础教程:手把手教你绘制萌萌的

绘制,驯鹿,插画,基础教程,手把手教你,效果图:主要过程:12 3 4 5 阅读全文1 23 4 5 阅读全文1 2 34 5 阅读全文1 2 3 45 阅读全文教程结束,以上就是AI基础教程:手把手教你绘制萌萌的小驯鹿插画的全部内容,希望大家喜欢!相关教程推荐:Illustrat…

jquery 一键复制到剪切板的实例

jquery 一键复制到剪切板的实例

剪切板,一键,实例,电脑软件,jquery,今天做项目有一个功能,通过点击事件复制一段文本到剪切板,在网上找了一些,整理了一下,方便需要的朋友使用。<a id="copy" data-text="123456">复制文本</a>$(function(){ var clipboard = new Clipboa…

微信小程序-获得用户输入内容

微信小程序-获得用户输入内容

输入,用户,程序,内容,电脑软件,在微信小程序里,如何获得用户输入的内容??js: document.getElementById("Content").valuejq:$("#Content").val()在微信小程序中并不能这样写。可以通过组件的属性 bindchange 将用户输入的储存存起来test.wxm…

AngularJS实现上传和预览功能的方

AngularJS实现上传和预览功能的方

方法,上传,功能,电脑软件,AngularJS,本文实例讲述了AngularJS实现图片上传和预览功能的方法。分享给大家供大家参考,具体如下:html5原生方法先看一下html5原生方法上传和预览图片的实现:// <img id="img-preview">var imgPreview = document…

ps背景图层和普通图层怎么互相转换

ps背景图层和普通图层怎么互相转换

背景图层,转换,图层,电脑软件,ps,PS中,怎样把背景图层转换成普通图层呢?普通图层又如何转换成背景图层?下面,小编一 一说下操作方法。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-04在操作界面右下方,这里显…

WPS表格怎么添加下拉列表WPS表格添

WPS表格怎么添加下拉列表WPS表格添

下拉列表,方法,下拉菜单,步骤,表格,  如何在WPS中添加下拉列表呢?通过使用下拉列表,可以更加方便的选择已知项,简各类选择操作。下面小编教你WPS表格怎么添加下拉列表。希望对你有帮助!WPS表格添加下拉列表的步骤首先,在WPS表格中输入要使用…

PHP中error_reporting函数用法详细

PHP中error_reporting函数用法详细

函数用法,详细介绍,电脑软件,PHP,error_reporting,PHP中error_reporting函数用法详细介绍PHP中对错误的处理会用到error_reporting函数,看到最多的是error_reporting(E_ALL ^ E_NOTICE),这个是什么意思呢?下面我们具体分析error_reporting函数…

详细分析单线程JS执行问题

详细分析单线程JS执行问题

执行,单线程,详细,电脑软件,JS,大家在学习javascript的时候很多朋友在执行问题上有疑惑,小编通过本篇文章给大家详细的分析介绍了JS的执行问题,希望能够帮助到你理解。一、介绍随着js不断学习,你可能会慢慢的好奇,用了这么久的js,却不知道这js在…

ps怎么做北极光效果? ps给添加北极

ps怎么做北极光效果? ps给添加北极

教程,北极光,效果,怎么做,电脑软件,ps想要设计激光,该怎么设计呢?下面我们就来看看详细的教程,请看下文详介绍。软件名称:Adobe photoshop 7.01 官方正式简体中文版软件大小:154MB更新时间:2013-04-191、首先打开我们的天空素材,新建一个空白图层,…

canvas压缩转换成base64格式输出文

canvas压缩转换成base64格式输出文

格式输出,文件流,压缩,转换成,电脑软件,昨天研究了一下canvas压缩图片的方法,上传上来给大家分享一下<!--调用canvas方法--> <canvas id="canvas"></canvas> <!--压缩后的图片路劲--> <img src="" class="preview"> <img src="" cla…