8种实用的JavaScript调试技巧

本文概述

我看到太多的人仅使用console.log调试JavaScript代码, 甚至只是简单地发出alert。他们追求优雅, 高效的代码, 但忽略了优雅, 高效的调试代码。今天, 我将分享一些实用的调试技术, 并希望它们可以帮助你更加自信地调试js代码。

1.不要使用alert

首先, alert方法只能打印出字符串。如果打印的对象不是String, 则将调用toString()方法将对象转换为字符串(例如, 将对象转换为[object Object])。因此, 除非你以String类型打印对象, 否则将无法获得其他信息。其次, alert将阻止UI线程, 只有在单击“确定”按钮之后, JavaScript代码才会继续执行。因此它效率很低。因此, 最好改变使用alert的习惯。

2.学习使用console.log

每个人都知道如何使用console.log, 但是许多人只知道最简单的console.log(x)来打印对象。当你的代码中包含更多console.log时, 将很难找到相应的打印结果。因此, 我们可以在打印信息中添加标签以进行区分:


let x = 1;
console.log('aaaaaaaa', x);

结果:

8种实用的JavaScript调试技巧

标签不需要定义良好, 但是视觉效果必须引人注目。当然, 最好给标签起一个有意义的名字。

实际上, console.log可以接收任意数量的参数, 并最终进行拼接并输出这些对象, 例如:

8种实用的JavaScript调试技巧

如果打印的信息太多, 并且很难找到目标信息, 则可以在控制台中对其进行过滤:

8种实用的JavaScript调试技巧

注意当你使用console.log打印引用类型的对象(例如数组或自定义对象)时, 输出结果可能不是执行console.log方法时的值。例如:可以发现两个console.log的输出结果均为[1、2、3、4]。由于该数组是引用类型, 因此在调用console.log方法时将获得该数组的最新状态。我们可以使用JSON.parse(JSON.stringify(…))解决问题:

3.学习使用console.dir

有时, 我们可能想查看DOM对象中存在哪些属性和方法, 但是console.log方法仅打印HTML标记, 如下所示:

8种实用的JavaScript调试技巧

如果要获取DOM对象的结构, 可以使用console.dir, 例如:

8种实用的JavaScript调试技巧

实际上, console.dir可以打印出任何JavaScript对象的属性列表, 例如打印方法的属性列表:

8种实用的JavaScript调试技巧

4.学习使用console.table

当我们获得用户列表时, 通常每个用户都有多个属性。但是, 我们通常只希望查看其中一些属性, 因此在使用console.log打印时, 需要扩展每个用户对象。好了, console.table可以完美地解决问题。例如, 如果我只想获取以下用户的ID和坐标,

用console.log打印的结果是:

8种实用的JavaScript调试技巧

使用console.table打印的结果是:

8种实用的JavaScript调试技巧

后者是如此精确和快速!

5.学习使用console.time

有时我们可能想知道一段代码的性能或异步方法需要运行多长时间, 因此我们需要使用计时器, 而JavaScript为我们提供了console.time方法。例如:

8种实用的JavaScript调试技巧

6.使用调试器中断点

有时我们需要断点进行单步调试, 通常我们会选择直接在浏览器控制台中断点。但是, 如果这样做, 则需要先转到“源代码”面板以找到源代码, 然后找到需要断点的代码行。我们可以使用debugger关键字直接在源代码中定义断点。例如:

8种实用的JavaScript调试技巧

7.查找源文件

有时我们可能想在控制台的“源代码”中找到一个js源文件, 并且一一打开这些文件夹会很麻烦。实际上, Chrome为我们提供了文件搜索功能, 但是大多数时候我们都忽略它。

8种实用的JavaScript调试技巧

只需按Command + P(请自行检查Windows快捷方式)即可弹出搜索框并查找要查找的文件:

8种实用的JavaScript调试技巧

8.阅读压缩的JavaScript代码

有时我们需要阅读Sources中的一段js代码, 但发现它已被压缩。 Chrome提供了一种方便的格式化工具, 以使代码可读:

8种实用的JavaScript调试技巧

然后, 它变成:

8种实用的JavaScript调试技巧

这些是我使用的一些调试技巧。谢谢阅读。

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?