使用 VS Code 和 Chrome 调试器调试 JavaScript 项目

suchonaseo

调试 JavaScript 并不是 JavaScript 编程中最有趣的方面，但它是一项至关重要的技能。本文介绍了两种可以帮助您像专业人士一样调试 JavaScript 的工具。想象一下console.log()JavaScript 中不存在该函数。我很确定您问自己的第一个问题是“我如何确认我的代码正常工作？” 答案在于使用调试工具。很长一段时间以来，大多数开发人员，包括我自己，一直在使用它console.log来调试损坏的代码。它快速且易于使用。然而，如果您不知道错误的原因和位置，有时事情可能会变得棘手。通常，您会发现自己console.log在代码中到处布下陷阱，看看哪一个会揭露罪魁祸首。 为了解决这个问题，我们需要改变习惯并开始使用调试工具。有许多工具可用于调试 JavaScript 代码，例如 Chrome 开发工具、Node Debugger、Node Inspect 等。

事实上，每个主要浏览器都提供了自己的工具。 在本文中，我们将了解如何使用 Visual Studio Code 提供的调试工具。我们还将了解如何使用Chrome 调试器扩展，该扩展允许 VS Code 与 Chrome 开发工具集成。一旦我们完成，您将永远不想再使用console.log()。 先决条件 Learn to Code with JavaScript 对于 WhatsApp 号码数据 本教程，您只需要具备扎实的现代 JavaScript基础即可。我们还将了解如何调试使用Mocha 和 Chai编写的测试。我们将使用一个损坏的项目debug-example来学习如何在不使用单个console.log. 您需要以下内容才能完成操作： Node.js 视觉工作室代码 Chrome浏览器 首先将调试示例项目克隆到您的工作区。在 VS Code 中打开项目并通过集成终端安装依赖项现在我们准备学习如何在 VS Code 中调试 JavaScript 项目。



在 VS Code 中调试 JavaScript 我希望您查看的第一个文件是src/places.js. 您需要debug-project在 VS Code 中打开该文件夹（“文件” > “打开文件夹”），然后从编辑器中选择该文件。代码非常简单，如果您有足够的编码经验，您可能会注意到它有一些错误。如果您确实注意到它们，请忽略它们。如果没有，那就完美了。让我们在底部添加几行来手动测试代码现在，我确信您渴望执行 aconsole.log来输出 的值places。但我们不要这样做。相反，让我们添加断点。只需左键单击装订线（即行号旁边的空白区域）即可添加它们： 红点表示断点 看到侧面的红点了吗？这些就是断点。断点只是一个视觉指示，告诉调试器工具在哪里暂停执行。接下来，在操作栏上，单击调试按钮（显示“不允许错误”的图标）。 调试面板 看上面的部分。