在调试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控制台中，右键单击元素并选择设置中的中断。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。
