Chrome DevTools 全面指南：查看 JavaScript 函数执行栈的 6 种方法
关键词：JavaScript 调试、Chrome DevTools、函数调用栈、性能分析、网络请求追踪
为什么要查看函数执行栈？
在调试 JavaScript 时，函数调用栈（Call Stack）是定位问题的关键。它能告诉你：
- 当前代码是如何一步步执行到这里的？
- 哪些函数调用了当前函数？
- 异步代码（Promise、
setTimeout）的调用链是什么？
Chrome DevTools 提供了多种方式查看执行栈，下面逐一介绍。
1. Sources 面板：断点 + Call Stack
这是最经典的方法。
操作步骤
- 打开 DevTools → Sources 面板。
- 在代码行号处点击，设置断点。
- 触发代码执行，程序会暂停。
- 右侧 Call Stack 区域显示完整调用链。
示例代码
```javascript
function foo() {
bar();
}
function bar() {
baz();
}
function baz() {
console.log('Hello');
}
foo();
```
在 baz() 处设置断点，Call Stack 会显示：
```
baz
bar
foo
(anonymous)
```
技巧：
- 使用 条件断点：右键断点 → Add condition。
- 开启 Pause on exceptions：捕获异常时自动暂停。
📚 参考：Chrome DevTools 调试 JavaScript 官方文档
2. Console 面板：console.trace() 和 Error().stack
如果不想暂停代码，可以直接打印调用栈。
示例代码
```javascript function foo() { bar(); } function bar() { baz(); } function baz() { console.trace('Trace from baz'); console.log(new Error().stack); } foo(); ```
输出效果：
console.trace()：在控制台显示可点击的调用链。Error().stack：返回字符串形式的调用栈。
3. Performance 面板：火焰图 (Flame Chart)
用于分析运行时性能和函数调用关系。
操作步骤
- 打开 Performance 面板。
- 点击 Record，执行页面操作。
- 停止录制，查看 Main Thread 火焰图。
- 点击某个函数，可以看到调用链和耗时。
适用场景：
- 页面卡顿、动画掉帧。
- 找出耗时最长的函数。
📚 参考：Chrome DevTools Performance 功能详解
4. Network 面板：查看请求的 Initiator 调用栈
虽然 Network 面板主要用于网络请求，但它能显示请求的触发源。
操作步骤
- 打开 Network 面板。
- 点击某个请求 → Headers → Initiator。
- 悬停或点击 Initiator，可以看到调用栈。
示例：
```javascript
fetch('/api/data').then(res => res.json());
```
在 Network 面板中，fetch 请求的 Initiator 会显示调用链。
📚 参考：Chrome DevTools Network Initiator Stack
5. 异步调用栈：Async Stack Traces
调试 Promise 或 setTimeout 时，默认栈会断裂。开启 Async 后，能看到完整链路。
开启方法
- DevTools → Settings → Preferences → Sources → 勾选 Enable async stack traces。
示例代码
```javascript async function fetchData() { await new Promise(resolve => setTimeout(resolve, 1000)); console.trace('After async'); } fetchData(); ```
📚 参考：调试异步 JavaScript 官方指南
6. 其它技巧
- Event Listener Breakpoints：在 Sources 面板中监听事件触发。
- XHR/Fetch Breakpoints：调试网络请求相关的调用栈。
- Blackbox Script：忽略第三方库，专注业务代码。
对比表：各面板查看调用栈能力
| 面板 | 是否显示完整栈 | 支持异步栈 | 适用场景 |
|---|---|---|---|
| Sources | ✅ | ✅ | 精确调试、断点 |
| Console | ✅ | ❌ | 快速打印栈 |
| Performance | ✅ | ✅ | 性能分析、火焰图 |
| Network | 部分 | ✅ | 请求来源追踪 |
代码速查表
```javascript // 打印调用栈 console.trace('Trace here');
// 获取调用栈字符串 console.log(new Error().stack);
// 异步调试：开启 Async Stack Traces // DevTools Settings → Preferences → Sources → Enable async stack traces ```
