如何在 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 代码。随后,我们深入讨论了每个步骤。还为每个步骤提供了示例图片,以帮助您理解。
相关下载
![谷歌浏览器电脑版](/uploadfile/2024/0312/20240312045810556.png)
硬件:Windows系统 版本:122.0.6261.6 大小:66.69MB 语言:简体中文 评分: 发布:2023-07-23 更新:2024-05-28 厂商:谷歌信息技术(中国)有限公司
相关下载
![谷歌浏览器安卓版](/uploadfile/2024/0312/20240312045810556.png)
硬件:安卓系统 版本:107.0.5304.105 大小:218.98MB 语言:简体中文 评分: 发布:2022-08-18 更新:2024-08-30 厂商:Google Inc.
相关下载
![谷歌浏览器苹果版](/uploadfile/2024/0312/20240312045810556.png)
硬件:苹果系统 版本:122.0.6261.89 大小:200.4MB 语言:简体中文 评分: 发布:2022-01-23 更新:2024-03-12 厂商:Google LLC
跳转至官网
相关阅读
![手机谷歌浏览器怎么扫二维码](/uploadfile/2024/0520/20240520032303597.png)
手机谷歌浏览器怎么扫二维码
手机谷歌浏览器怎么扫二维码?本篇文章就给大家带来手机谷歌浏览器使用扫码功能教程一览,有需要的朋友不妨来看看了解一下。
![谷歌浏览器无法翻译此网页如何解决](/uploadfile/2024/0429/20240429024618618.png)
谷歌浏览器无法翻译此网页如何解决
谷歌浏览器无法翻译此网页如何解决?接下来就让小编给大家带来谷歌浏览器解决不能翻译网页问题教程详解,希望大家能够通过这个方法获取到帮助。
![谷歌浏览器怎么更改主页网址](/uploadfile/2024/0516/20240516025344858.png)
谷歌浏览器怎么更改主页网址
谷歌浏览器怎么更改主页网址?本篇文章就给大家带来谷歌浏览器更改主页网址详细方法一览,有需要的朋友千万不要错过了。
![谷歌浏览器安全检查功能在哪](/uploadfile/2024/0403/20240403023607209.png)
谷歌浏览器安全检查功能在哪
谷歌浏览器安全检查功能在哪?本篇文章就给大家带来谷歌浏览器开启安全检查攻略方法技巧,感兴趣的朋友千万不要错过了。
![如何清理chrome浏览器缓存](/uploadfile/2024/0308/20240308111859309.png)
如何清理chrome浏览器缓存
如何清理chrome浏览器缓存?接下来本篇文章就给大家带来chrome浏览器清理缓存垃圾新手教程,大家不要错过了。
![如何禁止谷歌浏览器更新](/uploadfile/2023/0823/20230823103239421.png)
如何禁止谷歌浏览器更新
如何禁止谷歌浏览器更新?今天小编带来关闭谷歌浏览器自动更新功能操作指南,需要关闭谷歌浏览器自动更新功能的用户可以前来阅读。
![谷歌浏览器任务管理器怎么打开](/uploadfile/2024/0829/20240829064150749.png)
谷歌浏览器任务管理器怎么打开
本篇文章中小编给大家带来开启chrome浏览器任务管理器的详细操作流程,希望能够帮助大家解决问题。
![如何离线下载Chrome浏览器最新版本?](/uploadfile/2022/0621/20220621015813505.jpg)
如何离线下载Chrome浏览器最新版本?
Google Chrome的插件功能非常丰富,最新版本在稳定性、速度和安全性方面都有明显提升,内存占用也有所改善。其简单高效的用户界面深受人们的喜爱。
![如何在基本操作系统上安装 Google Chrome?](/uploadfile/2022/0510/20220510110050917.jpg)
如何在基本操作系统上安装 Google Chrome?
Web 浏览器是任何操作系统的重要应用程序。不是因为我真的需要它来工作,而是我们实际上花在它上面的时间比花在另一个应用程序上的时间要多。这主要是因为互联网是人们工作、娱乐和休闲的参考。此外,许多工作是通过互联网完成的,因此,网络浏览器是强制性的。
![如何在 Windows 10安装 Google Chrome?](/uploadfile/2022/0615/20220615094734187.jpg)
如何在 Windows 10安装 Google Chrome?
为什么要写这个教程呢?因为我是专注于小白入门电脑的教程,所以我发现很多刚使用电脑的朋友们还是不知道怎么安装软件。
![如何下载适用于Windows10系统的 Chrome 79离线安装程序?](/uploadfile/2022/0622/20220622100420617.jpg)
如何下载适用于Windows10系统的 Chrome 79离线安装程序?
Chrome 79中一个很酷的新安全功能是,对于钓鱼用户,无论用户是否使用同步功能,Chrome密码数据库中存储的所有用户名和密码都可以获得预测性钓鱼警告。
![如何在 Ubuntu 上安装 Google Chrome 60 稳定版?](/uploadfile/2022/0509/20220509100017629.jpg)
如何在 Ubuntu 上安装 Google Chrome 60 稳定版?
Google Chrome 60 刚刚升级为 Windows、Mac 以及 Linux 平台的稳定频道版本。正如 Chrome 团队所宣布的,此版本的 Chrome 60 0 3112 78 包含许多错误修复(40 个安全修复)和改进。
![chrome怎么清除缓存和cookis?](/uploadfile/2022/0325/20220325102625323.png)
chrome怎么清除缓存和cookis?
你有没有想要知道的谷歌浏览器使用技巧呢呢,你知道谷歌浏览器要怎么清除浏览器的缓存和cookies吗?来了解谷歌浏览器清除浏览器的缓存和cookies的具体步骤,大家可以学习一下。
![谷歌浏览器的翻译按键不见了?_谷歌浏览器开启翻译方法](/uploadfile/2022/0412/thumb_227_166_20220412093205863.png)
谷歌浏览器的翻译按键不见了?_谷歌浏览器开启翻译方法
谷歌浏览器的翻译功能向来是浏览国外网站的首选,你知道谷歌浏览器的翻译按键消失该怎么恢复吗,快来和小编一起学习恢复吧!
![如何在 Chrome 中管理自定义缩放级别?](/uploadfile/2022/0506/20220506103134470.jpg)
如何在 Chrome 中管理自定义缩放级别?
您知道可以为每个网页设置自定义缩放级别吗?每个浏览器都具有缩放功能,可让您减小或增加网页的大小。把它应用在正确的地方,它可以让你的浏览生活更轻松。
![如何设置谷歌浏览器自动清理缓存](/uploadfile/2024/0730/20240730042852701.png)
如何设置谷歌浏览器自动清理缓存
本篇文章给大家详细介绍了谷歌浏览器设置自动清理缓存的方法步骤,有需要的朋友快来看看吧。
![怎么关闭chrome地址栏的历史记录_谷歌浏览器下拉框记录关闭方法](/uploadfile/2022/0415/thumb_227_166_20220415102845523.png)
怎么关闭chrome地址栏的历史记录_谷歌浏览器下拉框记录关闭方法
怎么关闭chrome地址栏的历史记录?小编这就分享方法给你,十分简单
![如何在谷歌浏览器中禁用搜索建议图片?](/uploadfile/2022/0523/20220523103546989.jpg)
如何在谷歌浏览器中禁用搜索建议图片?
Google 于 2019 年 6 月 5 日发布了适用于所有受支持操作系统的Google Chrome 75 。一些将网络浏览器升级到新版本的 Chrome 用户注意到谷歌正在向浏览器中的搜索建议添加图像。