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打印的结果是：