行断点是chrome devtools中最直接的调试方式，通过在sources面板代码行号左侧点击添加蓝色圆点实现；支持禁用、删除、批量操作及条件触发（橙色图标），需启用source maps以准确定位源码。
在 Chrome DevTools 的 Sources 面板中，行断点是最直接、最常用的调试手段。它不修改代码，不依赖环境配置，只要页面加载了对应源码（建议开启 Source Maps 支持），就能精准控制执行流暂停位置。
添加行断点
打开 DevTools（F12 或右键 → 检查），切换到 Sources 标签页；在左侧文件树或 Page 选项卡中找到目标 JS 文件并打开；将鼠标悬停在目标行号左侧的空白区域（不是行号本身，也不是代码区），单击出现深蓝色实心圆点，即表示断点已设好。
- 断点生效时机：代码执行到该行之前暂停，该行尚未运行
- 若文件是压缩后通过 eval 动态加载（如 Webpack dev server 默认模式），需确保右上角齿轮图标 → Settings → ✅ Enable JavaScript source maps 已开启，否则可能无法准确定位原始行
- 支持批量添加：按住 Ctrl（Windows/Linux）或 Cmd（macOS），再依次点击多行空白处
禁用与删除行断点
已设断点可随时临时关闭或彻底移除，不影响代码逻辑。
- 禁用单个断点：在 Breakpoints 面板中，取消勾选对应条目前的复选框；或在代码行左侧再次单击断点圆点，它会变为空心灰色，此时仍保留位置但不触发
- 删除单个断点：直接点击已存在的蓝色圆点，即可清除
- 批量操作：在 Breakpoints 面板中右键任意断点 → 可选“Disable all breakpoints”或“Remove all breakpoints”
设置条件触发（Conditional Breakpoint）
当断点位于循环、高频调用函数或大量重复逻辑中时，无条件中断会严重干扰调试节奏。条件断点只在表达式返回 true 时才暂停。
- 方法一：右键已有断点 → 选择 “Edit breakpoint” → 输入合法 JS 表达式，例如 i === 50 或 user?.id && user.role === 'admin'
- 方法二：右键目标行号左侧空白处（尚未设断点）→ 选择 “Add conditional breakpoint” → 直接输入条件后回车
- 注意：条件内不能含副作用语句（如 console.log()、alert()、赋值操作等），Chrome 仅求值，不执行；写错语法（如漏括号、引用未定义变量）会导致断点静默失效，且无提示——建议先在 Console 中验证表达式是否能正常返回布尔值
- 条件生效后，断点图标变为橙色，旁边显示小标签标注条件内容
