调试 async/await 代码的关键是将断点设在 await 表达式所在行以捕获 Promise 状态切换，启用异步堆栈追踪以还原调用链，并在 .then/.catch 回调首行设断点配合 Scope 面板验证数据，必要时用 debugger 语句兜底。
调试 async/await 代码，关键不是“多设断点”，而是把断点卡在异步状态切换的临界点上——让调试器能看清 promise 从 pending 到 fulfilled 的全过程。
断点必须落在 await 表达式所在行
很多人把断点设在 await 后面那行，结果调试器直接跳过。因为 await 本身才是暂停点，它代表“等一个 promise 完成后再继续”。
- 正确做法：点击
const res = await fetch(url)这整行左侧空白处设断点（蓝色标记出现在该行号旁） - 错误做法：在
console.log(res)那一行设断点——此时 promise 已 resolve，上下文早已切换 - 验证是否生效：命中后看 Scope 面板，
res应显示 undefined 或 Promise {<pending>}，而不是实际数据
启用异步堆栈追踪才能看清来路
不开启这项功能，Call Stack 里只显示当前回调函数，完全看不到“是谁调用了这个 async 函数”“哪个 await 触发了这次 .then”。
- Chrome：Settings → Preferences → 勾选 Enable async stack traces
- VS Code（Node.js）：在
launch.json中添加"smartStep": true和"skipFiles": ["/**"] - 命中断点后，Call Stack 中出现 Async call from 分隔线，说明链路已连通
Promise 链的断点要设在 .then/.catch 回调第一行
链式调用中，每个 .then() 都是一个新的微任务入口。断点设在括号内第一句，才能捕获到上一个 promise 的返回值。
立即学习“Java免费学习笔记（深入）”；
- 例如：
fetch('/api').then(data => { /* 在这行设断点 */ return data.json(); }) - 不要设在
return data.json()那行——它属于下一个 promise 的构造阶段，容易漏掉 data 的原始结构 - 配合 Scope 面板检查参数名（如
data）是否为预期对象，避免因解构或默认值掩盖问题
用 debugger 语句辅助验证执行路径
当不确定某段 async 代码是否真被调用，或者 sourcemap 失效导致断点灰色不可用时，debugger 是最可靠的兜底方式。
- 在
async function开头加debugger;，强制中断并确认函数进入 - 配合条件使用：
if (userId === 123) debugger;，避免干扰正常流程 - 上线前可通过构建工具（如 babel-plugin-transform-remove-console）自动移除，无需手动清理
