debugger语句是最省事的断点方式，仅在开发者工具开启时生效，需确保生产环境移除；console.table()以表格形式清晰展示数组或对象；console.trace()输出完整调用栈；MutationObserver可实时监听DOM变化。
直接在代码里加 debugger 是最省事的断点方式
浏览器遇到 debugger 语句会自动暂停执行，等同于在 DevTools 里手动点行号打断点，但不用切窗口、不用找位置。适合快速验证某段逻辑是否走到、变量值是否符合预期。
注意：它只在开发者工具开启时生效；生产环境必须确保已移除或用构建工具自动剔除（比如 Webpack 的 drop_debugger 插件）。
- 放在条件分支里，比无差别打断点更精准：
if (user.id === 123) { debugger; // 只在特定用户下暂停 } - 配合
console.log使用效果更好：先打日志看值，再debugger进入上下文查状态 - 别提交带
debugger的代码——CI 流程里 Chrome Headless 模式也会停住，导致测试卡死
console.table() 查对象和数组比 console.log() 清晰得多
当你要看一个数组里几十个用户对象，或者接口返回的嵌套结构，console.log(users) 展开后容易迷失层级。console.table() 自动格式化成表格，支持点击列头排序，还能指定显示哪些字段。
- 基本用法：
console.table([{name: 'Alice', age: 30}, {name: 'Bob', age: 25}]); - 只显示特定键：
console.table(users, ['id', 'email', 'status']);
- 对普通对象也有效：
console.table({a: 1, b: 2, c: 3}); - 不支持深层嵌套对象的展开，如果第二层是对象，表格里只显示
[object Object]——这时候得退回去用console.log或者JSON.stringify(obj, null, 2)
用 console.trace() 快速定位函数调用链
当你发现某个函数被意外多次调用，或者想确认是谁触发了这个副作用，console.trace() 会在控制台打出完整的调用栈，包括文件名、行号、函数名，比单看 console.log('here') 强太多。
立即学习“Java免费学习笔记（深入）”；
- 典型场景：React 中组件重复渲染，你在
useEffect开头加：useEffect(() => { console.trace('effect triggered'); // ... }, [deps]); - 可配合条件使用，避免刷屏：
if (window.DEBUG_TRACE) console.trace('handleClick'); - 注意它输出的是「当前执行位置」的调用链，不是函数定义位置——所以放在高阶函数或事件回调里才真正有用
监听 DOM 变化用 mutationObserver，别靠肉眼刷页面
调试动态插入/删除节点、样式切换、属性变更这类问题，刷新页面再点开 Elements 面板找变化太慢。用 MutationObserver 能实时捕获，并精确到具体哪个节点、什么类型的变化。
- 最小可用示例：
const observer = new MutationObserver(mutations => { mutations.forEach(m => { console.log('type:', m.type, 'target:', m.target, 'added:', m.addedNodes); }); }); observer.observe(document.body, { childList: true, subtree: true }); - 常用选项：
childList（子节点增删）、attributes（属性改）、characterData（文本内容变）；三者可组合 - 记得及时
observer.disconnect()，否则可能造成内存泄漏或重复监听 - DevTools 的 Elements 面板右键节点 → “Break on” 功能本质也是基于它，但只能设在单个节点上，不如代码灵活
debugger 或 MutationObserver，结果第二天发现页面莫名卡住，回头翻代码才想起上周临时加的监听还在跑。 
