chrome DevTools 是最常用、功能最全的 javaScript 调试环境，核心技巧包括断点调试（行断点、条件断点、日志点）、console 进阶用法（table、group、time、assert）、实时监控修改、网络与 异步 问题排查及 Source maps 启用。
javascript 调试不靠猜，靠 工具 和方法。chrome devtools 是最常用、功能最全的调试环境，掌握几个核心技巧就能大幅缩短排查时间。
断点调试：精准定位问题代码
在源码行号左侧点击可设置行断点，执行到该行会自动暂停；右键断点还能设“条件断点”（比如 Error !== NULL）或“日志点”（不暂停，只输出值）。函数入口处打个断点，配合 F8（继续）、F10（单步跳过）、F11（单步进入），能清晰看到变量变化和调用流向。
console 的进阶用法：不止是 console.log
除了 console.log()，这些更实用：
-
console.table(data)：把数组或 对象 以表格形式展示，适合查结构化数据 -
console.group('API Calls')+console.groupEnd()：折叠日志分组，避免信息混杂 -
console.time('fetch')/console.timeEnd('fetch')：测某段代码耗时 -
console.assert(condition, 'msg')：条件为 false 时才输出错误，不打断执行
实时监控与修改：边看边改，快速验证
在 Console 面板里可以直接访问当前断点 作用域 内的变量，也能临时改值、调函数、甚至重写小段逻辑。比如发现某个配置对象字段错了，直接输入 config.timeout = 5000 回车，再继续运行，立刻验证是否修复。配合 Scope 面板 查看 闭包 、局部 / 全局变量，比翻代码找定义快得多。
立即学习“Java 免费学习笔记（深入）”；
网络与异步问题：别让 promise 和 fetch 消失在黑盒里
异步错误常因未 catch 或未 await 导致控制台没报错但逻辑中断。打开 Network 面板，勾选 Preserve log，再复现问题，就能看到所有请求状态、响应体、时序。在 Console 中输入 debugger 语句，也能在 Promise 链中强制中断；对 fetch 后的 .then() 或 async/await 函数内部加断点，观察 resolve 值是否符合预期。
基本上就这些。不复杂，但容易忽略细节——比如忘了关 Preserve log 导致日志刷屏，或断点打在压缩后代码上找不到对应行。开启 Source Maps（构建时生成并部署 .map 文件），就能在原始 es6/TS 文件里调试，体验提升明显。
以上就是
