善用条件断点和日志断点可提升JavaScript调试效率：条件断点在表达式为true时暂停，仅限当前作用域变量；日志断点静默输出信息，支持模板字符串和快捷变量；二者组合使用并配合断点管理面板能精准定位问题。
在 JavaScript 调试中，盲目打断点不仅低效，还容易错过关键执行路径。善用条件断点和日志断点，能精准定位问题，减少手动单步和重复刷新的次数。
条件断点：只在满足逻辑时暂停
条件断点让你指定一个表达式，仅当该表达式为 true 时，代码才会暂停执行。适合用于排查特定输入、异常状态或偶发 bug。
- 在 Chrome DevTools 的源码面板中，点击行号左侧空白处设置断点，再右键该断点 → 选择 “编辑断点”
- 输入条件表达式，例如：
userId === 1002、items.length > 5或error && error.message.includes("timeout") - 注意：条件表达式中只能访问当前作用域可读的变量；若变量未定义或作用域已退出，条件会视为 false，断点不会触发
- 可配合调试器中的 Scope 面板实时查看变量值，辅助编写准确条件
日志断点：不中断执行，只输出信息
日志断点本质是“静默打印”，它不会暂停脚本，但会在控制台输出自定义内容，适合监控高频调用函数或追踪状态变化而不打断流程。
- 同样在行号旁右键 → 选择 “添加日志点”（不是“编辑断点”）
- 输入要打印的内容，支持模板字符串语法，例如：
Log: userId=${userId}, status=${status} - 也可直接写表达式，如：
items.filter(i => i.active).length，结果会自动输出到 Console - 比
console.log()更干净：无需修改源码、不污染提交记录、可随时启停
组合使用提升效率
真实场景中，两者常搭配使用。比如调试一个循环中的异步回调，可以先用日志断点观察每次调用参数，再对可疑数据加条件断点深入分析。
立即学习“Java免费学习笔记（深入）”；
- 先在循环内设日志点，快速确认哪次迭代出问题：
Iteration ${i}: data = ${JSON.stringify(data)} - 发现第 7 次
data.status === "error"后，在回调内部设条件断点：data?.status === "error" - 利用 DevTools 的 断点列表面板（右侧边栏 → “断点” → “XHR 断点”/“DOM 断点”旁）统一管理、启用/禁用、重命名，避免混乱
小技巧与注意事项
一些容易忽略但很实用的细节：
- 条件断点里的表达式不支持
await或函数调用（如validate(data)），会报错或失效；尽量用同步判断 - 日志点支持
$0（当前选中 DOM 元素）、$n（最近 n 个 console 输出）等控制台快捷变量 - 刷新页面后断点默认保留，但若源码被热更新（如 React Fast Refresh、Vite HMR）可能导致断点偏移，留意行号是否变灰
- 在 minified 代码中设断点效果有限，确保开启 Source Map 并优先在原始源码（如 .ts/.jsx 文件）中操作
