调试js js如何debug

在调试Jascript时，我们通常使用Chrome和Firefox的控制台作为调试工具。本文列举了几种调试Jascript的技巧，掌握它们会让我们花更少的时间解决错误和bug，从而提高开发效率。

1. debugger

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

如果(这东西){

调试器；

}

2. 用表格显示对象

有时，需要查看一组复杂的对象。您可以查看和滚动console.log，或者使用console.table来展开，这样可以更容易地看到您正在做什么！

var animals = [

{动物:’马’，名字:’亨利’，年龄:43 }，

{动物:’狗’，名字:’弗雷德’，年龄:13 }，

{动物:’猫’，名字:’佛罗多’，年龄:18 }

];

console.table(动物)；

3. 使用不同屏幕尺寸

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

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

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

console.time(‘定时器1 ‘)；

var items =[]；

for(var I = 0；我& lt100000;i++){

items . push({ index:I })；

}

console . time end(‘ time R1 ‘)；

该行动产生了以下结果:

5. 将代码格式化后再调试JaScript

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

6. 观察特定函数的调用及参数

在Chrome控制台中，你可以观察特定的功能。每次调用这个函数，传入的参数都会被打印出来。

var func1 = function(x，y，z) {//….};输出:

这是查看传入函数参数的好方法。但是，如果控制台提示我们输入形参的数量，那就更好了。在上面的示例中，func1需要3个参数，但只传入了2个参数。如果代码中没有处理这个参数，很可能是一个错误。

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

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

8. Postman 很棒（但Firefox更快）

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

有时候用浏览器更容易。

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

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

这里是我用不同的属性提出的两个请求:

9.中断节点变化

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