这10个实用的Javascript调试技巧,你知道吗?

2023-06-19 0 712

见过太多老师增容Javascript只会用单纯的console.log即使alert,看著真为她们心急。即使绝大多数老师崇尚典雅而高效率地写标识符,却忽视了怎样典雅而高效率地增容标识符,不得已说是有点儿“Nomeny”了。

上面我就撷取许多新颖且精明的增容基本功,期望能让他们增容她们标识符的这时候更为淡然自信心。

1、千万别采用alert

具体来说,alert根本无法列印出数组,假如列印的第一类并非String,则会初始化toString()

其二,alert会堵塞UI和javascript的竭尽全力执行,要点选OK按键就可以竭尽全力,十分低效率。因此,讨厌采用alert的老师能啥这时候那个生活习惯了。

2、专业委员会采用console.log

console.log谁单厢用,但许多老师只晓得最单纯的console.log(x)这种打印两个第一类,当你的标识符里头console.log多了后,会极难将wlzwyyan列印结论和标识符相关联,因此他们能给列印信息加之两个条码易于界定:

这10个实用的Javascript调试技巧,你知道吗?
这10个实用的Javascript调试技巧,你知道吗?

获得:

这10个实用的Javascript调试技巧,你知道吗?

条码不一定要有明晰的涵义,声效明显就能了,总之有明晰意义更快。

实际上,console.log能转交任一多的模块,最终将那些第一类堆叠输入,比如说:

这10个实用的Javascript调试技巧,你知道吗?

假如列印信息过多,不容易找到目标信息的话,能在控制台中进行过滤:

这10个实用的Javascript调试技巧,你知道吗?

注意点

在采用console.log列印两个引用类型(比如说数组和自定义第一类)的第一类的这时候,输入结论可能并并非竭尽全力执行console.log方法那个时间点的值。举个例子:

这10个实用的Javascript调试技巧,你知道吗?
这10个实用的Javascript调试技巧,你知道吗?

能发现两个console.log输入的结论展开后都是[1, 2, 3, 4],因

这10个实用的Javascript调试技巧,你知道吗?

3、给console.log添加样式

假如他们不想console.log列印结论字体、颜色都一样,他们想要更醒目的显示也能做到。他们能采用CSS来给console.log增加样式。比如说:

这10个实用的Javascript调试技巧,你知道吗?
这10个实用的Javascript调试技巧,你知道吗?

4、专业委员会采用console.dir

他们有这时候想看看两个DOM第一类里头到底有什么属性和方法,但常规的console.log列印出来的只是HTML条码,就像这种:

这10个实用的Javascript调试技巧,你知道吗?
这10个实用的Javascript调试技巧,你知道吗?

和直接审查元素没有什么区别。

假如他们想看到DOM第一类作为JavaScript第一类的结构能采用console.dir,比如说:

这10个实用的Javascript调试技巧,你知道吗?
这10个实用的Javascript调试技巧,你知道吗?

实际上,console.dir能列印出任何JavaScript第一类的属性列表,比如说列印两个方法:

这10个实用的Javascript调试技巧,你知道吗?

5、专业委员会采用console.table

到下列用户的id和坐标:

console.log列印结论:

这10个实用的Javascript调试技巧,你知道吗?
这10个实用的Javascript调试技巧,你知道吗?

console.table列印结论:

这10个实用的Javascript调试技巧,你知道吗?

十分的准确和快速!

6、 专业委员会采用console.time

有这时候他们想晓得一段标识符的性能或者两个异步方法需要运行多久,这这时候需要用到定时器,JavaScript提供了现成的console.time方法,例如:

这10个实用的Javascript调试技巧,你知道吗?
这10个实用的Javascript调试技巧,你知道吗?

7、 快速查找DOM元素

有时他们需要查找网页上的某些元素,会选择在浏览器控制台通过document.querySelector/document.querySelectorAll来查询。但chrome和firefox提供了一种更快的方法,采用类似于jQuery的查询语句:

这10个实用的Javascript调试技巧,你知道吗?
这10个实用的Javascript调试技巧,你知道吗?

$(.item)返回符合条件的第两个元素,$$(.item)返回所有符合条件的元素。

8、 采用debugger打断点

有这时候他们需要打断点进行单步增容,一般会选择在浏览器控制台直接打断点,但这种还需要先去Sources里头找到源码,然后再找到需要打断点的那行标识符,比较费时间。采用debugger关键词,他们能直接在源码中定义断点,方便许多,比如说:

这10个实用的Javascript调试技巧,你知道吗?
这10个实用的Javascript调试技巧,你知道吗?

9、查到源码文件

有这时候他们想在控制台的Sources中查找某个js源文件,要把文件夹逐一点开找,十分麻烦。其实Chrome提供了文件的搜索功能,只不过大部分这时候他们给忽视了。。

这10个实用的Javascript调试技巧,你知道吗?

只要按Command + P(windows的快捷键请自行查看)就能弹出搜索框搜索你想要找的文件啦:

这10个实用的Javascript调试技巧,你知道吗?

10、压缩JS文件的阅读

有这时候他们需要在Sources中阅读一段js标识符,但发现它被压缩了,Chrome也提供了和方便的格式化工具,让标识符变得重新可读:

这10个实用的Javascript调试技巧,你知道吗?
这10个实用的Javascript调试技巧,你知道吗?

点完后变成这种:

这10个实用的Javascript调试技巧,你知道吗?

以上就是我个人在平时比较常用的一些增容小基本功,假如他们有其他好的增容基本功也欢迎撷取,谢谢。

这10个实用的Javascript调试技巧,你知道吗?

原文:这10个新颖的Javascript增容基本功,你晓得吗?_jinmu520的博客-CSDN博客

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务