13、JavaScript 调试实战：从案例中学习调试技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/aa123/article/details/155582118

JavaScript 调试实战：从案例中学习调试技巧

在 JavaScript 的世界里，即使是最精心编写的代码也可能会出现问题。本文将通过实际案例，深入探讨 JavaScript 调试的方法和技巧，帮助你更好地应对代码中的各种错误。

1. JavaScript 调试概述

在 JavaScript 开发中，即使是经验丰富的开发者也难免会遇到各种 bug。优秀的开发者并非从不犯错，而是能够迅速找到并解决问题。预防是关键，但当问题出现时，我们需要掌握一系列调试技巧。

2. 案例一：IQ 计算器脚本调试

2.1 问题描述

Owen 接到的第一个案例是一个 IQ 计算器脚本，该脚本用于计算一组 IQ 值的平均值，并根据平均值对用户进行分类。但脚本存在问题，仅被告知“无法正常工作”。

var iqs = [ 113, 97, 86, 75, 92, 105, 146, 77, 64, 114, 165, 96, 97, 88, 108 ];

function showIQClass(data) {
  alert("Click OK to begin IQ calculation.");
  document.getElementById("output").innerHTML = "You are dealing with <em>" +
    calcIQClass(data) + "</em>.";
}

function calcIQClass(data) {
  // Calculate the average IQ
  var average = 0;
  for (var i = 0; i < data.length; i++) {
    average += data[i];
  average = Math.floor(average / data.length);

  // Return the classification of the average IQ
  if (average < 20) {
    return "people who should kill their tvs";
  }
  else if average < 50 {
    return "people who should really hit the books";
  }
  else if (average < 70) {
    return "people who should hit the books";
  }
  else if (averag < 81) {
    return "people who should consider brain exercises";
  }
  else if (average < 91) {
    return "people who could be considered dull";
  }
  else if (average < 111) {
    return "people of average intelligence";
  }
  else if (average < 121) {
    return "people of superior intelligence";
  }
  else if (average < 141) {
    return "people of very superior intelligence";
  }
  else {
    return "geniuses";
  }
}

2.2 调试过程

使用不同浏览器 ：Owen 尝试在不同浏览器中运行脚本，发现不同浏览器对错误的提示不同。Internet Explorer 报告变量 iqs 未定义，但代码中确实存在该变量；Safari 和 Opera 指出错误在不同行，但代码看起来并无明显问题；Firefox 则明确指出问题所在。
Firefox 定位错误 ：Firefox 提示 else if average < 50 语句缺少括号，添加括号后问题解决。

else if (average < 50) {
  // 代码逻辑
}

继续排查问题 ：修复上述问题后，Firefox 又报告新的错误。经过分析，发现是 for 循环后的 { 缺少对应的 } ，添加缺失的括号后问题解决。

for (var i = 0; i < data.length; i++) {
  average += data[i];
  // 添加缺失的 }
}

处理未定义变量 ：Firefox 还报告变量 averag 未定义，这是由于拼写错误导致的。将 averag 改为 average 后，问题解决。

2.3 总结

在这个案例中，我们遇到了语法错误（缺少括号、缺失括号）和变量拼写错误等问题。通过使用不同浏览器进行调试，以及仔细分析错误信息，我们成功解决了这些问题。

3. 案例二：电台呼叫脚本调试

3.1 问题描述

Owen 的第二个案例是一个电台呼叫脚本，用于处理电台竞赛的呼叫，根据呼叫号码确定获胜者。但脚本存在多个问题。

<html> 
  <head> 
    <title>BSI Case 2: Winning Caller</title> 

    <script type="text/javascript"> 
      // Total number of calls 
      var callNum = 0; 

      function checkWinner(form, caller, winningNum) { 
        // Increment the call number 
        var callNum; 
        ++callNum; 

        // Check for a winner 
        if (callNum = winningNum) { 
          alert(caller + ", caller number  + callNum + "... today's winner!"); 
          form.submit(); 
        } 
        else { 
          // Reset the caller field for the next caller 
          var callerField = document.getElementById('caller'); 
          callerField.value = "Next caller"; 
          callerField.focus(); 
          callerField.select(); 
        } 
      } 
    </script> 
  </head> 

  <body> 
    <form name="callform" action="radiocall.php" method="POST"> 
      <img src="radio.png" alt="radio" /> 
      Caller name: <input id="caller" name="caller" type="text" /> 
      <input type="button" value="Call" 
        onclick="checkwinner(this.form, document.getElementById('caller').value, 7)" /> 
    </form> 
  </body> 
</html>

3.2 调试过程

语法错误（Bug #1） ：Firefox 报告语法错误，定位到字符串拼接处缺少引号。添加缺失的引号后，问题解决。

if (callNum = winningNum) {
  alert(caller + ", caller number " + callNum + "... today's winner!");
  // 代码逻辑
}

未定义函数（Bug #2） ：点击“Call”按钮时，出现函数未定义的错误。经检查，发现是函数名拼写错误，将 checkwinner 改为 checkWinner 后，问题解决。

<input type="button" value="Call" 
  onclick="checkWinner(this.form, document.getElementById('caller').value, 7)" />

逻辑错误（Bug #3） ：修复上述问题后，每个呼叫都被判定为获胜者。通过使用 alert 调试，发现 if (callNum = winningNum) 是赋值语句而非比较语句，将 = 改为 == 后，问题解决。

if (callNum == winningNum) {
  // 代码逻辑
}

运行时错误（Bug #4） ：使用 alert 调试时，发现 callNum 显示为 NaN 。通过注释代码，发现是在函数内部重新定义了 callNum 变量，导致全局变量被覆盖。删除函数内部的 var callNum; 后，问题解决。

2.3 自定义调试控制台

为了更方便地调试变量，我们可以创建一个自定义调试控制台。以下是实现代码：

function DebugConsole() { 
  // Create the debug console area 
  var consoleElem = document.createElement("div"); 
  consoleElem.id = "debug"; 
  consoleElem.style.fontFamily = "monospace"; 
  consoleElem.style.color = "#333333"; 
  document.body.appendChild(consoleElem); 
  consoleElem.appendChild(document.createElement("hr")); 

  // Create the alternating background color property 
  this.shaded = false; 
} 

DebugConsole.prototype.displayMsg = function(msg) { 
  // Create the message 
  var msgElement = document.createElement("div"); 
  msgElement.appendChild(document.createTextNode(msg)); 
  msgElement.style.backgroundColor = this.shaded ? "#EEEEEE" : "#FFFFFF"; 
  var consoleElem = document.getElementById("debug"); 
  consoleElem.appendChild(msgElement); 

  // Toggle the alternating background color property 
  this.shaded =!this.shaded; 
}

2.4 总结

在这个案例中，我们遇到了语法错误、逻辑错误、运行时错误和变量覆盖等问题。通过仔细分析代码、使用 alert 调试和创建自定义调试控制台，我们成功解决了这些问题。

4. JavaScript 错误类型总结

错误类型	描述	示例
语法错误	违反 JavaScript 语言规则的错误，通常由代码书写不规范导致。	缺少括号、分号等。
逻辑错误	代码语法正确，但逻辑错误，导致结果不符合预期。	使用 `=` 进行比较而非 `==` 。
运行时错误	只有在脚本运行时才会出现的错误，通常由特定条件触发。	访问未初始化的对象、变量未定义等。

5. 调试技巧总结

使用不同浏览器 ：不同浏览器对错误的提示可能不同，多尝试几个浏览器有助于定位问题。
利用浏览器错误控制台 ：如 Firefox 的错误控制台，能提供详细的错误信息。
使用 alert 调试 ：在代码中插入 alert 语句，查看变量的值和代码执行流程。
注释代码 ：暂时禁用部分代码，观察问题是否消失，有助于定位问题所在。
创建自定义调试控制台 ：方便查看变量的值，避免过多使用 alert 带来的干扰。

6. 避免常见错误的建议

仔细检查代码 ：编写代码时，注意语法规范，避免拼写错误和逻辑错误。
使用一致的命名规范 ：变量和函数名要保持一致，避免混淆。
注意引号和括号的使用 ：确保引号和括号成对出现，避免语法错误。
避免变量覆盖 ：在函数内部尽量避免使用与全局变量相同的名称。

通过以上案例和调试技巧，我们可以更好地应对 JavaScript 代码中的各种错误，提高代码的质量和稳定性。希望这些内容对你有所帮助！

7. 调试流程优化

为了更高效地进行 JavaScript 调试，我们可以优化调试流程。以下是一个 mermaid 格式的流程图，展示了优化后的调试流程：

graph LR
    A[发现问题] --> B[初步分析]
    B --> C{是否为语法错误}
    C -- 是 --> D[使用浏览器错误控制台定位]
    D --> E[修复语法错误]
    E --> F[测试代码]
    C -- 否 --> G{是否为逻辑错误}
    G -- 是 --> H[使用 alert 或自定义控制台调试]
    H --> I[分析逻辑问题并修复]
    I --> F
    G -- 否 --> J{是否为运行时错误}
    J -- 是 --> K[检查特定条件和变量状态]
    K --> L[修复运行时错误]
    L --> F
    J -- 否 --> M[重新分析问题]
    M --> B
    F --> N{问题是否解决}
    N -- 是 --> O[结束调试]
    N -- 否 --> B

这个流程图展示了一个系统的调试过程，从发现问题开始，逐步分析错误类型，采取相应的调试方法，直到问题解决。

8. 实际应用中的调试策略

在实际项目中，我们可能会遇到更复杂的情况。以下是一些实际应用中的调试策略：

8.1 分模块调试

将大型项目拆分成多个模块，逐个模块进行调试。这样可以缩小问题范围，更容易定位错误。例如，在一个包含多个功能模块的网站中，可以先单独调试每个模块的 JavaScript 代码，确保每个模块正常工作后，再进行整体测试。

8.2 版本控制与回滚

使用版本控制系统（如 Git）记录代码的变更。如果在某个版本中引入了新的错误，可以回滚到上一个稳定版本，然后逐步排查问题。这样可以避免在复杂的代码变更中迷失方向。

8.3 日志记录

在代码中添加日志记录功能，记录关键变量的值和代码执行流程。这样在出现问题时，可以查看日志文件，了解代码的执行情况，帮助定位问题。例如：

function someFunction() {
    var variable = "value";
    console.log("Variable value: " + variable);
    // 其他代码逻辑
}

9. 调试工具推荐

除了前面提到的浏览器错误控制台和自定义调试控制台，还有一些其他的调试工具可以帮助我们更高效地进行 JavaScript 调试。

9.1 Firebug

Firebug 是 Firefox 的一个调试插件，它提供了强大的调试功能，如变量监控、代码断点调试、网络请求分析等。可以从 http://www.getfirebug.com/ 免费下载。

9.2 Chrome DevTools

Chrome 浏览器自带的 DevTools 是一个功能丰富的调试工具。它可以帮助我们调试 JavaScript 代码、查看页面元素、分析网络请求等。在 Chrome 浏览器中，按下 F12 或 Ctrl + Shift + I 即可打开 DevTools。

9.3 Visual Studio Code

Visual Studio Code 是一个流行的代码编辑器，它支持 JavaScript 调试。可以通过安装相关的调试插件，在编辑器中直接进行调试，方便快捷。

10. 总结与展望

通过本文的案例分析和调试技巧介绍，我们了解了 JavaScript 调试的重要性和常见方法。在实际开发中，遇到错误是不可避免的，但只要掌握了正确的调试技巧，就能够快速定位和解决问题。

为了更好地应对未来的调试挑战，我们可以不断学习和掌握新的调试工具和技术，提高自己的调试能力。同时，在编写代码时，要养成良好的编程习惯，遵循代码规范，减少错误的发生。

希望本文能够帮助你在 JavaScript 调试的道路上更加得心应手，写出高质量、稳定的代码！