JavaScript 调试的核心在于“快速定位问题 + 精准验证逻辑”，浏览器 开发者 工具（DevTools）是日常调试最直接、最高效的手段。掌握几个关键操作，比盲目加 console.log 高效得多。
打断点（Breakpoints）——暂停执行看现场
在 Sources 面板中，点击某行代码左侧的行号，即可设置断点。代码运行到该行时会自动暂停，此时你可以：
- 查看当前 作用域 内所有变量的实时值（Scope 面板）
- 逐行执行（F10）或进入函数内部（F11）
- 跳过循环 / 条件块，快速跳到感兴趣的位置（F8 继续执行）
- 右键变量名 →“Add to Watch”持续监控其变化
小技巧：对异步回调（如 setTimeout、fetch 后的 .then）也支持断点；遇到压缩代码，可点击右上角 `{}` 格式化后再下断点。
Console 的高级用法——不止是打印
控制台不只是输出日志，它本身就是一个可交互的 JavaScript 执行环境：
立即学习“Java 免费学习笔记（深入）”；
-
debugger;语句写在代码里，等价于手动设断点（上线前记得删掉） -
console.table(data)清晰展示数组或对象的结构化表格 -
console.group('步骤 A')+console.groupEnd()折叠日志分组 -
console.time('load')/console.timeEnd('load')测量耗时 - 输入变量名回车，直接查看其当前值，甚至能调用它的方法或修改属性（仅限非 const 基本类型）
Network 和 Elements 联动排查典型问题
很多 JS 错误根源不在脚本本身，而在资源或 DOM 状态：
- 报错“Cannot read property‘xxx’of null”？切换到 Elements 面板，搜索对应元素是否存在、是否被动态移除或尚未加载
- 接口返回数据异常？Network 面板中找到对应请求，看 Headers（状态码、响应头）、Preview（格式化响应体）、Response（原始内容）
- 事件没触发？右键元素 →“Break on”→“attribute modifications”或“event listener breakpoints”，让 DevTools 在监听器绑定 / 属性变更时暂停
Call Stack 与 Scope —— 理解“谁调用了谁”
当断点触发后，Call Stack 面板显示完整的函数调用链，点击其中任意一层，可跳转到对应源码位置并查看那一时刻的局部变量（Scope）。这对排查闭包变量意外保留、递归调用深度、事件处理函数嵌套等问题特别有用。
注意：箭头函数不会出现在 Call Stack 中的名字栏（显示为 anonymous），可通过文件名 + 行号定位；若想清晰命名，可显式命名函数表达式：const handler = function handleClick() { ……}。
