调试JavaScript是理解代码真实运行逻辑的过程，核心是用断点暂停执行、查看变量、逐行执行、Console验证；console是轻量探针；Network与Sources协同定位数据问题；需重视堆栈和异步错误捕获。
调试 JavaScript 代码不是“修错”，而是理解代码真实运行逻辑的过程。掌握浏览器开发者工具的调试能力，能让你从“猜问题”转向“看问题”，大幅减少排查时间。
断点是调试的核心入口
在源码行号左侧单击可设置断点，代码执行到该行会自动暂停。此时你可以：
- 查看当前作用域内所有变量的实时值（Scope 面板）
- 逐行执行（F10 跳过函数，F11 进入函数）
- 在 Console 面板中临时运行表达式，验证假设
- 右键变量选择 “Add to Watch” 持续跟踪变化
console 不只是 print，而是轻量级探针
除了 console.log()，更高效的方式包括：
-
console.table(data)：清晰展示数组或对象结构 -
console.group("API 请求")+console.groupEnd()：组织日志层级 -
console.time("fetch")/console.timeEnd("fetch")：测量某段代码耗时 -
console.assert(condition, "提示信息")：条件不满足时才输出，不干扰正常流
Network 和 Sources 面板协同定位问题
前端问题常出现在数据链路中。例如接口返回了 400，但页面没提示：
立即学习“Java免费学习笔记（深入）”；
- 先在 Network 面板筛选 XHR/Fetch，找到对应请求，看响应内容和状态码
- 点击该请求右侧的 “Initiator” 列，直接跳转到触发它的 JS 文件和行号
- 回到 Sources 面板，在那行打上断点，检查传入的参数是否符合预期
不要忽略错误堆栈和异步陷阱
控制台报错里的堆栈信息（Stack Trace）指向的是“出错位置”，但根源可能在上游。尤其注意：
- Promise 拒绝未捕获时，Chrome 会标为 “Uncaught (in promise)” —— 必须加
.catch()或用try/catch包裹await - 定时器、事件监听器中的错误容易被吞掉，可在
window.addEventListener('error', ...)中统一捕获 - 使用
debugger语句可强制在代码中插入断点，适合动态插入调试点
调试不是补救手段，而是开发流程的自然延伸。熟练使用工具后，你会更快确认“是不是这里的问题”，而不是反复刷新、改代码、再刷新。
