JavaScript调试是业界公认的难题。但是一旦你掌握了它并了解了这些工具本身，你就可以节省大量时间。这里有16个调试技巧供您下次调试JavaScript代码时使用！这些技巧中的大部分都适用于Chrome和Firefox，许多也可以与其他检查器一起使用。此外，如果您想更快地找到JavaScript错误，请尝试Raygun崩溃报告，它会提醒您错误并提供堆栈跟踪。1.调试器除了console.log，调试器是我最喜欢的快速调试工具。如果将调试器放在代码行中，Chrome会在执行时自动停在那里，您甚至可以将其包装在条件中，因此它仅在需要时运行。2.将对象显示为表格有时您想要查看一组复杂的对象。您可以console.log它们并滚动列表，或使用console.table助手。它可以更轻松地查看您的工作！将输出：3.尝试所有尺寸虽然将所有移动设备都放在桌面上固然很棒，但在现实世界中这并不可行。如何调整视口大小？Chrome为您提供所需的一切。跳转到检查器并单击“切换设备模式”按钮。看着你的媒体查询成真！4.如何快速找到您的DOM元素在元素面板中标记一个DOM元素，然后在控制台中使用它。Chrome检查器将最后五个元素保留在其历史记录中，因此最后一个标记的元素显示$0，倒数第二个标记的元素$1，依此类推。如果你按照“item-4”、“item-3”、“item-2”、“item-1”、“item-0”的顺序标记以下项目，你可以在控制台中像这样访问DOM节点：5.使用console.time()和console.timeEnd()对循环进行基准测试准确了解某件事执行需要多长时间是很有用的，尤其是在调试慢速循环时。您甚至可以通过为方法分配标签来设置多个计时器。让我们看看它是如何工作的：将输出：6.获取函数的堆栈跟踪您可能知道JavaScript框架可以快速生成大量代码。您将有很多视图并触发很多事件，因此最终您会遇到这样一种情况：您想知道是什么导致了特定的函数调用。由于JavaScript不是一种结构化语言，因此有时很难掌握发生了什么以及何时发生。这就是console.trace（或只是控制台中的跟踪）在调试JavaScript时派上用场的时候。想象一下，您想查看car实例中函数调用funcZ的整个堆栈跟踪：将输出：现在我们可以看到func1称为func2，后者称为func4。然后Func4创建Car的实例，然后调用函数car.funcX，等等。即使您认为自己很了解脚本，这仍然非常方便。假设您想改进代码。获取详细的跟踪列表和所有相关功能。每个都是可点击的，现在您可以在它们之间来回切换。就像专为您准备的菜单。7.缩小代码是调试JavaScript的一种简单方法有时您可能会在生产中遇到源映射未完全到达服务器的问题。不要害怕。Chrome可以将您的Javascript文件缩小为更易读的格式。该代码不会像您的实际代码那样有用-但至少您可以看到发生了什么。点击检查器中源代码查看器下方的{}漂亮打印按钮。8.快速找到你要调试的函数假设你想在函数中设置一个断点。最常见的两种方法是：1.找到你检查的行并添加一个断点2.在脚本中添加一个调试器在这两种解决方案中，您都必须手动浏览文件以隔离要调试的特定行。可能不太常见的是使用控制台。在控制台中使用debug(funcName)，脚本将在到达您传递的函数时停止。它很快，但缺点是它不适用于私有或匿名函数。否则，这可能是找到要调试的函数的最快方法。（注意：虽然名称相似，但有一个名为console.debug的函数并不是一回事。）在控制台中键入debug(car.funcY)，当脚本获得对car.funcY的函数调用时，脚本将在停止调试模式：9.不相关的黑盒脚本今天，我们的Web应用程序中经常有库和框架。他们中的大多数都经过了很好的测试并且相对没有错误。但是，调试器仍会进入与此调试任务无关的任何文件。解决方案是不需要调试的黑盒脚本。这也可能包括您自己的脚本。在本文中阅读有关调试黑盒的更多信息。10.在复杂的调试中找到重要的东西在更复杂的调试中，有时我们想要输出很多行。为了使输出结构更好，您可以做的一件事是使用更多控制台功能，如console.log、console.debug、console.warn、console.info、console.error等。然后您可以在检查器中过滤它们。有时，当您需要调试JavaScript时，这并不是您真正想要的。如果您愿意，您可以发挥创意并设计您的信息。当你想调试JavaScript时，使用CSS并制作你自己的结构化控制台消息：将输出：在console.log()中你可以将%s设置为字符串，将%i设置为整数，并将%c设置为自定义样式。您可能会找到使用这些样式的更好方法。如果您使用单页框架，您可能希望一种样式用于视图消息，另一种样式用于模型、集合、控制器等。11.观察特定的函数调用和参数在Chrome控制台中，您可以专注于特定的函数。每次调用该函数时，它都会记录传入的值。将输出：这是查看传递给函数的参数的好方法。理想情况下，控制台可以告诉您期望有多少个参数，但它不能。在上面的示例中，func1需要三个参数，但只传入了两个。如果代码中不处理这一点，可能会导致错误。12.快速访问控制台中的元素在控制台中执行querySelector的一种更快的方法是使用美元符号。$('css-selector')将返回CSS选择器的第一个匹配项。$$('css-selector')将全部返回。如果你多次使用一个元素，将它保存为一个变量是值得的。13.Postman很棒（但Firefox更快）许多开发人员正在使用Postman来处理Ajax请求。Postman很优秀，但是打开一个新的浏览器窗口，写一个新的请求对象然后测试它可能有点烦人。有时使用浏览器更容易。执行此操作后，如果您要发送到密码安全页面，则无需再担心身份验证cookie。这就是您在Firefox中编辑和重新发送请求的方式。打开检查器并转到“网络”选项卡。右键单击所需的请求并选择编辑并重新发送。现在你可以改变任何你想要的。更改标题并编辑参数，然后单击“重新发送”。下面，我使用不同的属性发出两次请求：14.中断节点以更改DOM可能很有趣。有时事情会发生变化，而您却不知道为什么。但是，当您需要调试JavaScript时，Chrome允许您在DOM元素更改时暂停。您甚至可以监控其属性。在ChromeInspector中，右键单击元素并选择要使用的设置Breaks：15.使用PageSpeedServices有许多服务和工具可用于审核页面的JavaScript并帮助您发现速度变慢或问题。其中一种工具是Raygun真实用户监控。除了查找JavaScript问题之外，这对于其他原因也很有用-外部脚本加载缓慢、不必要的CSS、超大图像。它可以帮助您了解导致加载时间过长或执行不正确的JavaScript问题。您还可以测量JavaScript性能改进并随时间跟踪它们。16.无处不在的断点最后，经过验证的断点可以成功。尝试针对不同情况以不同方式使用断点。您可以单击一个元素并设置断点以在修改元素时停止执行。您还可以进入开发人员工具中的“调试器”选项卡或“源”选项卡（取决于浏览器），并为任何特定源设置XHR断点以在Ajax请求时停止。在同一个地方，您还可以让它在发生异常时暂停代码执行。您可以在浏览器工具中使用这些不同类型的断点来最大限度地发现错误，而无需在外部工具集上花费时间。
