快捷搜索:  汽车  科技

js调试工具包括哪些(这几个JS调试方法知道很受益)

js调试工具包括哪些(这几个JS调试方法知道很受益)上面那段foreach执行的时间就是0.66ms。输出结果:看控制台打印出来是什么:对,这一下就明白了,就是到我里的一个代码执行路径的跟踪。console.time和console.timeEnd这两个方法可以用来让WEB开发人员测量一个javascript脚本程序执行消耗的时间。随着WEB应用越来越重要,JavaScript的执行性能也日益受到重视,WEB开发人员知道一些性能测试机器是必须的。下面看一下:

点击上方蓝字关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!

写JS的人,对console.log在熟悉不过了,它也是我学习前端第一个学会的调试BUG的方法。

js调试工具包括哪些(这几个JS调试方法知道很受益)(1)

直接写在代码里,然后在在控制台看打印出来的信息。通常使用方法有下面这些:

js调试工具包括哪些(这几个JS调试方法知道很受益)(2)

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

js调试工具包括哪些(这几个JS调试方法知道很受益)(3)

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

js调试工具包括哪些(这几个JS调试方法知道很受益)(4)

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

二、console.time&console.timeEnd

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

js调试工具包括哪些(这几个JS调试方法知道很受益)(5)

输出结果:

js调试工具包括哪些(这几个JS调试方法知道很受益)(6)

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

三、console.memory

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

js调试工具包括哪些(这几个JS调试方法知道很受益)(7)

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

totalJSHeapSize:可使用的内存。

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

四、console.table

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

js调试工具包括哪些(这几个JS调试方法知道很受益)(8)

结果输出如下:

js调试工具包括哪些(这几个JS调试方法知道很受益)(9)

五、console.dir

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

js调试工具包括哪些(这几个JS调试方法知道很受益)(10)

输出结果:

js调试工具包括哪些(这几个JS调试方法知道很受益)(11)

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

最后总结:

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

猜您喜欢: