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