chrome devtools断点调试比console.log更可靠，因其不改变异步时序、可观察闭包变量与调用栈；推荐使用debugger语句或条件断点，并结合network面板、unhandledrejection监听、可选链及ignore list提升调试效率。
Chrome DevTools 断点调试为什么比 console.log 更可靠
因为 console.log 会改变异步执行时序、掩盖竞态问题，且无法查看闭包变量或调用栈中间状态。断点能暂停真实执行流，直接观察作用域链和堆栈帧。
- 右键代码行号 → “Breakpoint” 设置行断点；更推荐用
debugger语句，在逻辑分支前主动插入，便于 Git 提交时临时保留 - 避免在循环体里加断点——改用条件断点：右键断点 → “Edit breakpoint” → 输入
i === 99这类表达式 - XHR/fetch 请求失败时，打开 Network 面板 → 右键请求 → “Break on request” 可捕获发起该请求的 JS 调用位置
TypeError: Cannot read property 'xxx' of undefined 的定位方法
这类错误常因对象未初始化或 API 返回结构与预期不符导致，不能只看报错行，要逆向查源头。
- 在报错行上方加
debugger，运行后在 Console 中输入console.dir(obj)查看实际值，注意区分null和undefined - 使用可选链操作符快速防御：
obj?.user?.profile?.name，但别滥用——它掩盖了数据缺失的根本原因 - 若来自接口响应，进 Network → 点开对应请求 → Preview 或 Response 标签页确认 JSON 结构是否变更，比如后端把
data改成了payload
async/await 错误没被捕获？检查 Promise 状态和 reject 处理
await 后的 Promise 若被 reject 且未用 try/catch 包裹，会触发全局 unhandledrejection 事件，但控制台可能只显示 “Promise rejected” 而无堆栈。
- 在页面加载时监听全局拒绝：
window.addEventListener('unhandledrejection', e => { console.error('Unhandled rejection:', e.reason, e.promise); }); - 确保每个
await都落在try块内，catch中打印e.stack而非仅e.message - 避免
await fetch(url).then(...)这种混合写法——fetch成功返回 Promise，但网络失败（如离线）仍会 reject，then不处理 reject 分支
Chrome 的 “Ignore list” 如何避免被 node_modules 干扰调试
默认调试时会跳进 node_modules 里的压缩代码或 polyfill，浪费大量时间。
立即学习“Java免费学习笔记（深入）”；
- 打开 DevTools → ⚙️ Settings → Ignore list → Add pattern → 填
node_modules/（结尾斜杠必须） - 也可在 Sources 面板右键某文件 → “Add script to ignore list”，适合忽略特定工具库如
lodash.js - 启用后，断点不会停在被忽略文件中，但
console.log仍可见；如需临时取消忽略，勾选右上角 “Disable JavaScript source maps” 即可绕过
