在本博文中，我们将概述最佳工具，以帮助您查找，诊断和修复JavaScript应用程序中的问题。

如果你使用JavaScript，你会知道它并不总是很好玩。谢天谢地，由于可用的JavaScript调试工具过多，故障排除通常很简单。本博客文章概述了帮助您查找，诊断和修复问题的最佳工具。

根据您的使用情况，某些工具可能比其他工具更好，但所有工具都可以节省您在调试过程中的时间。

1.现代Web浏览器中的开发工具

每个现代浏览器都有可用的工具来调试代码。我们来看看可能使用这些浏览器工具调试JavaScript的一些基本方法，然后依次突出显示每个主要浏览器及其开发工具。

将JavaScript调试消息输出到浏览器

调试JavaScript最简单的方法之一就是将数据输出到浏览器。以下是三种主要的方式：

用alert（）`弹出消息。

一种可靠而真实的调试JavaScript项目的方法，alert（）会在您的代码满足特定条件时创建一个弹出警报。警报的问题在于最终会出现一系列弹出窗口。如果你需要多于一个，除了快速调试项目之外，对于其他任何东西都是有用的。

使用`console.log（）`将行记录到控制台。

记录到控制台是JavaScript调试的标准。向你的代码中添加一个`console.log（'foo'）'行将在你的开发工具集的JavaScript控制台中创建一个`foo`日志条目。这可以用于各种原因。例如，您可以在将其传递给方法后，检查变量的值，输出API响应或数据库查询的结果以及其他许多用途。

使用`debugger`暂停代码执行。

只要将代码插入代码，`debugger;`语句就会暂停执行代码。`debugger`语句将作为断点，暂停执行代码。这使您可以在代码处于暂停状态时使用开发工具进行调查。

Chrome开发者工具

在Chrome开发者工具是调试JavaScript代码的快捷方式。您可以使用以下快捷方式将开发工具打开到控制台选项卡：

macOS：`CMD` +`OPT` +`I`

Windows：`CTRL` +`SHIFT` +`I`

Chrome开发人员工具是业内最好的，许多开发人员相信这些工具可满足他们的日常调试需求。Chrome开发者工具包括标准的JavaScript控制台，以及用于网络和性能监控以及安全功能的工具。大多数JavaScript调试都在控制台和网络活动选项卡中进行。

针对Chrome的React开发者工具

如果您使用React以及使用JavaScript，那么可以使用名为React Developer Tools的扩展。该工具集将一个React选项卡添加到您的开发工具窗口。React工具允许您检查组件的内容。您还可以查看和编辑属性和状态。这些工具还提供了对创建选定组件的组件的深入了解。如果您使用Chrome作为您的主要开发浏览器并使用React进行开发，那么使用此扩展很容易使您的React调试变得更加容易。

Firefox开发者工具

Firefox用户过去一直依赖Firebug，这是Firefox用户一套有竞争力的开发工具。最新版Firefox中包含的Firefox开发者工具吸收了Firebug的功能。这将Firefox浏览器及其内置工具套件与Google Chrome相提并论。

要查找Firefox开发人员工具，请查看Web Developer下的“工具”菜单。在那里，你会发现JavaScript控制台和许多其他有用的物品。

Safari开发菜单

Safari的用户必须启用Safari Develop Menu才能访问Safari内置的开发人员工具。

转到Safari选项卡并选择首选项。

选择高级。

在菜单栏中启用标题为Show Develop菜单的选项。

一旦你按照上面的步骤，一个发展菜单将出现在工具栏中。在“开发”菜单中，可以选择显示JavaScript控制台，调试器，网络流量监视器和页面元素的检查器。Safari开发工具是最好的，可与Chrome提供的JavaScript调试工具相媲美。您可以从所有浏览器中看到开发人员工具的改进趋势，因为它们越来越能够满足开发人员的需求。

Opera Dragonfly

Dragonfly是Opera内置开发者工具套件的名称。您可以在Windows或Linux上使用快捷方式`CTRL` +`SHIFT` +`I`或者在macOS上使用`CMD` +`OPT` +`I`来打开蜻蜓。蜻蜓曾经是一个单独的项目，是Opera的一部分，包含标准的开发工具项目。您可以使用Dragonfly查看JavaScript输出，检查元素等。蜻蜓对另一个Opera实例的远程调试特别有用。

边缘开发工具

Microsoft Edge是一种现代浏览器，它从Internet Explorer的许多先入为主的负面观点中脱离出来。因此，Microsoft Edge包含一个出色的开发工具包，可通过快捷键“CTRL”+“SHIFT”+“I”访问。这些工具包括JavaScript控制台，以及网络，性能和内存选项卡。有关Edge开发工具的更多信息可以在Microsoft Edge开发人员工具指南中找到。

2. Node.js检查器用于调试节点应用程序的请求

在您的应用程序后端调试Node.js可能会很有挑战性。以下工具利用Node.js检查器的功能来帮助您：

Node Inspector的Node Debug库是一个库，可以包含在您的项目中以协助您实施Node Inspector。

Node.js V8 Inspector Manager是Chrome扩展程序，它在Chrome中向开发工具中添加了Node Inspector工具。

在Visual Studio代码编辑器，可以很容易地内置节点督察使用。

3. 如何为Node.js创建调试配置

点击顶部的调试选项卡。

选择打开配置。

如果没有设置，请选择Node.js以开始。

如果你已经在`launch.json`中有设置，你可以点击Add Configuration来添加Node.js配置。

有关VS Code在调试Node.js时可以使用的各种参数和配置的更多信息，请查看Node.js调试文档。

一个不重要的JavaScript开发量围绕发送和接收JSON请求和响应。你的应用程序可能需要很多东西的API请求：

与认证服务器交互。

获取日历或新闻提要。

只要检查天气。

......和其他许多人。

Postman是用于对应用程序中的请求和响应进行故障诊断的最佳JavaScript调试工具之一。Postman提供Windows，MacOS和Linux软件。它还提供了CLI附件和Chrome扩展。通过邮差，您可以调整请求，分析响应，调试问题。在软件中，您可以定制可以在应用程序中设置的清理事务。

此外，邮差有一个名为“集合”的功能。集合允许您为应用程序或API保存一组请求和响应。与其他人协作或重复执行相同的测试任务时，可节省宝贵的时间。使用Postman集合时，必要时更新集合，然后使用它。这比反复写出每个测试要快得多。

4. JS Bin

JS Bin是用于协作调试JavaScript的最佳JavaScript调试工具之一。它允许您与其他人一起测试和调试脚本。您可以运行JavaScript，查看调试控制台和脚本的输出，添加库和依赖关系等等。专业账户也可以将他们的代码私有，以及其他好处。

您可能会考虑使用像JS Bin这样的工具的主要原因之一就是简单。在一个孤立的环境中测试一小部分JavaScript的功能，而不必为此设置一个。在JS Bin中测试时，您可以确定您的结果没有受到来自应用程序其他部分的冲突脚本或样式的影响。

JS Bin的另一个关键特性是您通过更改JavaScript，HTML或CSS所获得的直接结果。你可以实时看到你的变化。您可以将一些代码复制到JS Bin，并立即开始工作（或不工作！）演示。然后您就可以调试或共享它了。

5. JSON格式化器和验证器

查看未格式化的JSON时，发现语法错误或键值显然不正确的值可能非常困难。如果你有一个精简或“缩小”的JSON对象，缺少行返回和空格，读取可能是一个挑战。您需要能够快速扫描该对象并检查格式或内容中的错误。

要做到这一点，你会扩大对象并对其进行格式化，浪费宝贵的时间。该JSON格式化和验证缓解疼痛点，所以我们将它添加到什么，我觉得这个名单是最好的JavaScript调试工具。邮差自动格式化对象，并允许您轻松验证其JSON语法以及实际内容。您只需粘贴您的JSON，并输出格式正确的版本。该工具甚至可以自动验证RFC标准的语法，具体取决于您选择的是哪一种。

6. Webpack

Webpack是开发者用于各种网站和应用程序的捆绑工具。如果您使用Webpack进行捆绑，则可以使用该工具提供的统计数据。

这些数据的范围可以从模块内容，构建日志和错误，模块之间存在的关系等等。如果您已经使用Webpack，这是一个令人难以置信的有用功能，有时会被忽略。您甚至可以使用预先构建的工具（例如Webpack Analyze Web App）来可视化您从Webpack生成的统计信息。

7. SessionStack

SessionStack是一个监控软件，为您提供一套监控工具。这些工具收集客户端数据，并协助您确定您的客户在您的网站上做了什么。在出现问题的情况下，能够准确追踪发生了什么事情，以及如何至关重要。

这是SessionStack发光的地方。SessionStack使用视频重播来帮助开发人员复制用户问题和错误情况。

提示：如果您同时使用SessionStack和Raygun，则可以将SessionStack视频重播附加到Raygun报告中。

8. Raygun

厌倦了花时间浏览日志以查找JavaScript错误？Raygun是答案，它具有您需要的一切，包括崩溃报告和JavaScript的真实用户监控，以查找和评估JavaScript错误和性能问题的影响。

设置起来非常快捷。

JavaScript调试可能是一个挑战，并且可以使用正确的工具来调整或中断调试过程。

每个应用程序和用例都会有所不同，但了解新工具将帮助您找出最佳选择。