技术领域总是充满着神秘的未知和挑战，引人入胜。就像JavaScript一样，即使对于每天使用它与开发进行交互的开发人员来说，该语言的某些部分仍未被开发。了解工具可以让工具最大限度地帮助你完成任务。虽然JavaScript调试很麻烦，但是如果掌握了窍门，还是可以在尽可能短的时间内解决这些错误（errors）和问题（bugs）。下面小编列举了14个关于JavaScript的调试技巧。虽然调试技术也可以与其他检查工具一起使用，但大多数技术都用于ChromeInspector和Firefox。1.'调试器;''debugger'是除了console.log之外最好用的调试工具，简单暴力。把它写进代码里，chrome运行起来就会自动停在那里。您甚至可以将其包装在条件语句中，以便仅在需要时执行。它也是一个非常有用的调试工具。如果（thisThing）{调试器；}2。在将对象输出到表中时，您可能有一堆对象要检查。可以使用console.log输出每个对象，也可以使用console.table语句直接将所有对象输出到一个表中。demo如下：varanimals=[{animal:'Horse',name:'Henry',age:43},{animal:'Dog',name:'Fred',age:13},{animal:'Cat',name:'Frodo',age:18}];console.table(animals);Output:3.各种尺寸都试过了虽然把各种手机放在桌子上看起来很酷，但并不好。现实。但是，您需要的一切都在浏览器中提供。转到检查面板并单击“切换设备模式”按钮。这样，可以在窗口内调整视口的大小。4、如何快速定位DOM元素在元素面板上标记一个DOM元素，在控制台中使用。ChromeInspector的历史跟踪最后五个元素，$0是最后一个标记的元素，$1是倒数第二个标记的元素，依此类推。如果将元素按顺序标记为'item-4'、'item-3'、'item-2'、'item-1'、'item-0'，如下所示，您可以在控制台节点中获取DOM：5.用console.time()和console.timeEnd()测试循环耗时这个工具在你想知道一些代码的执行时间时会非常有用，特别是当你定位到一个耗时循环的时候。您甚至可以通过标签设置多个计时器。demo如下：console.time('Timer1');varitems=[];for(vari=0;i<100000;i++){items.push({index:i});}console.timeEnd('Timer1');运行结果：6.获取函数的stacktrace信息在使用JavaScript框架时会产生大量的代码。它创建触发事件的视图，并最终想知道函数调用是如何发生的。因为JavaScript不是一种非常结构化的语言，所以有时很难完全理解到底发生了什么以及何时发生。这时候就轮到console.trace（只能在终端trace）调试JavaScript了。假设现在您想查看第33行的car实例调用的funcZ函数的完整堆栈跟踪信息：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();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变得容易有时你会发现生产中出现了问题，sourcemap没有部署到服务器上。不要害怕。Chrome可以格式化JavaScript文件以使其易于阅读。格式化后的代码可能不如源代码可读-但至少您可以在错误发生时观察到它们。点击源代码查看器下方的美化代码按钮{}。8.快速找到调试函数下面看看如何在函数中设置断点。通常，有两种方法：在查看器中找到一行代码，并在此处添加断点在脚本中添加调试器这两种方法都必须在文件中找到需要调试的行。使用控制台是一种不太常见的方法。在控制台中使用debug(funcName)，代码将在进入此处指定的函数时停止。此操作速度很快，但不能与本地或匿名函数一起使用。但如果这两种情况都不是，这可能是调试函数的最快方法。（注意：此处未调用console.debug函数）。varfunc1=function(){func2();};varCar=function(){this.funcX=function(){this.funcY();}this.funcY=function(){this.funcZ();}}varcar=新车（）；在控制台输入debug(car.funcY)，在debug模式下输入car.funcY时脚本会停止运行：9.屏蔽无关代码现在的应用中经常会引入多个库或者框架。其中大多数都经过良好测试并且相对没有错误。但是，调试器仍会进入与此调试任务无关的文件。解决方法是屏蔽不需要调试的脚本。当然这也可以包括您自己的脚本。在此处阅读有关调试不相关代码的更多信息(http://raygun.com/blog/javascript-debugging-with-black-box/)。10.复杂调试时寻找焦点在比较复杂的调试中，我们有时需要输出很多行。你可以做些什么来保持输出结构良好，使用更多控制台功能，如console.log、console.debug、console.warn、console.info、console.error等。然后你可以在控制台中快速浏览一下。但有时，一些JavaScript调试信息并不是您所需要的。现在，您可以自己美化调试信息了。调试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');output:ex:在console.log()中，你可以使用%s设置字符串，%i设置数字，%c设置自定义样式等。使用console.log()有很多更好的方法。如果你使用的是单页应用框架，你可以为视图消息创建一种样式，为模型、集合、控制器等创建另一种样式。也许你也可以像wlog、clog、mlog一样发挥小伙伴的想象力！11、查看具体的函数调用及其参数在Chrome浏览器控制台（Console）中，大家的注意力都集中在具体的函数上。每次调用此函数时，都会记录其值。varfunc1=function(x,y,z){//....};然后输出：这是查看哪些参数传递给函数的好方法。但是这里我想说明一下，如果控制台能告诉我们需要多少个参数就好了。在上面的示例中，函数1需要3个参数，但只传入了2个。如果不在代码中处理它可能会导致错误。12.快速访问控制台中的元素在控制台中执行querySelector的一种更快的方法是使用美元符号。$('css-selector')将返回第一个匹配的CSS选择器。$$('css-selector')将返回全部。如果多次使用一个元素，它就应该是一个变量。13.Postman很棒（但Firefox更快）许多开发人员使用Postman来处理Ajax请求。Postman确实不错，但是每次都需要打开一个新的浏览器窗口，写一个新的请求对象来测试。这确实有点烦人。有时只使用您正在使用的浏览器会更容易。这样，如果您想要请求密码保护的页面，您就不再需要担心身份验证cookie。这就是编辑和重新发送请求在Firefox中的工作方式。打开分析器并转到网络页面，右键单击要处理的请求，选择编辑并重新发送。现在您可以随心所欲地更改它。您可以修改标题信息或编辑参数，然后单击重新发送。现在我发送相同的请求两次，但参数不同：14.当节点改变时破坏DOM是一件有趣的事情。有时它会改变，你不知道为什么。但是，如果您需要调试JavaScript，Chrome可以在DOM元素发生变化时暂停处理。您甚至可以监控其属性。在Chromeprofiler上，右键某个元素，选择Breakon选项即可使用：为了帮助小伙伴们更好的学习Python，技校整理了Python相关的学习视频和学习路线图。
