调试 JavaScript

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

本教程将向您介绍在开发者工具中调试任何 JavaScript 问题的基本工作流程。请继续阅读，或观看本教程的视频版本。

重现 bug

查找一组始终可重现 bug 的操作始终是调试的第一步。

  1. 在新标签页中打开此演示。
  2. 在编号 1 框中输入 5。
  3. 在 Number 2 框中输入 1。
  4. 点击添加号码 1 和号码 2。按钮下方的标签显示 5 + 1 = 51。结果应为 6。这是您要修复的 bug。

5 + 1 的结果是 51。应为 6。

在此示例中，5 + 1 的结果为 51。应为 6。

熟悉“来源”面板界面

开发者工具提供了许多不同的工具来执行不同的任务，例如更改 CSS、分析网页加载性能以及监控网络请求。您可以在 Sources 面板中调试 JavaScript。

  1. 打开开发者工具，然后前往来源面板。

    “来源”面板。

来源面板包含三个部分：

“来源”面板的 3 个部分。

  1. 显示文件树的页面标签页。此处列出了该网页请求的每个文件。
  2. Code Editor 部分。在页面标签页中选择文件后，该文件的内容会显示在此处。

  3. Debugger部分。用于检查网页 JavaScript 的各种工具。

    如果您的开发者工具窗口较宽，默认情况下，调试程序位于代码编辑器的右侧。在本例中，作用域和监视标签页与断点、调用堆栈等一起作为可收起的部分。

宽窗口右侧的调试程序。

使用断点暂停代码

调试此类问题的常用方法是将大量 console.log() 语句插入到代码中，以便在脚本执行时检查值。例如：

function updateLabel() {
  var addend1 = getNumber1();
  console.log('addend1:', addend1);
  var addend2 = getNumber2();
  console.log('addend2:', addend2);
  var sum = addend1 + addend2;
  console.log('sum:', sum);
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}