chrome devtools断点需设在可执行语句（如if、赋值），避开var声明/空行/注释；压缩代码须启用source map，动态脚本需blackbox；条件断点、debugger语句、异步回调断点及console高级用法（table/group/time）可提升调试效率。
Chrome DevTools 断点调试怎么设才有效
直接在源码行号左侧单击就能加断点，但多数人忽略的是：断点要设在可执行语句上，var 声明、空行、注释行无法命中。函数内部第一行逻辑语句（比如 if 或赋值）才是安全位置。
常见错误现象：打了断点却没停住——可能是代码被压缩、Source Map 未加载，或脚本是动态插入（如 eval 或 new Function），此时需在 Sources 面板右键选择 “Blackbox script” 或启用 Enable JavaScript source maps。
- 条件断点用右键菜单设置，适合只在特定值时暂停，比如
i === 100 - 使用
debugger语句等价于手动断点，但上线前必须删掉，否则用户也会卡住 - 异步代码（如
setTimeout、fetch回调）里设断点，得确认是否已进入回调执行阶段，别在 Promise pending 状态下干等
console.log 不只是打印，还能干这些事
console.log 被低估了。它支持格式化占位符：console.log("User: %s, Age: %d", name, age)；也能展开对象快照：console.log({a: 1, b: obj}) —— 注意这不是实时引用，而是执行时的副本。
容易踩的坑：在循环里打 console.log(i)，结果全显示最后一个值（尤其配合 var 和闭包）。改用 console.log("i=", i) 或换成 let 可避免。
立即学习“Java免费学习笔记（深入）”；
-
console.table(data)适合查看数组或对象列表，自动对齐字段 -
console.group()和console.groupEnd()套叠输出，结构清晰 -
console.time("label")/console.timeEnd("label")测局部耗时，比手写Date.now()简洁
如何定位 Uncaught TypeError: Cannot read property 'x' of undefined
这类错误不指明哪一行真正出问题，因为 undefined.x 是运行时报错，堆栈顶往往是调用处，不是属性访问处。打开 Chrome 的 Pause on caught exceptions（小齿轮 → “Break on caught exceptions” 取消勾选，只留 “Pause on uncaught exceptions”）能更快停在源头。
更可靠的做法是前置防御：用可选链 obj?.x?.y 或空值合并 obj?.x ?? "default"，既防错又减少调试频次。但注意兼容性——旧版 Safari 不支持 ?.，需 Babel 编译或改用 obj && obj.x && obj.x.y。
- 在
Console面板里直接输入变量名回车，可即时检查当前作用域值 - 错误堆栈里点击文件名+行号，会跳转到
Sources对应位置，但若源码是打包后产物，务必确认 Source Map 已加载成功（底部显示webpack:///或类似路径） - 右键报错行 → “Reveal in Console” 可快速复现上下文
VS Code + Debugger for Chrome 插件联调单页应用
本地开发时，光靠浏览器 DevTools 不够——比如想在 node_modules 里的依赖源码里打断点，或调试 Webpack HMR 触发逻辑。Debugger for Chrome 插件配合 launch.json 就能从 VS Code 直接启 Chrome 并同步断点。
关键配置项："url": "http://localhost:3000" 必须和实际服务地址一致；"webRoot": "${workspaceFolder}/src" 决定源码映射起点，配错会导致断点灰色失效。
- 启动前确保 Chrome 以远程调试模式运行：
chrome --remote-debugging-port=9222 - 如果断点显示为空心圆（未绑定），大概率是路径映射失败，检查
sourceMapPathOverrides是否需要手动补全 - Vue/React 项目常有 HMR 模块热替换，断点可能在模块重载后失效，建议关闭 HMR 临时调试关键路径
Scope 面板里的闭包变量，有时比加十个 console.log 更快。 
