龙空技术网

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

小郑搞码事 1336

前言:

如今兄弟们对“js图片上传限制大小”都比较看重,姐妹们都需要知道一些“js图片上传限制大小”的相关文章。那么小编也在网络上网罗了一些关于“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方法。能提高开发效率的方法就应该去使用。当然,也还有一些别的方法及属性,大家也可以去了解一下。有好东西知道有,知道怎么用,或许就行了。

标签: #js图片上传限制大小 #怎么调试js #js如何调试 #js调试视频教程 #js调试输出