JavaScript调试主要依靠浏览器开发者工具，配合console日志、断点和调用栈分析；常用Chrome/Edge/Firefox DevTools，重点使用Console、Sources和Network面板，并辅以debugger语句、条件断点、Async Call Stack及console.assert/time/trace等技巧提升效率。
JavaScript调试主要靠浏览器开发者工具，配合console日志、断点和调用栈分析，快速定位逻辑错误、异步问题或变量异常。
浏览器开发者工具（最常用）
Chrome、Edge、Firefox 都内置了功能完整的 DevTools，按 F12 或 Ctrl+Shift+I 打开。重点用好以下三块：
-
Console 面板：直接执行 JS 代码、查看报错信息、打印变量（
console.log()、console.table()、console.group()可让输出更清晰） - Sources（或 Debugger）面板：设置断点（点击行号左侧）、单步执行（F10/F11）、查看作用域变量、修改运行时变量值
- Network 面板：检查 fetch/AJAX 请求是否发出、状态码、响应内容、耗时，排查接口相关 bug
断点调试技巧
比 console 更精准，适合复杂逻辑或难以复现的问题：
- 在可疑代码行左侧单击设普通断点；右键可添加“条件断点”（比如
i === 5），只在满足条件时暂停 - 使用
debugger;语句插入代码中，运行到此处自动触发断点（注意上线前删掉或用构建工具移除） - 遇到异步问题，开启 Async Call Stack（Sources → 右上齿轮图标 → 勾选），能看清 Promise / setTimeout 的完整调用链
实用 console 技巧
不只是 console.log()，这些写法省时间：
立即学习“Java免费学习笔记（深入）”；
-
console.log('value:', value)比console.log(value)更易读，尤其多个变量时 -
console.assert(condition, '提示信息')：条件为 false 时才输出，不打断执行 -
console.time('label') / console.timeEnd('label')快速测一段代码执行耗时 -
console.trace()输出当前执行位置的调用栈，适合查函数是谁调的
其他辅助工具
不是必须，但在特定场景很管用：
- VS Code + Debugger for Chrome / Edge 插件：在编辑器里直接调试前端页面，支持断点、变量监视、表达式求值，适合大型项目
- React DevTools / Vue DevTools：专用于对应框架，可查看组件状态、props、事件监听器、重渲染原因
- LogRocket / Sentry：线上环境收集真实用户报错和行为回放，适合排查生产环境偶发问题
基本上就这些。调试不复杂但容易忽略细节，比如没看清是同步还是异步执行、变量作用域搞混、或者忘了清缓存导致代码没更新。养成看 Sources 面板里的实际加载文件、留意 Console 里的黄色警告（不是红色错误也可能是隐患），效率会高很多。
