对于调试JavaScript，当然是越快越好，这里我们罗列一些重要的技巧，教你如何更快更高效地调试JS。更快地调试JavaScript熟悉工具对于完成工作至关重要。尽管JavaScript是出了名的难以调试，但如果您知道一些技巧，就可以花更少的时间来解决这些错误和错误。我们在这里列出了16个您可能不知道的调试技巧，但它们可能是您下次调试JavaScript代码时想要记住的。如果您想更快地调试JavaScript错误，可以尝试RaygunCrashReporting，它可以为您提供有关错误的警告和堆栈跟踪。这里提到的大部分技巧都是基于Chrome和Firefox的，尽管许多技巧同样适用于其他检查器。1.Debugger除了console.log，debugger是我最喜欢的快速直接的调试工具。如果你嵌入调试器；在您的代码中，Chrome会在到达此点时自动停止。您甚至可以将它放在条件语句中，以便它仅在您需要时运行。if(thisThing){debugger;}2.在表中显示对象有时您希望查看一组特别复杂的对象。您可以使用console.log打印出整个列表，或者使用console.table帮助显示。这样可以更轻松地查看您正在处理的内容。varanimals=[{animal:'Horse',name:'Henry',age:43},{animal:'Dog',name:'Fred',age:13},{animal:'Cat',name:'Frodo',年龄:18}];console.table（动物）；将输出：3.尝试所有尺寸虽然将所有移动设备都放在桌子上固然很好，但这是不现实的。如何调整视觉视口的大小？Chrome拥有您需要的一切。打开浏览器的检查器并单击按钮选择设备模式。你可以观察媒体查询（mediaqueries）。4、如何快速找到你需要的DOM元素在元素面板中标记一个DOM元素，在控制台中使用。Chrome的Inspector会保存历史记录中的最后5个元素，最后标记的元素会显示为1，以此类推。如果你依次标记“item4”、“item-3”、“item-2”、“item-1”、“item-0”，那么你就可以在控制台访问DOM节点，如下图。5.使用console.time()和console.timeEnd()测量循环速度。了解执行一段代码需要多长时间非常有帮助，尤其是在调试慢速代码时。您甚至可以通过为函数分配不同的标记值来设置多个定时器。让我们看看它是如何工作的：console.time('Timer1');varitems=[];for(vari=0;i<100000;i++){items.push({index:i});}console.timeEnd('定时器1');它将输出：6.获取函数的堆栈跟踪您可能知道JavaScript框架可以快速生成大量代码。您将拥有许多视图并触发许多事件，因此您最终会遇到这样一种情况：您想知道是什么触发了特定的函数调用。因为JavaScript不是一种非常结构化的语言，所以有时很难知道发生了什么以及发生的时间。这就是使用console.trace（或者直接在控制台中使用trace）的时候了。假设您想在第33行查看car实例中对funcZ的函数调用的整个堆栈跟踪：(){}varfunc4=function(){car=newCar();car.funcX();}varCar=function(){this.brand='volvo';this.color='red';this.funcX=function(){this.funcY();}this.funcY=function(){this.funcZ();}this.funcZ=function(){console.trace('tracecar')}}func1();varcar;varfunc1=function(){func2();}varfunc2=function(){func4();}varfunc3=function(){}varfunc4=function(){car=newCar();car.funcX();}varCar=function(){this.brand='volvo';this.color='red';this.funcX=function(){this.funcY();}this.funcY=function(){this.funcZ();}this.funcZ=function(){console.trace('tracecar')}}func1();第33行会输出：现在我们可以发现func1调用func2，func2调用func4，func4创建Car实例并调用car.FuncX，等等。即使您认为自己已经熟悉脚本，您也会发现这种方法非常方便。如果你想提高你的代码质量，你可以获得所有的痕迹和相关的功能。它们中的每一个都是可点击的，您可以来回切换，对您来说就像一个菜单。7.解压代码让调试JavaScript更简单在线产品有时可能会遇到这样的问题，服务器没有提供源映射（sourcemaps）的功能。不用担心，Chrome可以将您的JavaScript文件解压缩为更易读的形式。该代码不会像真实代码那样有用，但至少您可以理解发生了什么。您可以点击检查器中源代码视图下方的{}按钮来格式化代码。8.快速找到需要调试的函数如果要在函数中设置断点，有两种方法：在检查器中找到那一行，添加断点将调试器添加到脚本代码中以上两种方法，你需要手动在文件中找到自己需要调试的具体代码行。一个比较不为人知的方法是在控制台使用debug(函数名)，这样脚本在执行这个函数的时候会自动停止。这种方法速度极快，缺点是不能用在私有函数和匿名函数上。除此之外，这可能是找到您需要调试的函数的最快方法。（注意：有一个函数叫做console.debug，尽管名字相似，但它和这个不是一回事）varcar;varfunc1=function(){func2();}varfunc2=function(){func4();}varfunc3=function(){}varfunc4=function(){car=newCar();car.funcX();}varCar=function(){this.brand='volvo';this.color='red';这。funcX=function(){this.funcY();}this.funcY=function(){this.funcZ();}this.funcZ=function(){console.trace('tracecar')}}func1();瓦卡;varfunc1=function(){func2();}varfunc2=function(){func4();}varfunc3=function(){}varfunc4=function(){car=newCar();car.funcX();}varCar=function(){this.brand='volvo';this.color='red';this.funcX=function(){this.funcY();}this.funcY=function(){this.funcZ();}this.funcZ=function(){console.trace('tracecar')}}func1();在控制台输入debug(car.funcY)，当有调用car.funcY的函数时，脚本会停止并进入调试模式。9.排除与错误无关的脚本今天我们在Web应用程序中使用许多库和框架，其中大多数都经过全面测试，可以假设它们相对没有错误。但是调试器仍然会进入所有这些与调试任务无关的文件。解决方法是把不需要调试的脚本放到黑盒子里，黑盒子里也可以包含一些自己写的脚本代码。您可以在这篇调试黑盒文章中阅读更多详细信息。https://raygun.com/blog/javascript-debugging-with-black-box/10。在复杂的调试中找到重要的东西在更复杂的调试情况下，我们有时想要输出很多行。在这里，我们可以利用各种控制台功能使输出保持更具可读性的结构。比如console.log,console.debug,console.warn,console.info,console.error等，可以在inspector中过滤。有时这可能不是你在调试时想要达到的效果，但如果有必要，你可以让你输出的信息更加多样，有自己的风格。当你想调试JavaScript时，你可以使用CSS创建你自己的格式化控制台消息：console.todo=function(msg){console.log('%c%s%s%s','color:yellow;background-color:black;','–',msg,'–');}console.important=function(msg){console.log('%c%s%s%s','color:brown;font-weight:bold;text-decoration:underline;','–',msg,'–');}console.todo("Thisissomethingthat'sneedtobefixed");console.important('Thisisanimportantmessage');它会输出：在console.log()中，可以使用%s表示字符串，%i表示整数，%c表示自定义样式。您可能会找到其他更好的方法来使用这些样式。如果您使用的是单页框架，您可能需要一种样式用于消息，一种样式用于模型，一种样式用于集合，另一种样式用于控制器，等等。11、查看具体的函数调用和参数在Chrome的控制台中，可以查看一些具体的函数。每次调用这些函数时，都会输出传递给函数的参数。varfunc1=函数(x,y,z){//...};它将输出：这是查看传递给函数的参数的好方法。理想情况下，控制台能够知道一个函数需要多少个参数，但事实并非如此。在上面的示例中，func1需要三个参数，但只传入两个。如果在代码中处理不当，这可能会导致潜在的错误。12.快速访问控制台中的元素在控制台中完成选择器查询（querySelector）的更快方法是使用.('css-selector')将返回第一个匹配项，.$$('css-selector')将返回所有匹配项。如果多次使用一个元素，请将其存储在变量中。13、Postman是一个非常好的工具很多开发者使用Postman来配合Ajax请求的使用。Postman很牛逼，但是很烦人的是，每次打开一个新的浏览器窗口，都需要写一个新的请求对象，然后再测试。有时使用浏览器更容易。当您这样做时，如果它是一个密码安全页面（password-securepage），您就不再需要担心身份验证cookie。要在Firefox中编辑和重新发送请求，您只需打开Insepctor，转到“网络”选项卡，右键单击要修改和编辑的请求，然后重新发送。现在您可以更改任何您想要的内容、更改标题、编辑参数，然后点击重新发送。下面我展示了一个具有两个不同属性的请求：14.在节点DOM上设置断点可能是一件特别有趣的事情。有时某些事情会发生变化，而您却不知道为什么。但是，当您需要调试JavaScript时，您可以通过Chrome阻止DOM元素发生变化。你甚至可以看到它的属性。在Chrome的Inspector中，右键单击该元素并选择一个条件来设置断点：15.使用页面速度服务（pagespeedservice）有许多服务和工具可以帮助您检查页面的JavaScript以找出问题所在哪些运行缓慢并且有问题。有问题的地方。一种这样的工具是Raygun真实用户监控。除了帮助查找JavaScript问题（例如外部脚本加载缓慢、不必要的CSS、过大的图像）之外，该工具在其他方面也非常有用。它还可以帮助您找到无意中导致加载时间过长或脚本无法正确执行的JavaScript问题。您还可以使用它来衡量JavaScript代码的性能改进并跟踪更改。16、多使用断点最后，合理正确的使用断点可以帮助你调试成功。尝试在不同情况下以不同方式使用断点。您可以单击一个元素来设置断点，以便在修改该元素时停止执行。您还可以通过在开发人员工具的“调试器”或“源代码”选项卡（取决于您的浏览器）中的任何源代码上设置XHR断点来停止Ajax请求。在同一个地方，当抛出异常时代码执行被暂停。您可以在浏览器中使用各种断点来最大限度地提高发现错误的机会，而不是花时间寻找外部工具。总结综上所述，有很多方法可以帮助调试JavaScript代码。我们在这里列出了其中的16个。如果您希望开始寻找浏览器之外的工具来帮助优化您的浏览器，这里有一篇特别有用的文章列出了一些JavaScript调试工具。无论如何，您应该能够使用这些调试技巧来开始调试您的JavaScript代码，使您的代码没有错误，并为部署和发布做好准备！
