永州网,内容丰富有趣,生活中的好帮手!
永州网 > 知识 > 正文

用例子实操教你使用Chrome开发者工具调试JavaScript

时间:2021-07-07 07:37:26

相关推荐

前言

JavaScript无疑是最流行的网络编程语言之一。随着使用JavaScript构建的框架数量迅速增加,Web开发人员可以有效利用并提供的许多功能。当谈到有效的编程时,每个开发人员都面临编写无错代码的共同目标。现在,每个现代的网页浏览器都有一个功能,可以使用开发工具轻松地调试代码。每个JS开发人员都会知道F12在JS应用程序中的重要性。下面我们教你使用DevTools在最流行的Web浏览器Chrome浏览器中调试JS代码。

代码中的BUG

让我们看看带有错误的简单的JS代码(这是我们故意准备,坏笑),教你尝试使用开发工具来解决这个问题。

运行上面的代码,你应该能够看到一个页面有两个文本字段和一个按钮。现在在文本字段中输入两个数字,然后点击添加按钮。我们可以看到,应用程序没有做到预定的目的。它不显示总和。我们现在将修复这个错误。

基于事件的断点

当我们想在任何特定的代码行暂停执行代码时,可以使用断点。然后我们可以检查在那个时间点的变量中存储了什么值。

1.点击F12在Chrome中打开开发者工具。或者我们可以右键单击并选择检查(Ctrl + Shift + I)。

2.转到“Sources”选项卡并展开“Event Listener Breakpoints”部分。我们可以在键盘,设备,鼠标等部分找到不同的事件。

3.展开“Mouse”复选框并选择“click”复选框。

4.这意味着,每当发生点击事件时,代码执行暂停。这是一个基于事件的断点。

现在继续尝试添加两个数字。当我们点击添加按钮时,代码执行被暂停,并且带有onClick函数的行被突出显示。由于这是一个基于事件的断点,因此DevTools暂停在包含该事件处理程序的行上。

用例子实操教你使用Chrome开发者工具调试JavaScript

单步执行

单步执行代码可以帮助我们逐行执行代码,并且可以检查代码的执行顺序。通过代码我们可以做三种不同类型的步骤。在开发人员工具的“Sources”面板中,我们可以找到 step into,step out和step over的按钮。

1.Step-into:当我们点击步入按钮时,onClick()函数中的代码将逐行执行,每步进入点击。

2.Step-over: 当我们点击切换按钮时,onClick()函数中的代码被跳过,执行停止,因为在函数定义之后没有更多的代码行。如果在函数定义之后存在任何行,控件将直接跳到该行代码。

3.Step-out:当在一个函数内部时,如果我们点击Step-out按钮,控制器会跳过该函数的其余部分并跳转到函数被调用的那一行。

基于错误位置的假设,我们可以设置一个更靠近代码部分的断点,而不是仅仅放置一个事件。

代码行断点

我们可以在被称为“代码行断点”的特定代码行上设置一个断点。只需点击代码左侧的行号。该数字的颜色变为蓝色,表示断点已设置。在运行过程中,执行将暂停在该行代码中。当设置断点时,我们可以很容易地识别当时存储在变量中的内容。让我们在第11行的代码中设置一个断点,看看变量值是如何变化的。我们可以在开发者工具的本地部分检查。

1.最初,变量num1,num2和sum的值是“undefined”,因为我们还没有设置变量。

2.现在进入(F11)该函数,看看变量值是如何变化的。

3.当我们达到变量总和时,可以看到它被评估为一个字符串。所以,这可能是错误的原因。

Watch和控制台

为了确认这是否是错误,我们可以使用三种不同的方法来找出变量总和是如何评估的。

1.Console.log()-console.log()来检查变量的值是如何随时间变化的。但是这涉及手动编辑代码,我们需要放置多行console.log()来查找错误的位置。

2.控制台 - 控制台用于执行随机的JavaScript语句。调试控制台中的代码时,我们可以覆盖变量值。例如,我们可以在控制台中简单地给num1 + num2,然后回车。我们将在下一行获得价值。我们可以重新分配num1和num2中的值。控制台主要用于这种测试目的。

为了确认这个bug,让我们通过控制台找到sumof变量的类型。在调试模式下在控制台输入typeof(sum)。我们应该将该类型看作一个字符串,这证实了我们假设可变和被评估为字符串而不是数字。

3.Watch - 另一个替代console.log()的方法是在Developer Tools中调试的最简单方法,就是在DevTools中使用Watch Expressions。我们可以简单地在Watch中添加任何变量或任何JavaScript表达式,并且在执行过程中,我们可以简单地观察值或表达式随时间的变化。

在“Sources”面板中,展开“Watch”部分。现在点击+符号添加一个表达式。

键入typeof(sum)并回车。我们可以看到总和的类型是“字符串”。因此,这也证实了我们的假设:总和被评估为一个字符串。

修正代码

由于我们现在已经确定了这个bug,所以我们只需要将字符串输入转换为一个数字,然后把总数赋给sum变量。我们可以将第22行的声明更改为以下:

或者:

我们可以直接在“Sources”面板中编辑代码,并使用Ctrl + S进行保存以测试修补程序,恢复执行代码。

我们可以使用Developer Options的Sources面板中的Deactivate Breakpoints选项(Ctrl + F8)来关闭断点

现在应用程序应该工作正常。这些是可以尝试使用Chrome开发人员工具调试JavaScript代码的基本步骤。

收集不易,本文《用例子实操教你使用Chrome开发者工具调试JavaScript》知识如果对你有帮助,请点赞收藏并留下你的评论。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。
相关阅读
如何进行网站网页压缩操作

如何进行网站网页压缩操作

网站网页压缩是指通过压缩网页的HTML、CSS、JavaScript等文件,以减少网站加载时所需的传输时间和带宽消耗。这项技术可以提高网站的加载速度和性能,改善用户体验,同时也有利于提升网站的搜索引擎排名。要实现网站网页压...

2024-03-16

如何在Win7上还原系统及恢复出厂设置

如何在Win7上还原系统及恢复出厂设置

...绒安全/安全软件leaner/垃圾清理工具8.小黄条/备忘工具9.Chrome浏览器10.Bandizip/解压软件11.Wise Folder Hider/文件加密12.Potplayer/视频播放器13.QQ影音14.Snipaste/截图软件15.嗨格式PDF转换器/PDF转换#国际米兰#我小国际最近几天球员INS更新状...

2024-03-19

使用JavaScript实现随机公告功能的网站首页设计

使用JavaScript实现随机公告功能的网站首页设计

“js实现的网站首页随机公告”是一个基于JavaScript技术开发的网站首页公告系统,它能够实现在网站首页上随机展示不同的公告内容。通过该系统,网站管理员可以轻松地发布、编辑和删除网站公告,并且这些公告会自动在首页...

2024-01-26

如何有效定位iframe和网页设计位置设定

如何有效定位iframe和网页设计位置设定

...题,该怎么实现呢?下面将介绍几个方法。方法一:使用JavaScript我们可以通过JavaScript代码,在页面加载时动态修改标题。代码如下:```<script type=\\\"text/javascript\\\">window.onload = function() {var iframe = document.getElementsByTagName(iframe)[0]...

2024-02-26

解决手机网页乱码问题:分析原因及解决方法

解决手机网页乱码问题:分析原因及解决方法

...没有网页所需的编码方式,就需要借助解码插件。比如,Chrome可以安装Google Translate或Codepage Convertor等插件来解决此问题。3. 尝试刷新网页:时常出现浏览器与网页不同步的情况,我们可以尝试刷新网页来解决这个问题。要素三...

2024-02-23