符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
小编给大家分享一下Javascript中有哪些调试技巧,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
成都创新互联公司是一家集网站建设,雁塔企业网站建设,雁塔品牌网站建设,网站定制,雁塔网站建设报价,网络营销,网络优化,雁塔网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。1. 不要使用alert
首先,alert
只能打印出字符串,如果打印的对象不是String
,则会调用toString()
方法将该对象转成字符串(比如转成[object Object]
这种),所以除非你打印String
类型的对象,其他什么信息都获取不到。其次,alert
会阻塞UI和javascript的执行,必须点击'OK'按钮才能继续,非常低效。所以,喜欢使用alert
的同学可以改改这个习惯了。
2. 学会使用console.log
console.log
谁都会用,但是很多同学只知道最简单的console.log(x)
这样打印一个对象,当你的代码里面console.log
多了之后,会很难将某条打印结果和代码对应,所以我们可以给打印信息加上一个标签便于区分:
let x = 1; console.log('aaaaaaaa', x);
得到:
标签不一定要有明确的含义,视觉效果显著就可以了,当然有明确意义更好。
事实上,console.log
可以接收任意多的参数,最后将这些对象拼接输出,比如:
如果打印信息过多,不容易找到目标信息的话,可以在控制台中进行过滤:
注意点
在使用console.log
打印一个引用类型(比如数组和自定义对象)的对象的时候,输出结果可能并不是执行console.log
方法那个时间点的值。举个例子:
可以发现两个console.log
输出的结果展开后都是[1, 2, 3, 4]
,因为数组是引用类型,所以在展开后获取到的都是数组最新的状态。我们可以使用JSON.parse(JSON.stringify(...))
来解决这个问题:
3. 学会使用console.dir
我们有时候想看看一个DOM对象里面到底有什么属性和方法,但是常规的console.log
打印出来的只是HTML标签,就像这样:
和直接审查元素没有什么区别。
如果我们想看到DOM对象作为JavaScript对象的结构可以使用console.dir
,比如:
事实上,console.dir
可以打印出任何JavaScript对象的属性列表,比如打印一个方法:
4. 学会使用console.table
我们经常会遇到这样的场景:获取到一个用户列表,每个用户有很多属性,但是我们只想查看其中的某些属性,在用console.log
打印出来的时候需要把每个用户对象展开一个个查看,非常麻烦。而console.table
完美的解决这个问题,比如我只想获取到下列用户的id和坐标:
console.log
打印结果:
console.table
打印结果:
非常的准确和快速!
5. 学会使用console.time
有时候我们想知道一段代码的性能或者一个异步方法需要运行多久,这时候需要用到定时器,JavaScript提供了现成的console.time
方法,例如:
6. 使用debugger打断点
有时候我们需要打断点进行单步调试,一般会选择在浏览器控制台直接打断点,但这样还需要先去Sources里面找到源码,然后再找到需要打断点的那行代码,比较费时间。使用debugger
关键词,我们可以直接在源码中定义断点,方便很多,比如:
7. 查到源码文件
有时候我们想在控制台的Sources
中查找某个js源文件,要把文件夹逐一点开找,非常麻烦。其实Chrome提供了文件的搜索功能,只不过大部分时候我们给忽略了。。
只要按Command + P
(windows的快捷键请自行查看)就能弹出搜索框搜索你想要找的文件啦:
8. 压缩JS文件的阅读
有时候我们需要在Sources
中阅读一段js代码,但是发现它被压缩了,Chrome也提供了和方便的格式化工具,让代码变得重新可读:
点完之后变成这样:
以上是“Javascript中有哪些调试技巧”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!