调试ref="/tag/137/" style="color:#EB6E00;font-weight:bold;">JavaScript时，最头疼的莫过于代码运行结果和预期不符，但又找不到问题出在哪。这时候，单步跟踪就成了开发者的“放大镜”，能一行一行看清程序执行的过程。
什么是单步跟踪
单步跟踪，就是在浏览器开发者工具中逐行执行JavaScript代码，观察变量变化、函数调用顺序和逻辑走向。它不像console.log那样靠“猜”输出位置，而是真正“走进”代码里看每一步发生了什么。
如何开启单步调试
以Chrome浏览器为例，按F12打开开发者工具，切换到Sources面板。找到你要调试的JS文件，在某一行点击行号打上断点。刷新页面，当代码执行到这一行时，就会自动暂停。
比如你有这样一段代码：
function calculateTotal(price, tax) {
let subtotal = price + tax;
let fee = subtotal * 0.05;
return subtotal + fee;
}
calculateTotal(100, 10);在let subtotal = price + tax;这行设断点，刷新后程序会停在这行。此时你可以看到price和tax的值分别是100和10，接着点击“单步执行”按钮，一步步看变量如何计算。
常用控制按钮说明
开发者工具上方有一排小图标，对应不同操作：
- ▶️ 继续执行，直到下一个断点
- ⏭️ 单步跳过，执行当前行并停在下一行
- ⬇️ 单步进入，如果当前是函数调用，会进入函数内部
- ⬆️ 单步跳出，从当前函数中跳出回到调用处
比如你调用了一个复杂的validateForm函数，想看看里面哪一步出了错，就用“单步进入”。如果只是路过一个你确定没问题的工具函数，就用“单步跳过”快速略过。
结合调用栈和作用域查看状态
暂停时，右侧的Call Stack显示了当前函数的调用路径。点进去可以看到每一层函数的局部变量。Scope面板则列出当前作用域下的所有变量值，鼠标悬停在变量上也能即时查看。
有次我遇到一个表单提交总失败的问题，后台提示数据格式不对。我在数据发送前的函数设了断点，一步步跟踪发现某个字段被无意中转成了字符串。这种隐式类型转换，光看代码很难发现，但单步跟踪一眼就能揪出来。
条件断点：只在特定情况下暂停
有时候问题只在特定数据下出现，比如某个用户ID才会触发bug。这时候普通断点会频繁打断正常流程。右键行号选择“Add conditional breakpoint”，输入条件，比如userId === 10086，只有满足条件时才会暂停。
实际应用场景
你在做购物车功能，发现优惠券金额没正确扣除。可以在计算总价的函数里设断点，看看折扣率有没有正确传入，是否被后续代码覆盖。一边执行一边看变量变化，比反复刷新加log高效得多。
单步跟踪不是高级技巧，而是日常开发中的基本功。就像修车师傅不会只听声音判断故障，程序员也不能只靠猜。把代码跑起来，一步步看它怎么走，问题自然浮现。