如何在 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() 您必须观察许多必须手动完成的步骤才能在控制台窗口中查看值，而断点通过直接工作更容易。

　　在代码中插入断点

　　如果您返回并查看应用程序的功能，您会知道在单击“计算按钮”后模运算的结果似乎不正确。因此，您需要在单击事件之前放置一个断点。

　　事件侦听器断点通过展开相应的组来帮助您找到要停止的特定事件，通过选中单击框将在单击侦听器事件存在的任何地方停止执行。

　　进入你的代码

　　如果您想停止执行特定行，例如我们想看第 21 行，那么我们将单击它并观察该特定行上的蓝色标记，以确保执行将在到达行时自动停止21。

　　检测错误的原因

　　因为我们在第 21 行设置了一个断点，这意味着代码总是在代码执行到该行时暂停。当代码在某一行暂停时，范围面板会指定其局部和全局变量。

　　这两个值都不是整数，它们用引号括起来，而且 mod 值似乎也很可疑。最后，检测到错误的来源。

　　错误修复

　　现在您可以修改代码并再次测试它。单击恢复图标。现在将第 20 行替换为下面提到的行并保存更改。

　　然后停用断点并使用不同的值测试代码以检查正确的结果。

　　结论

　　JavaScript 是最流行的语言，它的需求与日俱增。几乎所有地方都在使用 JavaScript。在本文中，我们解释了在 Chrome 中调试 JavaScript 代码。随后，我们深入讨论了每个步骤。还为每个步骤提供了示例图片，以帮助您理解。