意思很简单:当代码执行到某个函数时,你可以借助浏览器开发者工具,直接看到“这个函数是被谁调用的、调用链长什么样”。【3】
具体做法是:
- 打开浏览器开发者工具;
- 进入 Sources 面板;
- 在你想观察的那一行代码上打断点;
- 刷新页面或重新触发代码执行;
- 当执行暂停时,看右侧的 Call Stack 区域。
这个区域会按栈的结构展示当前调用关系。比如我文里的例子里,执行到 add 时,调用链会显示:
- 底部是全局入口
anonymous - 中间是
addAll - 顶部是当前正在执行的
add【3】
所以它的核心价值不是“看某个函数本身”,而是看函数之间的调用关系。这在分析复杂代码或者排查 Bug 时很有用。【3】
除了断点,你也可以直接在函数里写:
function add(b, c) {
console.trace()
return b + c
}
这样控制台会输出当前的调用链,适合快速排查。【3】
如果你愿意,我可以顺手拿一段更小的示例代码,给你画一下调用栈是怎么入栈、出栈的。