DevTools Sources 面板是浏览器调试 JavaScript 的核心：支持精准断点、作用域检查、实时改代码；需启用 source map 和 async 栈追踪，善用 Watch 和 Overrides 提升效率。
直接在浏览器里调试 JavaScript，核心就靠 DevTools 的 Sources 面板，而不是靠 console.log 盲打——它能定位真实执行位置、暂停运行、检查作用域、修改代码即时生效。
打断点调试比 console.log 更准：用 debugger 和行断点配合
手动加 debugger 语句会强制触发断点，但容易遗忘删除；更稳的方式是在 Sources 面板中点击行号左侧加断点。注意：压缩后的代码（如 bundle.js）断点可能错位，务必确认已加载 source map（右下角显示 source maps detected）。
- 异步代码（
setTimeout、fetch回调）里设断点，需勾选Async栈追踪（右上角三个点 →Settings→Enable async stack traces） - 条件断点：右键行号 →
Add conditional breakpoint，输入user.id === 123这类表达式，避免频繁中断 - XHR/fetch 断点：在
Network面板右键请求 →Break on request，或在Sources→XHR/fetch Breakpoints里添加 URL 关键字
看变量值别只盯 console.log：用 Scope 面板和 Watch 表达式
断点停住后，左侧 Scope 面板自动列出当前函数所有变量（包括闭包变量），比翻控制台更快。想持续观察某个表达式（比如 items.filter(x => x.active).length），在 Watch 栏点 + 号手动添加，它会在每次断点时刷新结果。
-
console.log打印对象是引用，后续修改会影响输出内容；Scope显示的是断点瞬间的快照值 - Watch 表达式支持简写：直接输
data?.user?.name，不用怕报错，DevTools 会显示undefined - 鼠标悬停在代码变量上，也能直接看到当前值（但仅限简单类型，复杂对象要进
Scope）
改代码不用刷新页面：用 Overrides 保存并重载脚本
临时修个 bug 或测试逻辑，不想走构建流程？启用 Overrides（Sources → Filesystem 标签页 → Setup Overrides），选一个本地文件夹授权。之后在 Sources 里编辑任何 JS 文件，Ctrl+S 保存，刷新页面就能运行修改后的代码。
立即学习“Java免费学习笔记（深入）”；
- 首次启用需允许 DevTools 写入本地文件（系统弹窗点允许）
- 覆盖只对当前域名生效，且不会影响原始服务器资源（只是浏览器拦截并替换响应）
- 改完记得把关键修复同步到项目源码，Overrides 里的改动关掉 DevTools 就丢了
真正卡住的往往不是“怎么设断点”，而是没意识到 source map 没生效、异步栈被折叠、或者 Watch 表达式里用了未声明的变量却没报错——这些细节不排查，断点停住了也看不出问题在哪。
