单步调试进入函数：让代码问题无处可藏

你有没有遇到过这样的情况？程序跑起来不对劲，某个函数返回的结果总是出人意料，但翻来覆去检查代码也没看出毛病。这时候，靠“肉眼猜错”效率太低，真正靠谱的办法是——用单步调试进入函数，亲眼看着它一步步执行。

什么是单步调试进入函数

在调试程序时，我们常会看到几个熟悉的按钮：跳过（Step Over）、进入（Step Into）、跳出（Step Out）。其中，“进入”就是让你从当前代码行，直接钻进被调用的函数内部。这和“跳过”不同，跳过只会执行函数，但不会展示函数里面的运行过程；而“进入”能让你逐行查看函数体内的逻辑流转。

比如你写了个计算折扣的函数：

function calculateDiscount(price, isVIP) {
  let discount = 0;
  if (isVIP) {
    discount = price * 0.2;
  } else {
    discount = price * 0.05;
  }
  return price - discount;
}

const finalPrice = calculateDiscount(100, false);

你在调用 calculateDiscount 的那行打上断点，按下“进入”，调试器就会带你进入函数内部，一行一行看 discount 是怎么算出来的。如果发现非 VIP 用户也被打了八折，那就说明 isVIP 传错了，或是判断条件写反了。

实际场景：网页按钮点了没反应

假设你做个网页，有个“提交订单”按钮，点下去没反应。你查了事件绑定没问题，但就是不走逻辑。这时候，在事件回调里设断点，然后点击按钮，调试器停住了。

document.getElementById('submitBtn').addEventListener('click', function() {
  const amount = getAmount();
  const tax = calculateTax(amount);
  submitOrder(amount + tax);
});

你按“跳过”，发现 getAmount() 跑完了，到 calculateTax 这一步，你怀疑它内部有问题。于是你在这一行停下，不再跳过，而是选择“进入”。调试器立刻带你进入 calculateTax 函数：

function calculateTax(value) {
  if (value <= 0) {
    return 0;
  }
  return value * 0.1;
}

你一步步走下去，发现 value 居然是 undefined，原来 getAmount() 返回的是空值。问题根源找到了——不是按钮没绑，也不是事件没触发，而是上游数据没拿对。

别小看这一步“进入”

很多人调试时习惯一路“跳过”，以为函数封装好了就一定可靠。可现实是，函数可能因为输入异常、边界条件、异步时机等问题出错。只有真正“进入”去看，才能看清变量的真实状态、逻辑的执行路径。

现代开发工具都支持这个功能。Chrome DevTools 按 F11，VS Code 点“向下箭头”图标，IDEA 或 PyCharm 也都有对应快捷键。熟练之后，你会发现，很多看似复杂的 bug，其实就在函数内部某一行悄悄埋着。

下次代码不听话，别急着重写，先试试单步进入函数，像探案一样，跟着执行流走一遍。真相往往就在那几行之间。