JavaScript 调试入门：从 Alert 到 Chrome 断点实战

作者：半夏

时间：2026-10-29

本文通过一个简单的加法器示例，系统讲解 JavaScript 的三种主要调试方式：Alert 弹窗、Console 日志输出以及 Chrome 浏览器断点调试。重点介绍了如何在 Chrome Source 面板中设置断点、使用单步执行与函数调用控制，以及利用 Console 查看和修改变量值。同时澄清了 JS 中 var 关键字对变量作用域的影响，帮助开发者掌握基础调试技能。

文章目录

JavaScript 调试概述与示例

本文将以一个加法器程序为例，演示 JavaScript 的调试流程。首先展示相关代码及运行效果：

JavaScript 调试概述与示例

HTML 文件 test.html 的内容如下：


<span style="font-family:Comic Sans MS;font-size:18px;"><!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>计算器</title> 
</head> 
<body> 
 
<div> 
  <h2>计算器</h2> 
 
  <div> 
    <input type="text" id="num1"> 
    <span>+</span> 
    <input type="text" id="num2"> 
    <span>=</span> 
    <span id="result"></span> 
    <button id="add">计算</button> 
  </div> 
</div> 
<script src="./demo.js"></script> 
</body> 
</html></span>

JavaScript 脚本 demo.js 的代码如下：


<span style="font-family:Comic Sans MS;font-size:18px;">/** 
 * Created by yanzi on 15/12/8. 
 */ 
var num1 = document.getElementById("num1"), 
  num2 = document.getElementById("num2"), 
  result = document.getElementById("result"), 
  btn_add = document.getElementById("add"); 
 
btn_add.addEventListener("click", onAddClick, false); 
function onAddClick(){ 
  var a = parseInt(num1.value), 
  b = parseInt(num2.value); 
  var sum = add(a, b); 
  result.innerHTML = sum; 
} 
 
/** 
 * 
 * @param a 
 * @param b 
 * @returns {*} 
 */ 
function add(a, b){ 
  return a+b; 
}</span>