JavaScript调试需用debugger语句、启用异步调用栈、设置XHR/fetch断点；console.log输出实时引用，应使用JSON.stringify或浅拷贝；捕获Promise错误需开启异常暂停并监听unhandledrejection。
JavaScript 调试不是靠 console.log 狂打点，而是用对工具、设对断点、看懂调用栈——否则越打日志越迷。
怎么在 Chrome 里精准打断点而不漏掉异步代码
很多人只点行号左侧加断点，结果 fetch 回调、setTimeout 或事件监听里的代码根本停不住。这是因为断点默认是“行断点”，不跟踪异步任务调度。
- 用
debugger语句：直接写在你想停的位置，比如fetch().then(() => { debugger; doSomething(); })，它会在执行到时强制触发断点，不受源码映射或压缩影响 - 启用“异步调用栈”：在 Chrome DevTools 的 Sources 面板右上角三个点 → Settings → 勾选
Enable async stack traces，这样点击错误堆栈能一路追到Promise.then的源头 - 用“XHR/fetch 断点”：在 Sources → Breakpoints → XHR/fetch breakpoints 里填入 URL 关键字（如
/api/user），发起匹配请求时自动暂停，不用手动找回调位置
为什么 console.log 输出的是引用而不是快照
这是最常被忽略的坑：console.log(obj) 在 Chrome 里显示的是实时对象，不是打印那一刻的副本。你展开看时，它可能已经被后续代码改得面目全非。
- 想看“那一刻”的值，用
console.log(JSON.parse(JSON.stringify(obj)))（仅限可序列化数据） - 更稳妥的方式是用
console.table(obj)查看结构化对象，或console.log({...obj})展开前先做浅拷贝 - 注意：Chrome 89+ 支持
console.log({ obj: Object.assign({}, obj) })这类写法，但 Vue/React 的响应式对象仍会脱钩，此时必须用JSON.stringify再解析回来
如何快速定位未捕获的 Promise 错误
Uncaught (in promise) Error: ... 这类错误不打断点、不进 catch，经常一闪而过。光靠控制台刷屏根本抓不住。
立即学习“Java免费学习笔记（深入）”；
- 打开 DevTools → Console → 右上角设置图标 → 勾选
Pause on caught exceptions和Pause on uncaught exceptions，再勾选下方的Pause on exceptions in promises - 在 Sources → Event Listener Breakpoints → 展开
Promise→ 勾选Promise rejection，这样每个被 reject 且没被catch的 Promise 都会停住，并高亮出 reject 的那一行 - 配合
window.addEventListener('unhandledrejection', e => { debugger; })，可以在全局兜底捕获并中断
真正卡住你的往往不是语法错误，而是状态滞后、异步竞态、原型链污染这类“看不见的修改”。断点要打在数据流动的咽喉处，而不是逻辑结尾；看变量不如看调用栈，查输出不如查源头。Chrome 的 “Blackbox script” 功能（右键脚本 → Add script to ignore list）也别乱开——忽略第三方库后，你可能就看不到 axios 内部到底把 config 改成了啥。
