VSCode的Call Stack视图直观展示函数调用嵌套关系与执行顺序：自上而下为从当前执行函数到入口函数的同步调用链，异步回调以独立帧显示并标注async或任务类型，多上下文通过会话名称区分，Source Map支持映射回TypeScript源码行号。
如果您在调试 JavaScript 或 TypeScript 应用时希望实时观察函数调用的嵌套关系与执行顺序，VSCode 的 Call Stack 视图提供了直观的运行时上下文快照。以下是理解该视图中各项内容及其反映的代码执行流程的方法：
本文运行环境：MacBook Air，macOS Sequoia。
一、识别 Call Stack 视图中的层级结构
Call Stack 显示当前暂停点（如断点命中或异常抛出）时所有活跃的函数调用链，从最内层（正在执行的函数）到最外层（如入口函数或事件循环回调），自上而下按调用顺序排列。
1、启动调试会话，在代码中设置一个断点并触发执行。
2、当程序暂停后，打开左侧活动栏中的“运行和调试”视图（或按 ⇧⌘D）。
3、在“CALL STACK”面板中，查看顶部为当前执行位置，底部通常为 node:internal/process/task_queues 或 webpack:///./src/index.ts 等入口标识。
4、点击某一层级可跳转至对应源码行，并在右侧变量面板中查看该调用帧的局部作用域变量。
二、区分同步调用与异步任务帧
Call Stack 仅展示同步执行路径；异步操作（如 Promise.then、setTimeout 回调）不会出现在主栈中，但其回调函数被推入栈时会形成独立帧，常带有 async 标识或标注为 PromiseReactionJob、setTimeout handler 等上下文标签。
1、在代码中插入 await new Promise(r => setTimeout(r, 0)) 并设断点于后续语句。
2、暂停后观察 Call Stack，确认当前帧上方无 await 前的函数，证实 await 已中断同步流。
3、展开“Paused on exception”或“Async Call Stack”（若启用）可查看关联的异步调度来源。
三、利用线程与会话标识识别多上下文
当调试涉及 Web Worker、Node.js 子进程或多个调试会话时，Call Stack 顶部会显示会话名称（如 "main thread"、"worker.js" 或 "Node.js (Express)"），帮助区分不同执行上下文的堆栈。
1、在 launch.json 中配置多个 configuration，例如同时启动前端开发服务器与后端 API。
2、触发任一服务的断点，观察 Call Stack 顶部显示的会话名称是否与预期一致。
3、点击会话名称右侧的下拉箭头，可在不同活跃会话间切换，各自 Call Stack 独立刷新。
四、结合 Source Map 查看原始 TypeScript 行号
当调试已编译的 JavaScript 代码时，Source Map 可将运行时堆栈帧映射回 TypeScript 源文件位置，确保 Call Stack 中显示的是 .ts 文件名与原始行号，而非生成的 .js 路径。
1、确认 tsconfig.json 中已启用 "sourceMap": true 且输出目录包含 .map 文件。
2、在 launch.json 的 configuration 中添加 "sourceMaps": true 和 "outFiles": ["./dist/**/*.js"]。
3、断点触发后，在 Call Stack 中检查函数名旁是否显示 MyComponent.ts:42 而非 MyComponent.js:87。
