我见过太多的学生调试Javascript，却只用简单的console.log甚至alert，看着它给他们抓鸡。因为大部分学生追求优雅高效地编写代码，却忽略了如何优雅高效地调试代码，不得不说有点“偏科”。下面我将分享一些实用又巧妙的调试技巧，希望能让大家在调试自己的代码时更加冷静自信。

1.不要使用警报

首先，alert只能打印字符串。如果打印的对象不是String，它会调用toString()方法将对象变成字符串(如[object Object])，所以除非打印String类型的对象，否则无法得到其他任何信息。其次alert会阻塞UI和javascript的执行，必须点击‘确定’按钮才能继续，效率非常低。因此，喜欢使用alert的学生可以改变这种习惯。

2.学习使用控制台。日志

任何人都可以使用console.log，但是很多学生只知道最简单的console.log(x)会打印这样一个对象。当您的代码中有更多console.logs时，将很难将某个打印结果与代码进行匹配，因此我们可以在打印信息中添加一个标签，以便于区分：

设x=1；console.log('aaaaaaaa '，x)；获取：

标签不一定要有明确的含义，但视觉效果明显，最好有明确的含义。

事实上，console.log可以接收任意数量的参数，最后一起输出这些对象，例如：

如果打印的信息太多，很难找到目标信息，可以在控制台中进行过滤：

专心

使用console.log打印引用类型的对象(如数组和自定义对象)时，输出结果可能不是执行console.log方法时的值。例如：

可以发现，扩展后两个console.log输出的结果是[1，2，3，4]，因为数组是引用类型，所以扩展后得到数组的最新状态。我们可以使用JSON.parse(JSON.stringify(.))要解决这个问题：

3.学习使用console.dir

有时我们想知道DOM对象中有哪些属性和方法，但是传统的console.log只打印HTML标记，如下所示：

它与直接审查要素没有什么不同。

如果我们希望将DOM对象视为JavaScript对象的结构，我们可以使用console.dir，例如：

实际上，console.dir可以打印出任何JavaScript对象的属性列表，比如打印一个方法：

4.学习使用控制台。表格

我们经常会遇到这样的场景：我们得到一个用户列表，每个用户都有很多属性，但我们只想查看其中的一些。用console.log打印出来的时候，我们需要把每个用户对象展开来逐个查看，非常麻烦。而console.table完美地解决了这个问题。例如，我只想获取以下用户的id和坐标：

Console.log打印结果：

控制台.表格打印结果：

非常准确和快速！

5.学会使用控制台。时间

有时我们想知道一段代码的性能或者异步方法需要运行多长时间。此时，需要一个计时器。JavaScript提供了一个现成的console.time方法，例如：

6.使用调试器来中断点

有时我们需要为单步调试设置断点。一般我们选择直接在浏览器控制台中断点。但是，我们需要先在Sources中找到源代码，然后找到需要断点的那一行代码，这是很费时间的。使用调试器关键字，我们可以直接在源代码中定义断点，这样就方便多了，比如：

7.找到源代码文件

有时候我们想在控制台的Sources里面找到一个js源文件，一个个打开文件夹非常麻烦。其实Chrome提供了文件搜索功能，但大部分时候我们都忽略了。

只需按下command p(请自行检查windows的快捷键)，即可弹出搜索框，搜索您想要的文件：

8.压缩JS文件的读取

有时我们需要阅读Sources中的一段js代码，却发现它被压缩了。Chrome还提供了一个方便的格式化工具，使代码再次可读：

点击后，它变成这样：

这是我经常使用的一些调试技巧。如果你还有其他好的调试技巧，欢迎分享。希望他们对你的学习有帮助，支持我们。