17370845950

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，浪费大量时间。

• 打开 DevTools → ⚙️ Settings → Ignore list → Add pattern → 填 node_modules/（结尾斜杠必须）
• 也可在 Sources 面板右键某文件 → “Add script to ignore list”，适合忽略特定工具库如 lodash.js
• 启用后，断点不会停在被忽略文件中，但 console.log 仍可见；如需临时取消忽略，勾选右上角 “Disable JavaScript source maps” 即可绕过

调试最难的部分不是找到报错行，而是判断“这个 undefined 是本该有值，还是设计如此”。多花十秒看一眼 Network 响应或 localStorage 数据，往往比单步执行五分钟更有效。