17370845950

DevTools Sources 面板是浏览器调试 JavaScript 的核心：支持精准断点、作用域检查、实时改代码；需启用 source map 和 async 栈追踪，善用 Watch 和 Overrides 提升效率。

直接在浏览器里调试 Jav

aScript，核心就靠 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 保存，刷新页面就能运行修改后的代码。

• 首次启用需允许 DevTools 写入本地文件（系统弹窗点允许）
• 覆盖只对当前域名生效，且不会影响原始服务器资源（只是浏览器拦截并替换响应）
• 改完记得把关键修复同步到项目源码，Overrides 里的改动关掉 DevTools 就丢了

真正卡住的往往不是“怎么设断点”，而是没意识到 source map 没生效、异步栈被折叠、或者 Watch 表达式里用了未声明的变量却没报错——这些细节不排查，断点停住了也看不出问题在哪。