调试 promise 应优先用 async/await 重写以稳定断点；其次启用异步堆栈追踪查看调用链；再通过 debugger + catch 捕获拒绝态；最后将匿名回调改为命名函数提升断点命中率。
直接在 Promise 的 .then() 或 .catch() 匿名回调里打行断点，往往不生效或停不准——因为微任务执行时调用栈已清空，调试器难以关联原始上下文。要真正“看到”Promise 中间状态，得用更匹配异步机制的方式。
用 async/await 重写后打断点
这是最稳定、最接近同步体验的做法。把链式 Promise 转成 await 写法，断点就能自然停在数据就绪之后：
- 原写法：
fetch('/api').then(res => res.json()).then(data => console.log(data)) - 改写后：
const res = await fetch('/api'); const data = await res.json(); console.log(data); - 在
console.log(data)前设断点，此时data已是解析完成的对象，变量可直接展开查看
启用异步堆栈追踪再查调用链
现代浏览器默认开启该功能，但需确认是否生效：
- 打开 Chrome DevTools → Settings（齿轮图标）→ Preferences → 勾选 “Enable async stack traces”
- 在
.then()回调第一行设断点并触发，暂停后看右侧 Call Stack 面板 - 会显示类似
async function → promise callback → then handler的层级，点击上层函数可跳回发起请求的位置
用 debugger + catch 捕获拒绝态
Promise 报错常被静默吞掉，加 debugger 可强制中断：
- 在链尾加：
.catch(err => { debugger; throw err; }) - 或全局监听未捕获拒绝：
window.addEventListener('unhandledrejection', e => debugger) - 触发错误后立即暂停，可在 Console 查
e.reason，在 Scope 看闭包变量和堆栈
把匿名回调换成命名函数再断点
避免 .then(data => { /* 这里打点可能失效 */ }) 这类写法：
- 改成：
.then(handleResponse).catch(handleError) - 单独定义：
function handleResponse(data) { /* 断点设在这里，上下文清晰 */ } - DevTools 更容易映射源码位置，断点命中率高，也方便复用和单元测试
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
