JavaScript调试应优先使用Chrome DevTools Sources面板精准设断点，配合console.table、console.group、console.trace等增强日志，并启用Pause on caught exceptions和Blackbox功能提升效率。
JavaScript 调试不靠猜，靠的是精准触发断点、看清变量状态、复现异步流程——浏览器 DevTools 就是默认且最可靠的工具，其他第三方工具多数是它能力的延伸或封装。
Chrome DevTools 的 Sources 面板怎么高效用
这是实际调试 JavaScript 最常打开的面板，核心不是“打开”，而是“让断点真正生效并可复现”：
-
debugger语句写在代码里，但必须确保没被压缩移除（构建时保留devtool: 'source-map'或禁用drop_debugger） - 动态打行断点前，先确认脚本已加载完成；SPA 页面中，
webpack热更新后旧断点会失效，需手动重新点击行号激活 - 右键断点可设“条件断点”，比如只在
id === 123时暂停，避免在列表循环中反复中断 - 函数断点（
Breakpoints右侧的 + 号）适合捕获未直接调用的事件处理器，例如document.addEventListener('click', handler)中的handler名字要完全匹配
console.log 不够用时该换什么
单纯刷日志容易淹没关键信息，也难追踪异步链路。替代方案不是不用 console，而是用对方法：
-
console.table(data)查看数组或对象结构，比console.log更直观，尤其对 API 返回的扁平化列表 -
console.group()和console.groupEnd()套住一段逻辑，折叠输出，适合调试嵌套请求或组件生命周期 -
console.trace()直接打出调用栈，比打断点更快定位“谁调用了这个函数” - 不要在生产环境留
console.warn或console.error，它们可能被某些老版本 iOS Safari 当作错误上报
遇到 “Cannot set property of undefined” 却找不到源头怎么办
这类报错通常发生在链式访问（如 obj.user.profile.name）中某一级为 undefined，但堆栈指向的是赋值行，而非取值源头：
立即学习“Java免费学习笔记（深入）”；
- 在 Sources 面板中，勾选右上角
Pause on caught exceptions，能让执行停在第一次抛出异常的位置，而不是被捕获后继续跑 - 用 Chrome 的
Blackbox script功能标记第三方库（如node_modules下的文件），避免断点误入框架内部，聚焦自己代码 - 在报错行上方加
console.log(obj, obj?.user, obj?.user?.profile)，配合可选链操作符快速验证哪一级断裂 - 如果用 TypeScript，这类问题其实在编译期就能暴露，但运行时仍可能因类型断言（
as any）绕过检查
真正卡住的往往不是工具不会用，而是没意识到：DevTools 的 Network 面板能重放请求并注入断点，Performance 面板能录下 JS 执行帧并逐帧查看调用堆栈，这些能力比“刷新页面再点几次”更接近问题本质。
