JavaScript调试核心依赖浏览器开发者工具，通过行断点、条件断点、debugger语句、Watch面板等实现高效问题定位，辅以console.table()、source map、黑盒脚本等技巧提升效率，并需养成复现路径记录、优先查看错误堆栈等关键习惯。
JavaScript调试核心靠浏览器开发者工具，配合断点、日志和实时检查，不依赖外部IDE也能高效定位问题。
浏览器开发者工具（DevTools）是主力
Chrome、Edge、Firefox 都内置强大调试器，F12 打开后切换到“Sources”或“调试器”标签页即可开始：
-
行断点：点击代码行号左侧灰色区域，出现红点即设好；刷新页面或触发对应逻辑就会暂停执行
-
条件断点：右键断点 → “Edit breakpoint”，输入条件如
i === 5，只在满足时中断
-
console.log 配合 debugger：在关键位置写
console.log('value:', x); debugger;，比纯日志更可控
-
Watch 面板：手动添加变量或表达式（如
arr.length > 10），实时观察变化
实用调试技巧提升效率
光会打断点不够，这些小技巧能少走弯路：
-
console.table()：打印对象数组时比
console.log 更清晰，自动格式化为表格
-
console.group()：用
console.group('API 请求') + console.groupEnd() 折叠日志块
-
source map 支持：构建工具（如 Webpack、Vite）开启 source map 后，可在原始 .ts/.jsx 文件中打断点，而非压缩后的 bundle.js
-
黑盒脚本：右键第三方脚本 → “Blackbox script”，避免跳进无关库代码，专注自己的逻辑
辅助工具与进阶选择
日常开发浏览器够用，复杂场景可补充：
-
VS Code + Debugger for Chrome / Edge：在编辑器里直接打断点、看调用栈、复用已有代码环境
-
React DevTools / Vue DevTools：专用于框架组件状态、props、事件流的可视化调试
-
logpoints（日志断点）：Chrome DevTools 中右键行号 → “Add logpoint”，输入模板如
"User clicked: ${event.target.id}"，不中断执行只输出日志
-
performance 面板查异步卡顿：录制操作后查看长任务、渲染帧率、JS 堆内存变化，定位性能瓶颈
容易忽略但很关键的习惯
调试效果常取决于前期准备和观察方式：
-
复现路径写下来：明确哪几步操作必然触发 bug，避免边试边忘
-
先看 console 错误堆栈：红色错误信息里的文件名、行号、调用链，往往直指根源
-
检查 network 请求响应：前端报错常源于后端返回结构变更或 4xx/5xx 状态码，别急着改 JS
-
禁用缓存再刷新：Network 面板勾选 “Disable cache”，防止旧 JS 文件干扰调试结果
行断点：点击代码行号左侧灰色区域，出现红点即设好；刷新页面或触发对应逻辑就会暂停执行