JS调试程序的3种方法（附带实例）

通常情况下，如果 JavaScript 程序出现错误，是不会有相关提示信息的。那么该错误到底是语法错误还是逻辑错误以及出错的具体位置无法得知，这样我们就迫切地需要掌握 JavaScript 的调试方式。

接下来，我们一起学习 3 种常见的 JavaScript 调试方式。

JavaScript alert()弹出警告框

使用 alert() 弹出警告框，实例代码如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>在 JavaScript 中使用警告框</title>
  </head>
  <body>
    <script>
      alert(5 + 6);
    </script>
  </body>
</html>

运行以上代码，浏览器显示结果如下图所示：

图 1 alert()弹出警告框

JavaScript document.write()

使用 document.write() 将内容写入 HTML 文档，实例代码如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>在 JavaScript 中使用 document.write() 方法</title>
  </head>
  <body>
    <script>
      document.write(Date());
    </script>
  </body>
</html>

运行以上代码，浏览器显示结果为：

Mon Jun 09 2025 14:32:00 GMT+0800 (中国标准时间)

JavaScript console.log()

使用 console.log() 将内容写入浏览器控制台，实例代码如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>在 JavaScript 中使用 console.log() 方法</title>
  </head>
  <body>
    <script>
      let a = 5;
      let b = 6;
      let c = a + b;
      console.log(c);
    </script>
  </body>
</html>

运行以上代码，浏览器显示结果为：

图 2 console.log()显示结果

总结

比较这 3 种调试方式可知，console.log() 是一种更好的方式，在实际应用中更受开发人员的青睐。

对这 3 种调试方式的对比分析如下：

如果在文档已完成加载后执行 document.write()，整个 HTML 页面将被覆盖，对程序的执行造成不便。
alert() 方法会阻断 JavaScript 程序的执行，从而带来副作用，而且使用 alert() 方法需要用户单击弹窗的“确定”按钮，操作麻烦，最重要的是 alert() 只能输出字符串。
console.log() 仅在控制台输出相关信息，不会对 JavaScript 程序执行造成阻碍。此外，console.log() 可以接收任何字符串、数字和 JavaScript 对象，使用它可以看到清楚的对象属性结构，在 AJAX（Asynchronous JavaScript And XML，异步JavaScript和XML技术）中返回 JSON 数组对象时调试很方便。

注意，在程序中，调试是测试、查找及减少 Bug 的过程。console.log() 在 IE 8 及以下版本中会报错，调试后注意注释掉它。

JS调试程序的3种方法（附带实例）

JavaScript alert()弹出警告框

JavaScript document.write()

JavaScript console.log()

总结

相关文章