js调试工具包括哪些(这几个JS调试方法知道很受益)
js调试工具包括哪些(这几个JS调试方法知道很受益)上面那段foreach执行的时间就是0.66ms。输出结果:看控制台打印出来是什么:对,这一下就明白了,就是到我里的一个代码执行路径的跟踪。console.time和console.timeEnd这两个方法可以用来让WEB开发人员测量一个javascript脚本程序执行消耗的时间。随着WEB应用越来越重要,JavaScript的执行性能也日益受到重视,WEB开发人员知道一些性能测试机器是必须的。下面看一下:
点击上方蓝字关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!
写JS的人,对console.log在熟悉不过了,它也是我学习前端第一个学会的调试BUG的方法。
直接写在代码里,然后在在控制台看打印出来的信息。通常使用方法有下面这些:
通常的用法有,日志,信息,警告,错误的输出。控制台的输出是这样的:
看控制台打印出来是什么:
对,这一下就明白了,就是到我里的一个代码执行路径的跟踪。
二、console.time&console.timeEndconsole.time和console.timeEnd这两个方法可以用来让WEB开发人员测量一个javascript脚本程序执行消耗的时间。随着WEB应用越来越重要,JavaScript的执行性能也日益受到重视,WEB开发人员知道一些性能测试机器是必须的。下面看一下:
输出结果:
上面那段foreach执行的时间就是0.66ms。
三、console.memory显示此刻使用的内存信息。如下图所示
jsHeapSizeLimit:JS堆栈内存大小限制。
totalJSHeapSize:可使用的内存。
usedJSHeapSize:JS对象(包括V8引擎内部对象)占用的内存,不得大于totalJSHeapSize,若大于,则可能内存泄漏。
四、console.tableconsole.table(data [ colums]):数据以表格的形式显示,参数至少为一个对象或数组,额外的参数时描述表格的列的数组。
结果输出如下:
五、console.dir将对象以文件树样式按层级展示,打印出object对象的所有属性和属性值。
输出结果:
这里需要注意它和console.log的区别,主要关注的区别就是:console.log可以输出多个参数,console.dir只接受一个参数。
最后总结:
今天就推荐上面五个技巧性的调试bug方法。能提高开发效率的方法就应该去使用。当然,也还有一些别的方法及属性,大家也可以去了解一下。有好东西知道有,知道怎么用,或许就行了。