Sources 面板是调试 JavaScript 代码的主战场。它远不止"在行号上点一下设置断点"——它是一套完整的代码调试系统，支持条件断点、多类型事件断点、Source Map 映射、Blackboxing 过滤和本地文件持久化。
右键行号 → Add conditional breakpoint... → 输入 JavaScript 表达式。当表达式返回 truthy 值时，断点暂停执行。
// 示例：只在特定用户数据时暂停
user.id === 'abc-123'
// 示例：循环中只在接近目标时暂停
i > 100 && data[i].status === 'error'右键行号 → Add logpoint... → 输入要记录的内容。代码执行到该行时，内容输出到 Console，但不暂停执行。
// Logpoint 表达式
'当前用户:', user.name, '角色:', user.role
// Console 输出：
// [Logpoint] 当前用户: Alice 角色: admin (来源: user-service.js:42)💡 为什么用 Logpoint 而非 console.log？
- 不需要修改源码
- 在 Breakpoints 面板可以一键禁用/启用
- 不会因
console.log意外进入 Git 提交- 支持在所有打开的 DevTools 中可见
// 在条件断点中输入此表达式
// 它利用 && 短路特性：当条件满足时执行 console.log，但 console.log 返回 undefined (falsy)，所以断点不暂停
i > 90 && console.log('Index:', i, 'Value:', data[i])这结合了条件断点（只在条件满足时执行）和 Logpoint（不暂停执行）的优点。
Sources 面板右上方的暂停按钮 ⏸ 勾选：
try-catch 捕获的异常处暂停对于分析 try-catch 中被吞掉的异常，勾选 caught exceptions 是唯一能捕获它们的方法。
在 Elements 面板中右键某个 DOM 元素 → "Break on"，可以监听该元素的变更：
| 类型 | 含义 |
|---|---|
| Subtree modifications | 子树修改时断住（子节点增删改） |
| Attribute modifications | 属性修改时断住（如 class、style 变化） |
| Node removal | 节点删除时断住 |
使用场景：
Sources 面板右侧的 Event Listener Breakpoints 提供了对浏览器事件系统的全面控制。
| 分类 | 包含的事件 | 实战场景 |
|---|---|---|
| Mouse | click, dblclick, mousedown, mouseup, mouseover, mouseout 等 | 追踪点击事件冒泡路径 |
| Keyboard | keydown, keyup, keypress, input | 调试表单输入处理 |
| Touch | touchstart, touchend, touchmove 等 | 移动端触摸调试 |
| Timer | setTimeout, setInterval, requestAnimationFrame | 找不到定时器的来源代码 |
| Animation | requestAnimationFrame | 动画帧回调调试 |
| Clipboard | copy, cut, paste | 粘贴处理调试 |
场景：你发现页面每 3 秒发起一次不必要的 API 请求，但找不到是哪个组件设置的。
步骤：
Event Listener Breakpoints → Timer → 勾选 setTimeout 和 setIntervalF8 继续到下一个定时器在 Sources 面板右侧的 XHR/fetch Breakpoints 区域：
+ 添加 URL 匹配模式fetch() 或 xhr.send() 处/api/users 将匹配所有包含 /api/users 的请求实战场景：
| 按钮 | 快捷键 | 操作 | 说明 |
|---|---|---|---|
| ⏯ Resume | F8 | 继续执行 | 直到下一个断点 |
| ⤵ Step over | F10 | 单步跳过 | 当前行函数不进入 |
| ⬇ Step into | F11 | 单步进入 | 进入当前行函数内部 |
| ⬆ Step out | Shift + F11 | 单步跳出 | 跳出当前函数 |
| ▶ Step | F9 | 单步运行 | 🆕 类似 Step over 但逐表达式执行 |
当代码在断点处暂停时，Scope 面板展示了当前的变量环境：
let/const 在顶层）var 声明的全局变量）if/for 块中的 let/const）💡 双击 Scope 中的任意值可以就地编辑——在不修改源码的情况下改变变量的值，用于测试不同的数据分支。
添加任意 JavaScript 表达式到 Watch 面板，实时查看其值：
// 监测数组长度
users.length
// 监测条件是否成立
users.filter(u => u.age > 18).length === users.length
// 调用函数查看返回值
typeof user.name === 'string' && user.name.length > 0当表达式无法求值时（例如变量不在当前作用域），Watch 面板会显示 ‹not available›。
显示从当前断点位置向上追溯到顶层调用的完整堆栈：
当调试过程中经常进入三方库的代码（node_modules、webpack 运行时等），Blackboxing 是解决之道。
Never pause here → 将该脚本加入 Ignore ListAdd script to ignore list# Settings → Ignore List
node_modules
__puppeteer_evaluation_script__
\.min\.js$
webpack-internal
\.next/Blackbox 的脚本在调试时会：
在 Sources 面板的文件树中，Page 标签页显示的是实际加载的文件。如果 Source Map 生效，你会看到：
.ts、.tsx、.vue、.scss）出现在文件树中你也可以检查打包文件末尾是否包含 //# sourceMappingURL=app.js.map 注释。
Chrome 130+ 中，Sources 面板新增 Developer Resources 标签页，专门展示 Source Map 引用的原始源文件。这避免了文件树中 .ts 文件和 .js 文件混在一起的混乱。
详细内容见第 11 章，这里简述 Sources 面板中的入口：
Chrome 110+ 中，Sources 面板的代码编辑器支持代码折叠：点击行号旁的折叠箭头可以折叠函数体和代码块。
在断点暂停时，按 Option 键（Mac）或 Alt 键（Windows），会在代码行内显示变量的内联值。不需要在 Scope 面板中查找。