JavaScript调试核心是定位问题、观察状态、验证修复，依赖DevTools：断点调试暂停执行查变量，Console实时执行与修改，Network/Application查接口与存储，Elements联动验证DOM操作。
JavaScript 调试的核心是“定位问题 + 观察状态 + 验证修复”，开发者工具（DevTools）是实现这三步最直接的手段。关键不在于功能多，而在于知道什么时候用什么功能、怎么快速看到真实运行时的数据。
断点调试：让代码在你想看的地方停下来
比起 console.log 挨个打点，断点能暂停执行、查看所有变量、单步跟进逻辑。在 Sources 面板中点击行号左侧即可设置断点；也可以在代码里写 debugger 语句，运行到此处自动触发。
- 普通断点适合已知出错位置，比如某个函数内部计算异常
- 条件断点（右键行号 → Edit breakpoint）可设为 error !== null，只在特定状态中断
- 事件监听器断点（右侧 Debugger 面板 → Event Listener Breakpoints）适合排查点击、输入、加载等行为触发的逻辑
Console 不只是打印：它是实时 JS 执行环境
在 Console 中不仅能输出日志，还能直接调用当前作用域下的变量和函数，甚至修改值来验证修复效果。
-
console.table(data) 查看数组或对象结构比 log 更清晰
-
console.group('API') 和 console.groupEnd() 折叠日志块，避免信息混杂
- 输入变量名回车，立刻看到它的当前值和原型链；输入 this 可确认当前执行上下文
Network 和 Application 面板：查接口和数据源问题
很多 JS 错误实际来自外部依赖——接口返回空、缓存了旧脚本、localStorage 数据格式变了。
- Network → 点击某次请求 → Preview/Response 查看真实返回内容，确认是否与代码预期一致
- Application → Storage → LocalStorage/SessionStorage 直接编辑或清空，模拟首次进入或登录态丢失场景
- Application → Service Workers 可禁用或更新，避免本地缓存 JS 文件导致新代码未生效
Elements + Console 联动：快速验证 DOM 操作逻辑
JS 常操作 DOM，但元素可能还没挂载、已被移除，或选择器写错。Elements 面板选中元素后，在 Console 输入 $0 就能直接引用它。
-
$0.style.color = 'red' 实时改样式，验证是否选对了节点
-
$0.parentElement 或 $0.nextElementSibling 快速导航父/兄弟
节点
- 右键 Elements 中的节点 → Break on → subtree modifications，当 JS 动态增删子元素时自动中断
不复杂但容易忽略。
节点