这几个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方法。能提高开发效率的方法就应该去使用。当然，也还有一些别的方法及属性，大家也可以去了解一下。有好东西知道有，知道怎么用，或许就行了。