Chrome DevTools 是 JavaScript 调试最直接高效的方式，提供断点控制（条件断点、日志断点、XHR/fetch 断点）、Sources 面板高级功能（全局搜索、黑盒脚本、本地覆盖）、Console 实时干预（修改变量、$0–$4 引用、监控函数）、以及异步与性能调试（异步堆栈、事件监听断点、Performance 录制分析）。
JavaScript 调试最直接高效的方式，就是用 Chrome DevTools（开发者工具），它不只是“打断点看变量”，而是整套可观测、可干预、可复现的调试闭环。关键在于知道哪些功能真正省时间，而不是堆砌所有面板。
断点不止是 click 一下：精准控制执行流
光在代码行号上点红点只是基础。实际开发中更常用的是：
-
条件断点：右键断点 → “Edit breakpoint” → 输入 JS 表达式（如
userId === 123），只在满足条件时暂停，避免重复触发 -
日志断点（Logpoint）：右键 → “Add logpoint”，输入
Fetching user: ${id}，不中断执行但输出信息，比console.log更干净、可开关 -
XHR/fetch 断点：Network 面板 → 右上角“过滤器”图标 → 勾选 “XHR/fetch breakpoints”，输入 URL 关键字（如
/api/orders），请求发起时自动停在调用栈源头
快速定位问题代码：Sources 面板的隐藏能力
Sources 不只是看文件的地方：
-
代码搜索全覆盖：
Ctrl+Shift+F（Win）或Cmd+Opt+F（Mac），搜字符串、正则、甚至未压缩的源码（支持webpack:///路径） -
黑盒脚本：右键第三方库（如
lodash.min.js）→ “Blackbox script”，之后 stepping 时自动跳过，避免陷入无关代码 - 本地覆盖（Local Overrides）：在 Sources → Overrides → 选择文件夹 → 启用后，修改任何页面资源（JS/CSS/HTML）都会持久保存到本地，并在刷新后生效，适合临时验证修复逻辑
实时观察与干预：Console 和 Scope 的联动
Console 不仅是打印工具，更是运行时沙箱：
立即学习“Java免费学习笔记（深入）”；
-
在断点暂停时直接执行代码：比如输入
user.profile.name = "test"立即改值，再继续执行，验证副作用 -
$0–$4 快捷引用：Elements 面板选中一个 DOM 元素后，
$0就代表它；在 Console 里输入$0.click()或getComputedStyle($0)立即操作 -
监控变量变化：在 Console 输入
monitor(console.log)，后续所有console.log调用都会显示调用位置；也可用debug(fn)在函数入口自动加断点
性能与异步问题：不能只靠 console.time
异步逻辑（Promise、setTimeout、fetch）容易掩盖真实执行顺序：
- Async stack traces：Settings → “Enable async stack traces”，让 Promise reject 或 await 后的错误带上完整异步调用链
-
Event Listener Breakpoints：Sources → 右侧 “Event Listener Breakpoints” → 展开 “Timer” 或 “Fetch/XHR”，勾选
setTimeout或fetch，下次触发就停在注册该事件的代码行 - Performance 面板录制 + 筛选：点击录制 → 复现操作 → 停止后，在底部 Summary 中筛选 “Scripting”，看哪段 JS 执行耗时最长；再点“Bottom-Up”查看具体函数耗时占比
Chrome DevTools 的价值不在功能多，而在每个功能都可组合、可持久、可回溯。调试不是找 bug，是理解代码在浏览器中真实怎么跑的。
