调试Javascript时，我们通常会使用Chrome或Firefox附带的调试工具。本文列出了调试Javascript的几种技术。掌握它们将使我们花更少的时间解决错误和bug，从而提高开发效率。

1.调试器

除了console.log，调试器是我们最喜欢的快速调试工具。执行完代码后，Chrome在执行时会自动停止。您甚至可以将其打包为一个条件，并仅在需要时运行它。

if(this hing){调试器；}2.在表格中显示对象

有时，需要查看一组复杂的对象。您可以查看和滚动console.log，或者使用console.table进行扩展，这样可以更容易地看到正在处理的内容！

var animals=[ { animal: 'Horse '，name: 'Henry '，age: 43 }，{ animal: 'Dog '，name: 'Fred '，age: 13 }，{ animal: 'Cat '，name: 'Frodo '，age : 18 }]；控制台.桌子(动物)；

3.使用不同的屏幕尺寸

在桌面上安装不同的移动设备模拟器是很棒的，但在现实中是不可行的。如何调整窗口大小？Chrome提供你需要的一切。跳到控制台，单击“切换设备模式”按钮。看着窗户变就行了！

4.使用console.time()和console.timeEnd()测试环路

了解一些代码的执行时间非常有用，尤其是在调试慢速循环时。您甚至可以通过向方法传递不同的参数来设置多个计时器。让我们看看它是如何工作的：

console . time(' timer 1 ')；var items=[]；for(var I=0；我10万；I){ items . push({ index : I })；} console . timeend(' timer 1 ')；该操作产生了以下结果：

5.调试JavaScript前格式化代码

有时，代码会在生产环境中出错，但是您的源映射并没有部署在生产环境中。不要害怕。Chrome可以格式化你的JavaScript文件。格式化的代码没有真正的代码有用，但至少你可以看到发生了什么。在Chrome控制台的源代码查看器中，单击{}按钮。

6.观察特定函数的调用和参数。在Chrome控制台中，可以观察特定的功能。每次调用该函数时，都会打印出传入的参数。

var func1=函数(x，y，z) { //.};输出：

这是查看传入函数参数的好方法。然而，如果控制台提示我们形式参数的数量会更好。在上面的例子中，func1需要3个参数，但是只传入了2个参数。如果代码中没有处理此参数，则可能会出现错误。

7.快速访问控制台中的元素

在控制台中比querySelector更快的方法是使用美元符号，并且$(“css选择器”)将返回CSS选择器的第一个匹配项。$ $(“CSS选择器”)将返回所有匹配项。如果多次使用一个元素，可以将其保存为变量。

8.邮递员很棒(但火狐更快)

许多开发人员使用邮递员来查看ajax请求。邮差真的很优秀。但是打开一个新的窗口，写下请求的对象，然后测试它们是非常麻烦的。

有时使用浏览器更容易。

当您使用浏览器查看时，如果您请求密码身份验证页面，则无需担心身份验证cookie。让我们看看如何在火狐中编辑和重新发送请求。

打开控制台并切换到网络选项卡。右键单击所需的请求，然后选择编辑并重新发送。现在你可以随心所欲地改变。更改标题并编辑参数，然后点按“重新发送”。

以下是我用不同属性提出的两个请求：

9.中断节点更改

DOM是一个有趣的东西。有时候会变，你不知道为什么。但是，当您调试JavaScript时，Chrome可以在DOM元素发生变化时暂停。您甚至可以监控它的属性。在Chrome控制台中，右键单击元素，并在设置中选择中断：

Chrome和Firefox自带的网页调试工具非常强大，还有很多非常实用的小功能需要探索。