如何在 Chrome 中调试 JavaScript？

正文介绍

在本文中，我们将逐步解释如何在 Chrome 中使用 DevTools 调试 JavaScript。如果你想在 Chrome 中调试你的 JavaScript 代码，那么你必须按照下面提到的这些步骤进行操作。

　　项目概况

　　我将演示一个如何在 Chrome 中调试 JavaScript 代码的示例。在这一步中，我将给出代码的基本描述。这个项目是关于计算两个数字之间的模运算。此示例允许您分别传递被除数和除数的值。随后，在单击计算按钮时，将需要一分钟来计算两个数字之间的模数并为您提供输出。模运算的语法如下：

　　x mod y = r

　　其中 x = 被除数，y = 除数，r = 余数

　　这个项目中有两个文件，.html 和 .js 文件。JavaScript 文件包含 5 个函数，用于计算两个数的 mod：

　　1、单击处理程序：如果一个或两个输入字段为空，它会发出警报消息

　　2、Inputs are empty()：此函数用于检查输入字段是否为空

　　3、updateLabel()：此函数用于计算两个数字的模

　　4、getNumber1()：用于获取第一个数字的值

　　5、getNumber2()：用于获取第二个数字的值

　　错误检测

　　可悲的是，每当我们运行此代码时，它都会向您显示一些错误。正如您在下面的示例中可以清楚地观察到的那样，当我们插入值时，输出是未定义的，而不是实际结果。因此，现在我们必须检测错误的原始原因，稍后将在同一篇文章中进行简要说明。

　　所以，现在我们必须快速修复这个错误。在这一步中，我们的主要目标是检测错误的来源。为了快速检测错误，您应该在 Chrome 中调试 JavaScript 代码。

　　为此，您需要在 Chrome 上运行该应用程序，然后您必须通过按快捷键CTRL+SHIFT+I打开 devTool 。除了 Devtool 执行的许多任务外，它还可以监控请求、更改 CSS。

　　开发者工具概述

　　您可以在源代码面板选项卡中调试您的 JavaScript 代码。它有 3 个部分，

　　1、文件导航页面：每个文件的请求都可以在此选项卡中列出。

　　2、代码编辑器：显示文件内容

　　3、Javascript 调试窗格：用于检查 JavaScript

　　代码调试

　　调试代码中的错误的最简单方法是您必须在代码中插入console.log()函数以同时检查值。

　　虽然console.log()函数可能是检测错误的好选择，但断点可能是更有效的选择，因为它允许您在执行期间暂停代码并分析相应的值。此外，断点比 console.log() 更好，因为使用 console.log() 您必须观察许多必须手动完成的步骤才能在控制台窗口中查看值，而断点通过直接工作更容易。