在本文中,我们将逐步解释如何在 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 代码。随后,我们深入讨论了每个步骤。还为每个步骤提供了示例图片,以帮助您理解。