10个JavaScript调试技巧,帮你更好、更快地调试代码

2023-06-05 0 1,017

增容基本功,在任何人几项控制技术研制中都虽说是不可或缺的专业技能。掌控各式各样增容基本功,倘若能沃苏什卡起著四两拨千斤的效用。比如,加速韦谢列、减少机械故障机率、协助预测方法论严重错误之类。

而在网络前端开发愈来愈关键的那时,如何在前端开发中减少投资成本,提高管理效率,掌控前端开发增容基本功至关关键。

10个JavaScript调试技巧,帮你更好、更快地调试代码

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

1、千万别采用 alert

具体来说, alert根本无法列印出数组,如果列印的第一类不是 String,则会初始化 toString()方式将该第一类转成数组(比如说转成 [object Object]这种),因此假如你列印 String

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

有时他们想晓得几段标识符的操控性或是一个触发器方式须要运转多长时间,这时须要加进计时器,JavaScript提供更多了整套的 console.time方式,比如:

10个JavaScript调试技巧,帮你更好、更快地调试代码

3、采用 debugger打PT5716SB0

有时他们须要吓倒点进行Bareli增容,通常会优先选择在应用程序控制面板间接吓倒点,但这样还须要先去Sources里头找出源代码,接着再找出须要吓倒点的惠亨街标识符,较为陈民。采用 debugger关键字,他们可以间接在源代码中表述PT5716SB0,方便快捷许多,比如说:

10个JavaScript调试技巧,帮你更好、更快地调试代码

4、把 objects 输出成表格

有时你可能有一堆第一类须要查看。你可以用 console.log 把每一个第一类都输出出来,你也可以用 console.table 语句把它们间接输出为一个表格!

10个JavaScript调试技巧,帮你更好、更快地调试代码

输出结果:

10个JavaScript调试技巧,帮你更好、更快地调试代码

5、怎样加速定位 DOM 元素

在元素面板上标记一个 DOM 元素并在 concole 中采用它。Chrome Inspector 的历史记录保存最近的五个元素,最后被标记的元素记为 $0,倒数第二个被标记的记为 $1,以此类推。

如果你像上面那样把元素按顺序标记为 ‘item-4′, ‘item-3’, ‘item-2’, ‘item-1’, ‘item-0

10个JavaScript调试技巧,帮你更好、更快地调试代码

6、节点变化时中断

DOM 是个有趣的东西。有时它发生了变化,但你却并不晓得为什么会这样。不过,如果你须要增容 JavaScript,Chrome 可以在 DOM 元素发生变化的这时候暂停处理。你甚至可以监控它的属性。在 Chrome 探查器上,右键点击某个元素,并优先选择中断(Break on)选项来采用:

10个JavaScript调试技巧,帮你更好、更快地调试代码

7、在控制面板中加速访问元素

在控制面板中执行 querySelector 一种更慢的方式是采用美元符。$(‘css-selector’) 将会返回第一个匹配的 CSS 优先选择器。$$(‘css-selector’) 将会返回所有。如果你采用一个元素超过一次,它就值得被作为一个变量。

10个JavaScript调试技巧,帮你更好、更快地调试代码

8、查看具体的函数初始化和它的参数

在 Chrome 应用程序的控制面板(Console)中,你会把你的注意力集中在具体的函数上。每次这个函数被初始化,它的值就会被记录下来。

10个JavaScript调试技巧,帮你更好、更快地调试代码

接着输出:

10个JavaScript调试技巧,帮你更好、更快地调试代码

9、格式化标识符使增容 JavaScript 变得容易

有时你发现产品有一个问题,而 source map 并没有部署到服务器。千万别害怕。Chrome 可以格式化 JavaScript 文件,使之易读。格式化出来的标识符在可读性上可能不如源标识符 —— 但至少你可以观察到发生的严重错误。点击源标识符查看器上面的美化标识符按钮 {} 即可。

10个JavaScript调试技巧,帮你更好、更快地调试代码

10、用 console.time() 和 console.timeEnd() 测试循环耗时

当你想晓得某些标识符的执行时间的这时候这个工具将会非常有用,特别是当你定位很耗时的循环的这时候。你甚至可以通过标签来设置多个 timer 。demo 如下:

10个JavaScript调试技巧,帮你更好、更快地调试代码

运转结果:

10个JavaScript调试技巧,帮你更好、更快地调试代码

增容,是在项目开发中非常关键的环节,熟练掌控各式各样增容手段,定当为你的职业发展带来诸多利益。但是,在如此多的增容手段中,怎样优先选择一个适合自己当前应用场景的,这须要经验,须要不断尝试积累。

10个JavaScript调试技巧,帮你更好、更快地调试代码

相关文章

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

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