8种实用的JavaScript调试技巧

本文概述

• 1.不要使用alert
• 2.学习使用console.log
• 3.学习使用console.dir
• 4.学习使用console.table
• 5.学习使用console.time
• 6.使用调试器中断点
• 7.查找源文件
• 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);

结果：

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

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

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

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

3.学习使用console.dir

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

如果要获取DOM对象的结构, 可以使用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关键字直接在源代码中定义断点。例如：

7.查找源文件

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

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

8.阅读压缩的JavaScript代码

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

然后, 它变成：

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