JavaScript调试核心是断点调试、console.log辅助验证和错误堆栈溯源：Chrome中通过Sources面板或debugger语句设断点，配合Scope查看变量、单步执行；console.log可升级为table、group、条件日志等高效用法。
JavaScript 代码调试不是靠猜，而是靠浏览器开发者工具和少量关键语句精准定位问题。核心方法就三条：断点调试、console.log 辅助验证、错误堆栈溯源。
怎么在 Chrome 里打断点调试 debugger 和 Sources 面板
打断点是最直接的方式，比反复刷新加 console.log 高效得多。
- 在
Sources面板里找到对应 JS 文件，点击行号左侧空白处即可设置断点；函数执行到该行会自动暂停 - 也可以在代码中插入
debugger;语句——它只在开发者工具打开时生效，关掉就自动跳过 - 暂停后可查看
Scope面板里的局部变量、闭包变量；用右上角按钮单步执行（F8继续，F10跳过函数，F11进入函数） - 注意：压缩后的代码（如
bundle.min.js）断点可能错位，务必开启source map或在开发环境用未压缩版本调试
console.log 不只是打印，还能结构化查看和条件触发
很多人只用 console.log(val)，其实它支持更多调试友好特性。
- 用
console.table(data)查看数组或对象，比纯文本更清晰；console.group()+console.groupEnd()折叠日志块 - 加标签：
console.log('【API】response:', res)，方便在控制台过滤关键词 - 条件日志：
console.log(condition && '触发了分支逻辑')，避免污染正常流程 - 别在循环里无脑打
console.log(i)，容易卡死页面；改用console.count('loop')或限制次数：if (i
从 Uncaught TypeError 到定位真实调用链
报错信息本身只告诉你“哪里崩了”，但真正要修的是“为什么崩”。
立即学习“Java免费学习笔记（深入）”；
- 错误第一行（如
Uncaught TypeError: Cannot read property 'x' of undefined）说明访问了undefined的属性，重点查前一步的返回值是否为undefined - 点开堆栈（
Stack Trace）里的文件链接，能跳转到出错的具体行；注意区分是你的代码还是第三方库内部抛的错 - 异步场景下（如
fetch后的.then），错误可能不显示完整路径，此时要在catch里加console.error(err)并打印err.stack - 启用
Pause on caught exceptions（Sources 面板右上角三个点 → Settings → 勾选），能让程序在任何try/catch捕获前就暂停，看到原始上下文
调试最常被忽略的其实是环境差异：本地跑得通，线上报错，大概率是数据结构不一致或 polyfill 缺失；断点没反应，先确认 sourcemap 是否加载成功、脚本是否被缓存、debugger 是否被构建工具移除。
