如何在 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 代码。随后,我们深入讨论了每个步骤。还为每个步骤提供了示例图片,以帮助您理解。
硬件:Windows系统 版本:130.0.6723.59 大小:9.75MB 语言:简体中文 评分: 发布:2023-07-23 更新:2024-05-28 厂商:谷歌信息技术(中国)有限公司
硬件:安卓系统 版本:0.3.0.455 大小:187.89MB 语言:简体中文 评分: 发布:2022-08-18 更新:2024-10-11 厂商:Google Inc.
硬件:苹果系统 版本:122.0.6261.89 大小:200.4MB 语言:简体中文 评分: 发布:2022-01-23 更新:2024-03-12 厂商:Google LLC
跳转至官网
360挖矿防护怎么开启
近些年,以“比特币”为首的虚拟货币,映入了大众视野,并逐渐成为焦点,于是便有很多人想从中“分一杯羹”;然而用一般的PC电脑进行挖矿,会非常损耗我们的显卡、CPU等硬件,更有甚者会通过制作恶意链接,让其他用户打开,让他人的电脑成为自己挖矿的“傀儡”。那么,作为以安全为首的360安全浏览器,它支持挖矿防护吗。
谷歌浏览器app如何设置字体大小
谷歌浏览器app如何设置字体大小?接下来小编就给大家带来谷歌浏览器app调整字体大小技巧方法,有需要的朋友赶紧来看看吧。
谷歌浏览器点击没有反应怎么回事
谷歌浏览器点击没有反应怎么回事?本篇文章就给大家带来谷歌浏览器解决点击没有反应方法教程,有需要的朋友千万不要错过了。
如何在谷歌浏览器中启用网页控制台
有小伙伴想了解如何开启谷歌浏览器的网页控制台,下面就来和小编看看这篇开启步骤详解。
手机怎么下载谷歌浏览器
手机怎么下载谷歌浏览器?本篇文章就给大家带来手机下载谷歌浏览器保姆级教程,希望能够帮助大家解决问题。
谷歌浏览器如何录制屏幕
谷歌浏览器如何录制屏幕?下面小编就给大家带来谷歌浏览器屏幕录制操作方法,希望能够给大家带来帮助。
安装谷歌浏览器错误代码“0x80004002”该如何解决?
不知道大家是否有在给电脑安装Google chrome浏览器时碰到不正确代码0X80004002的情况呢?如果你不知道如何解决?就来试试下面的这个方法吧
Google chrome如何更改下载目录?
Chrome 就是——目前世界上最好的浏览器,没有之一!由于 Chrome 性能强劲、流畅快速、安全稳定、干净无杂质、使用体验佳、免费、跨平台、而且扩展性强。
谷歌浏览器下载安装完成后无法上网如何解决?<解决方法>
谷歌浏览器,又称Google浏览器、Chrome浏览器,是谷歌Google推出的一款强大好用的基于Chromium内核的网页浏览器。
谷歌浏览器如何查看网站的隐私报告
如果你也想了解在哪里查看谷歌浏览器隐私报告,可以和小编一起看看下面的位置教程图文一览,希望能对大家有所帮助。
谷歌浏览器下载失败提示病毒扫描失败怎么解决?
我们在使用浏览器时,往往需要安装各种插件来实现各种功能。然而,最近有用户使用谷歌Chrome下载一个插件时,显示病毒扫描失败,插件无法安装。
谷歌浏览器win10用不了怎么办
谷歌浏览器win10用不了怎么办?接下来就让小编给大家带来win10无法使用谷歌浏览器解决方案,还不知道如何解决的朋友,赶紧来看看详细内容!
谷歌浏览器的network分别是什么功能?<带你认识谷歌浏览器开发工具>
本文旨在带大家初步认识谷歌浏览器的Network的功能,内容简单,好好学习吧!
如何开启谷歌浏览器flash插件
如何开启谷歌浏览器flash插件?今天小编带来谷歌浏览器开启flash插件方法分享,大家参考下面的步骤操作就可以顺利解决这个问题。
如何使用 Google Keep Chrome 扩展程序?
Google Keep 的 Chrome 扩展程序可以帮助您提高工作效率并做更好的笔记。以下是如何使用扩展程序。
如何禁止谷歌浏览器自动升级
如何禁止谷歌浏览器自动升级?下面小编就给大家带来禁止谷歌浏览器自动升级操作流程,希望能够给大家带来帮助。
如何使用键盘快捷键启动 Chrome 书签?
书签可让您快速访问您喜爱的网站。Chrome 的键盘快捷键让书签触手可及。这是您必须知道的技巧。
如何第一次铸造一个Chrome标签?
Chromecast能够从任何电视上播放电影、电视节目、音乐等内容,这非常酷。你也可以从你的电脑投射到你的电视上。您还可以将电视变成一个巨型显示器,通过电脑或移动设备进行控制。您可以将电话屏幕、计算机中的浏览器选项卡或设备中的媒体投射到电视上。如果你正在寻找如何设置一个基本的Chrome角色,这里有谷歌的向导。这篇文章将一步一步地向你展示如何从Chrome标签直接转换到你想要的任何设备上。