如何在Chrome中调试JavaScript

吴欣
152 阅读5分钟

在这篇文章中，我们将逐步解释如何在Chrome中使用DevTools调试JavaScript。如果你想在Chrome中调试你的JavaScript代码，那么你必须遵循下面提到的这些步骤。

项目概述

我将演示一个如何在Chrome中调试JavaScript代码的例子。在这一步中，我将给出代码的基本描述。这个项目是关于计算两个数字之间的模数操作。这个例子允许你分别传递分母和除数的值。 随后，点击计算按钮，它将花一分钟时间计算两个数字之间的模，并给你输出结果。模操作的语法如下。

x mod y = r

其中x=红利，y=除数，r=余数

在这个项目中，有两个文件，.html和.js文件。JavaScript文件包含5个函数，用于计算两个数字的模。

  1. 点击处理程序。如果一个或两个输入字段都是空的，它会给出一个警告信息
  2. Inputs are empty()。这个函数用来检查输入字段是否为空。
  3. updateLabel()。这个函数用来计算两个数字的模数
  4. getNumber1()。用来获取第一个数字的值
  5. getNumber2()。用来获取第二个数字的值

下面是Javascript代码的说明。

function onClick() {
  if (inputsAreEmpty()) {
    label.textContent = 'Alert: You have to enter numbers in both fields.';
    return;
  }
  updateLabel();
}
function inputsAreEmpty() {
  if (getNum1() === '' || getNum2() === '') {
    return true;
  } else {
    return false;
  }
}
function updateLabel() {
  var value1 = getNum1();
  var value2 = getNum2();
 var mod = "value1" % "value2"
  label.textContent = value1 + ' % ' + value2 + ' = ' + mod;
}
function getNum1() {
  return inputs[0].value;
}
function getNum2() {
  return inputs[1].value;
}

HTML文件的代码如下所示。

<html>
  <head>
    <title>How to Debug JavaScript in Chrome Tutorial</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      h1 {
        font-size: 1em
      }
      input, button {
        min-width: 72px;
        min-height: 36px;
        border: 1px solid grey;
      }
      label, input, button {
        display: block;
      }
      input {
        margin-bottom: 1em;
      }
    </style>
  </head>
  <body>
    <h1>Calculate Mod between two Numbers</h1>
    <label for="number1">Enter the value of dividend</label>
    <input placeholder="Please enter number" id="number1">
    <label for="number2">Enter the value of divisor</label>
    <input placeholder="Please enter number" id="number2">
    <button>Compute mod(%)</button>
    <p></p>
    <script src="index.js"></script>
  </body>
</html>

项目的输出。

错误检测

可悲的是，每当我们运行这段代码时，它都会向你显示一些错误。在下面的例子中，你可以清楚地看到，当我们插入数值时，输出是未定义的，而不是一个实际的结果。所以，现在我们必须检测出这个bug的原始原因，这在后面的文章中会有简单的解释。

例子

在这个例子中，我们要传递的值会产生未定义的输出，如下图所示。

所以，现在我们必须迅速修复这个错误。在这一步中，我们的主要目标是检测bug的来源。为了快速检测出bug，你应该在Chrome中调试JavaScript代码。

为此，你需要在Chrome浏览器上运行应用程序，然后按短键CTRL+SHIFT+I来打开devTool。打开devTool后，你就可以看到下面的屏幕了。 除了由devtool执行的许多任务外，它还可以监控请求，改变CSS。

开发者工具概述

你可以在源面板标签中调试你的JavaScript代码。它有3个部分，如下图所示。

  1. 文件导航页:每个文件的请求都可以在这个标签中列出。
  2. 代码编辑器：它显示文件内容
  3. Javascript 调试窗格:用来检查JavaScript

代码调试

调试代码中错误的最简单方法是，你必须在代码中插入**console.log()**函数，以便同时检查数值。

function updateLabel() {
  var value1 = getNum1();
  console.log('value1:', value1);
  var value2 = getNum2();
  console.log('value2:', value2);
 var mod = parseInt(value1) % parseInt(value2);
 console.log('result:', mod);
  label.textContent = value1 + ' % ' + value2 + ' = ' + mod;
}

尽管**console.log()**函数可以作为检测bug的一个很好的选择，但断点可能是一个更有效的选择，因为它允许你在代码执行过程中暂停并分析相应的值。此外，断点比console.log()更好，因为使用console.log()工作时，你必须观察许多步骤，这些步骤必须手动完成，以便在控制台窗口中查看数值，而断点通过直接工作使之更容易。

在代码中插入断点

如果你回来看看应用程序的功能，你会发现在点击 "计算按钮 "后，模数操作的结果似乎是不正确的。因此，你需要在点击事件之前设置一个断点。

事件监听器断点可以帮助你通过展开相应的组找到你想停止的特定事件，如下图所示。如图所示，通过检查点击框，只要有点击监听器事件出现，就会停止执行。

步入你的代码

下图说明，如果你想停止某个特定行的执行，例如，我们说第21行，那么我们将点击它，并在该特定行上观察到一个蓝色标记，这确保了执行到第21行时将自动停止。

检测错误的原因

由于我们在第21行设置了断点，这意味着每当代码的执行到达该行时，代码总是会暂停。当代码暂停在某一行时，那么范围面板就会指定其局部和全局变量。

正如你在下面的图片中看到的，这两个值都不是整数。正如你在下图中看到的那样，它们被括在引号中，同时mod值也显得很可疑。最后，检测到了bug的来源。

修复错误

现在你可以修改代码并再次测试它。点击窗口屏幕右侧的恢复图标。现在用下面提到的一行替换第20行，并保存修改。

var mod = parseInt(value1) % parseInt(value2);

然后停用断点，用不同的值测试代码，以检查结果是否正确。

24%9的输出如下。

5%3的输出结果如下。

结论

JavaScript是最流行的语言，它的需求也与日俱增。几乎所有的地方都在使用JavaScript。在这篇文章中，我们解释了在Chrome中调试JavaScript代码的问题。随后，我们深入讨论了每个步骤。每一步都提供了示例图片，以帮助你理解。

avatar
文章
阅读
粉丝