如何调试代码_JavaScript中常用的调试技巧有哪些

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，结果第二天发现页面莫名卡住，回头翻代码才想起上周临时加的监听还在跑。