如何在 Chrome 中调试 JavaScript?

作者:qiaojun  程序  发布时间:2022-05-12 17:46:32  1

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

本文关键词: chrome JavaScript

标签: 程序 程序

谷歌浏览器下载安装教程 更多>>>
谷歌浏览器(goodle Chrome)其它版本
谷歌浏览器使用教程 更多>>>
用户点评
*您的评论需要经过审核才能显示
用户评论
推荐下载
谷歌浏览器金丝雀版

谷歌浏览器金丝雀版

下载次数:312 立即安装

用户好评:

软件厂家:谷歌(Google Chrome)

软件授权:免费软件 软件语言:简体中文 软件分类:浏览器类 支持系统:ALL