如何调试与查看递归函数执行状态？求最小整数递归的调用栈分析

这个函数用的是减治的递归思路，每次把问题规模缩小1，直到触底返回再逐层向上合并结果：

1. 终止条件：当传入的数组长度为1时，唯一的元素就是当前子数组的最小值，直接返回
2. 递归逻辑：把原数组去掉第一个元素得到长度减1的子数组，递归求这个子数组的最小值，再用Math.min比较当前数组第一个元素和子数组的最小值，得到的结果就是原数组的最小值

你给的测试输入是[42, 12, 8, 60, 12, 33, 21]，调用栈遵循先进后出的规则，执行过程的栈变化如下：

入栈阶段（逐层调用递归） #

栈底到栈顶的顺序依次为：

1. smallestInt([42, 12, 8, 60, 12, 33, 21]) （数组长度7，等待子调用返回）
2. smallestInt([12, 8, 60, 12, 33, 21]) （数组长度6，等待子调用返回）
3. smallestInt([8, 60, 12, 33, 21]) （数组长度5，等待子调用返回）
4. smallestInt([60, 12, 33, 21]) （数组长度4，等待子调用返回）
5. smallestInt([12, 33, 21]) （数组长度3，等待子调用返回）
6. smallestInt([33, 21]) （数组长度2，等待子调用返回）
7. smallestInt([21]) （数组长度1，触发终止条件，入栈后直接进入出栈阶段）

出栈阶段（逐层返回结果） #

从栈顶开始依次弹出计算：

1. 弹出smallestInt([21])，返回值为21
2. 弹出smallestInt([33, 21])，计算Math.min(33, 21)，返回21
3. 弹出smallestInt([12, 33, 21])，计算Math.min(12, 21)，返回12
4. 弹出smallestInt([60, 12, 33, 21])，计算Math.min(60, 12)，返回12
5. 弹出smallestInt([8, 60, 12, 33, 21])，计算Math.min(8, 12)，返回8
6. 弹出smallestInt([12, 8, 60, 12, 33, 21])，计算Math.min(12, 8)，返回8
7. 弹出栈底的smallestInt([42, 12, 8, 60, 12, 33, 21])，计算Math.min(42, 8)，返回最终结果8，调用栈清空

• 增加层级日志埋点：给递归函数加一个可选的depth参数，默认值为0，每次递归调用时depth+1，在函数入口打印当前层级的入参，返回前打印当前层级的返回值，用空格缩进对应层级，能非常直观看到调用的嵌套关系和每一步的输入输出。比如这个函数可以改造为：

function smallestInt(arr, depth = 0) {
  const indent = '  '.repeat(depth)
  console.log(`${indent}调用，参数：${arr}`)
  if (arr.length === 1) {
    console.log(`${indent}返回：${arr[0]}`)
    return arr[0]
  }
  const res = Math.min(arr[0], smallestInt(arr.slice(1), depth + 1))
  console.log(`${indent}返回：${res}`)
  return res
}

• 断点调试：在IDE或者浏览器开发者工具的Sources面板里，给递归函数内部打上行断点，调试时可以直接查看当前调用栈面板里的所有层级上下文，每个层级的入参、局部变量都能直接查看，也可以单步执行观察入栈出栈的完整过程。
• 小规模输入验证：先拿最小规模的输入（比如这个函数先测长度为1、2的数组）验证逻辑是否正确，再逐步扩大输入规模，快速定位哪一层的逻辑出了问题。
• 边界校验兜底：提前处理非法输入比如空数组，避免递归无限执行或者抛出异常，也能减少调试时的干扰项。

内容的提问来源于stack exchange，提问作者mjolk