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

如果您是Web开发人员,一定少不了使用Google的开发工具,所以学习和使用Google的开发工具控制台调试你的JS代码是非常重要的!

前言

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

代码中的BUG

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

<!DOCTYPE html>
<html>
  <head>
    <title>Sample JS to Add two numbers</title>
  </head>
  <body>
    <h1>Add two numbers</h1>
    <label for="num1">Number 1</label>
    <input id="num1">
    <label for="num2">Number 2</label>
    <input id="num2">
    <button>Add</button>
    <p></p>
    <script>
    	var input = document.querySelectorAll('input');
		var label = document.querySelector('p');
		var button = document.querySelector('button');
		button.addEventListener('click', onClick);
		function onClick() {
		  var num1 = input[0].value;
		  var num2 = input[1].value;
		  var sum = num1 + num2;
		  label.textContent = num1 + ' + ' + num2 + ' = ' + sum;
		}
    </script>
  </body>
</html>

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

基于事件的断点

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

  • 点击F12在Chrome中打开开发者工具。或者我们可以右键单击并选择检查(Ctrl + Shift + I)。
  • 转到“Sources”选项卡并展开“Event Listener Breakpoints”部分。我们可以在键盘,设备,鼠标等部分找到不同的事件。
  • 展开“Mouse”复选框并选择“click”复选框。
  • 这意味着,每当发生点击事件时,代码执行暂停。这是一个基于事件的断点。

用例子实操教你使用Chrome开发者工具调试JavaScript
现在继续尝试添加两个数字。当我们点击添加按钮时,代码执行被暂停,并且带有onClick函数的行被突出显示。由于这是一个基于事件的断点,因此DevTools暂停在包含该事件处理程序的行上。

单步执行

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

  • Step-into:当我们点击步入按钮时,onClick()函数中的代码将逐行执行,每步进入点击。
  • Step-over: 当我们点击切换按钮时,onClick()函数中的代码被跳过,执行停止,因为在函数定义之后没有更多的代码行。如果在函数定义之后存在任何行,控件将直接跳到该行代码。
  • Step-out:当在一个函数内部时,如果我们点击Step-out按钮,控制器会跳过该函数的其余部分并跳转到函数被调用的那一行。

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

代码行断点

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

  • 最初,变量num1,num2和sum的值是“undefined”,因为我们还没有设置变量。
  • 现在进入(F11)该函数,看看变量值是如何变化的。
  • 当我们达到变量总和时,可以看到它被评估为一个字符串。所以,这可能是错误的原因。

Watch和控制台

为了确认这是否是错误,我们可以使用三种不同的方法来找出变量总和是如何评估的。
Console.log()-console.log()来检查变量的值是如何随时间变化的。但是这涉及手动编辑代码,我们需要放置多行console.log()来查找错误的位置。
控制台 – 控制台用于执行随机的JavaScript语句。调试控制台中的代码时,我们可以覆盖变量值。例如,我们可以在控制台中简单地给num1 + num2,然后回车。我们将在下一行获得价值。我们可以重新分配num1和num2中的值。控制台主要用于这种测试目的。
为了确认这个bug,让我们通过控制台找到sumof变量的类型。在调试模式下在控制台输入typeof(sum)。我们应该将该类型看作一个字符串,这证实了我们假设可变和被评估为字符串而不是数字。
用例子实操教你使用Chrome开发者工具调试JavaScript
Watch – 另一个替代console.log()的方法是在Developer Tools中调试的最简单方法,就是在DevTools中使用Watch Expressions。我们可以简单地在Watch中添加任何变量或任何JavaScript表达式,并且在执行过程中,我们可以简单地观察值或表达式随时间的变化。
在“Sources”面板中,展开“Watch”部分。现在点击+符号添加一个表达式。
键入typeof(sum)并回车。我们可以看到总和的类型是“字符串”。因此,这也证实了我们的假设:总和被评估为一个字符串。

修正代码

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

var sum = Number(num1) + Number(num2);

或者:

var sum = parseInt(num1) + parseInt(num2);

我们可以直接在“Sources”面板中编辑代码,并使用Ctrl + S进行保存以测试修补程序,恢复执行代码。
用例子实操教你使用Chrome开发者工具调试JavaScript
我们可以使用Developer Options的Sources面板中的Deactivate Breakpoints选项(Ctrl + F8)来关闭断点
现在应用程序应该工作正常。这些是可以尝试使用Chrome开发人员工具调试JavaScript代码的基本步骤。

原创文章,作者:webstack,如若转载,请注明出处:https://www.webstacks.cn/tutorial/1179.html

发表评论

登录后才能评论