这几个JS调试方法知道很受益

写JS的人,对console.log在熟悉不过了,它也是我学习前端第一个学会的调试BUG的方法。直接写在代码里,然后在在控制台看打印出来的信息。通常使用方法有下面这些:

通常的用法有,日志,信息,警告,错误的输出。控制台的输出是这样的:

由此,这几种方式,我们几乎一直都在用,然而,我们也可以用一些不一样的方式去做调试,让我们的工作更具有专业性。下面,小郑给大家列举一下(搞几个有用的):

一、console.trace

根据MDN的提供的定义:用来获取带有记录数据的堆栈跟踪。

什么意思呢?下面我举一个例子,瞬间就明白了

看控制台打印出来是什么:

对,这一下就明白了,就是到我里的一个代码执行路径的跟踪。

二、console.time&console.timeEnd

console.time和console.timeEnd这两个方法可以用来让WEB开发人员测量一个javascript脚本程序执行消耗的时间。随着WEB应用越来越重要,JavaScript的执行性能也日益受到重视,WEB开发人员知道一些性能测试机器是必须的。下面看一下:

输出结果:

上面那段foreach执行的时间就是0.66ms。

三、console.memory

显示此刻使用的内存信息。如下图所示

jsHeapSizeLimit:JS堆栈内存大小限制。

totalJSHeapSize:可使用的内存。

usedJSHeapSize:JS对象(包括V8引擎内部对象)占用的内存,不得大于totalJSHeapSize,若大于,则可能内存泄漏。

四、console.table

console.table(data [, colums]):数据以表格的形式显示,参数至少为一个对象或数组,额外的参数时描述表格的列的数组。

结果输出如下:

五、console.dir

将对象以文件树样式按层级展示,打印出object对象的所有属性和属性值。

输出结果:

这里需要注意它和console.log的区别,主要关注的区别就是:console.log可以输出多个参数,console.dir只接受一个参数。

最后总结:

今天就推荐上面五个技巧性的调试bug方法。能提高开发效率的方法就应该去使用。当然,也还有一些别的方法及属性,大家也可以去了解一下。有好东西知道有,知道怎么用,或许就行了。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180316A1RLPL00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券