更快更高效地调试JavaScript熟悉工具可以使它们在工作中更有效率。尽管有传言说JavaScript很难调试，但如果您掌握一些技巧，您可以在很短的时间内解决错误和错误。本文列出了14个您可能不知道的调试技巧，但您可能需要记住它们，下次您需要调试JavaScript代码时请牢记！让我们一起看看大部分技巧在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',age:18}];console.table(animals);输出：3.使用不同的屏幕在您的桌面上安装不同的移动设备模拟器固然很好，但实际上这是不可行的。调整窗口大小怎么样？Chrome提供了您需要的一切。跳转到控制台并点击“切换设备模式”按钮。只看窗口变化！4、如何快速查找DOM元素在Elements面板中标记一个DOM元素，在控制台中使用。Chrome控制台保留选择历史的最后五个元素，最后一个选择的元素标记为$0，第二个选择的元素为$1，依此类推。如果依次选择“item-4”、“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('Timer1');运行结果如下：6.获取函数的stacktrace信息使用了JavaScript框架，会引入很多代码。创建视图和触发事件，***你想了解函数调用的过程。由于JavaScript不是一种非常结构化的语言，因此有时很难知道什么时候发生了什么。可以使用console.trace轻松调试JavaScript（只需在控制台中跟踪）。想象一下，在第24行查看car实例调用的函数funcZ的整个堆栈跟踪：varcar;varfunc1=function(){func2();}}varfunc4=function(){car=newCar();car.funcX();}varCar=function(){this.brand='沃尔沃';this.color='red';this.funcX=function(){this.funcY();}this.funcY=function(){this.funcZ();}this.funcZ=function(){console.trace('tracecar')}}func1();第24行会输出：可以看到func1调用func2，func2调用func4。Func4创建Car的实例，然后调用函数car.funcX，依此类推。即使你认为你的代码写得很好，这仍然有用。假设您想改进自己的代码。获取跟踪信息和所有涉及的功能，每一项都是可点击的，您可以在它们之间来回切换。这就像给你一个调用堆栈的选择列表。7.调试JavaScript前格式化代码有时代码在生产环境中会出现问题，但你的sourcemaps并没有部署在生产环境中。不要害怕。Chrome可以格式化您的JavaScript文件。格式化代码不如真实代码有用，但至少您可以看到发生了什么。在Chrome控制台的源代码查看器中点击{}按钮。8.快速找到你要调试的函数假设你想在函数中打断，最常见的两种方式是：在控制台中找到该行并添加断点在代码中添加调试器在这两种解决方案中，你必须点击在文件中调试特定行。使用控制台断点可能不太常见。在控制台中使用debug(funcName)，代码将在到达传入的函数时停止。这种调试方法速度很快，但缺点是它不适用于私有或匿名函数。但除了私有函数和匿名函数之外，这可能是找到调试函数的最快方法。（注意：此函数与console.debug函数不同。）varfunc1=function(){func2();};varCar=function(){this.funcX=function(){this.funcY();}这个.funcY=function(){this.funcZ();}}varcar=newCar();在控制台输入debug(car.funcY)，当调用car.funcY时，会停止在调试模式：9.ShieldisirrelevantCode现在，我们的应用程序中经常包含几个库或框架。其中大多数都经过良好测试并且相对没有错误。但是，调试器仍会进入与调试任务无关的文件。解决方法是屏蔽不需要调试的脚本。当然，您可以包含自己的脚本。在这篇文章中阅读更多关于调试无关代码的信息（https://raygun.com/blog/javascript-debugging-with-black-box/）10.Findfocusduringcomplexdebugginginmorecomplexdebuggingwesometimeswishtooutputmanylines.可以做的是保持良好的输出结构，多使用控制台函数，例如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控制台中，可以观察具体函数。每次调用该函数时，它都会打印出传入的参数。varfunc1=函数(x,y,z){//....};输出：这是查看传递给函数的参数的好方法。但是，如果控制台会提示我们输入参数的数量，那就太好了。上面的例子中，func1需要3个参数，但是只传入了2个，如果代码中没有处理好这个参数，很可能会出错。12.在控制台中快速访问元素在控制台中比querySelector更快的方法是使用美元符号，$('css-selector')将返回CSS选择器的第一个匹配项。$$('css-selector')将返回所有匹配项。如果你多次使用一个元素，你可以把它保存为一个变量。13.Postman很棒（但Firefox更快）许多开发人员使用Postman来查看ajax请求。邮递员真的很好。但是新开一个窗口，写请求对象，然后测试就麻烦了。有时使用浏览器更容易。使用浏览器查看时，如果您请求密码验证页面，则无需担心验证cookie。请参阅下文如何在Firefox中编辑和重新发送请求。打开控制台并切换到网络选项卡。右键单击所需的请求并选择编辑并重新发送。现在你可以改变任何你想要的。更改标题并编辑参数，然后单击“重新发送”。下面是我用不同属性发出的两个请求：14.中断节点以更改DOM是一件有趣的事情。有时它会改变，你不知道为什么。但是，当您调试JavaScript时，Chrome会在DOM元素发生变化时暂停。您甚至可以监控其属性。在Chrome控制台中，右键单击元素并选择BreakinSettings：
