JavaScript 调试核心是善用浏览器开发者工具：通过控制台错误定位问题、在 Sources 设断点暂停执行、用 Console 动态查值与分组日志、结合 Elements 面板排查 DOM 与事件问题。
JavaScript 调试主要靠 浏览器 开发者 工具，核心是理解错误信息、设置断点、观察变量和执行流程。工具本身不难，关键在用对地方。
看懂控制台报错信息
浏览器控制台（Console）显示的错误通常包含三部分：错误类型（如ReferenceError）、具体提示（如“x is not defined”）、以及出错文件和行号（如script.js:12）。重点看最后一行——它指向代码实际执行失败的位置，但问题根源可能在前面的某一行。
- 点击文件名和行号可直接跳转到源码对应位置
- 如果是压缩代码报错，确保开启了Source Maps（在 DevTools 设置中勾选“Enable JavaScript source maps”）
- Uncaught TypeError: Cannot read property ‘xxx’ of undefined这类错误，优先检查对象是否已正确初始化
用断点暂停执行流程
在 Sources 面板中，点击行号左侧灰色区域可添加断点。代码运行到该行时会自动暂停，此时能查看当前 作用域 所有变量值、调用 栈、甚至修改变量临时测试逻辑。
- 右键断点可设置“条件断点”，比如只在 i === 5 时暂停
- 函数开头加 debugger; 语句，等效于手动打一个断点
- 遇到异步代码（如 fetch 回调），可用 async 断点或在回调内部设断点
善用 Console 的实用技巧
控制台不只是看报错的地方，更是动态调试的入口：
- 输入变量名回车，立刻查看当前值（支持展开对象、数组）
- 用 console.table(data) 清晰展示数组或对象列表
- console.group()和 console.groupEnd() 可折叠日志块，避免信息混乱
- 临时禁用所有console.log？在 Console 里输入console.log = () => {}（刷新后恢复）
快速定位 DOM 与事件问题
元素交互类 bug（如点击没反应、样式异常）适合用 Elements + Event Listeners 配合排查：
立即学习“Java 免费学习笔记（深入）”；
- 在 Elements 面板中右键元素 →“Break on”→ 选 attribute modifications 或node removal，DOM 变化时自动暂停
- 右侧 Event Listeners 标签页能查看该元素绑定了哪些事件、来自哪个文件、是否用了 once 或capture
- 勾选 “Show user agent shadow DOM” 可调试自定义元素内部结构
