启用异步堆栈追踪是解决异步调试“看不见、停不住、跟不全”的关键，需在Chrome DevTools的Settings→Preferences中勾选“Enable async stack traces”，并在await行或.then回调首行设断点，结合Call Stack中的“Async call from”标记和Scope面板验证状态。
异步代码调试难，关键在于调用链“看不见、停不住、跟不全”。靠 console.log 容易漏掉中间状态，而普通断点又常在 await 或 .then 外部就跳过。真正有效的办法，是让调试器主动识别异步边界，并把跨微任务的执行路径串起来。
启用异步堆栈追踪（Async Stack Traces）
这是理清调用链的基础开关。不打开它，Call Stack 里只会显示当前回调，看不到前面是谁触发了这个 Promise。
- Chrome DevTools：打开 Sources 面板 → 右上角三个点 → Settings → Preferences → 找到 “Enable async stack traces” 并勾选
- DevEco Studio：File > Settings > Build, Execution, Deployment > Debugger > Async Stack Traces → 勾选 Enable async stack traces，并设置 Async call chain depth ≥ 1
- VS Code（Node.js）：在 launch.json 中添加 "smartStep": true 和 "skipFiles": ["
/**"] ，确保异步上下文不被跳过
在关键位置精准设断点
不是所有行都适合打断点。重点盯住“暂停-恢复”的交接点，才能捕获状态变化。
- async/await：在 await 表达式所在行 设断点（不是 await 后面那行），可观察 promise 状态、检查 pending 前的参数
- Promise 链：在 .then()、.catch()、.finally() 的回调函数第一行 设断点，避免跳进内部逻辑前就错过入口
- 事件驱动场景：在 Elements 面板选中目标元素 → Event Listeners 标签 → 展开 click / input 等事件 → 点击右侧函数链接跳转源码并设断点
结合调用栈与作用域实时验证
断点命中的瞬间，别急着点“继续”。先看三处：
- Call Stack 面板：确认是否出现 “async function” 或 “Promise.then” 等异步标记；有 “Async call from” 分隔线，说明异步链已生效
- Scope 面板：检查 await 前后变量值是否符合预期，比如 fetch 调用前的 url、响应后的 data
- Network 面板（配合 Sources）：若涉及 API，可在 Network 中定位对应请求，右键 “Reveal in Network” 查看响应头、状态码、时间线
注意异步调试的常见盲区
有些情况异步堆栈不工作，提前知道能少走弯路：
- setTimeout/setInterval 不受 Async Stack Traces 影响：它们属于宏任务，调试需依赖普通断点或 performance.now() 手动打点
- 异步堆栈不显示变量列表：即使开启，Scope 面板也不会列出异步链中上层函数的局部变量，只能看到当前帧
- 修改异步设置后需重启调试会话：DevEco Studio 或 VS Code 中改完 Async call chain depth，必须重新启动 debug 才生效
