条件断点是普通断点的JS表达式增强，需返回布尔值、变量在当前作用域可见、无副作用；常见失效原因包括条件为假、语法错误、source map失败、异步变量未就绪及HMR导致断点失效。
条件断点不是独立功能，而是普通断点的表达式增强——你已经在某行打了红点，右键选 Edit Breakpoint 填 JS 表达式即可生效。它只在表达式求值为 true 时暂停，但极易因作用域、时机或语法问题“静默失效”。
条件断点表达式怎么写才不报错
WebStorm 把条件断点当作一段运行时求值的 JavaScript 表达式，必须满足三个硬性要求：返回布尔值、变量在当前作用域可见、无副作用。
-
userId === 123、items?.length > 5、typeof data === 'object'都合法；console.log('hit')或data = null无效（不返回true/false） - 不能在函数外引用函数内声明的
let localVar，也不能在箭头函数体外访问其参数id - 避免副作用：比如
updateCache() && id > 100—— 表达式可能被多次求值（单步跳过时），导致状态错乱 - 变量名含特殊字符（如
data-user-id）必须用方括号：params["data-user-id"] === "abc"
循环里设条件断点为什么总不触发
循环变量作用域和执行时机是高频雷区。常见现象是写了 i == 5 却一直不停，其实 i 根本没定义，或者值还没就绪。
- 确认变量是否在断点所在行的作用域内：比如在
for (let i = 0; i 外层设断点，<code>i不可见；应设在循环体内部 - 异步循环中慎用未 resolve 的变量：比如
Promise.all(list.map(async item => { ... }))里设item.id === 123，但item是上层传入且尚未赋值，会直接抛ReferenceError并跳过断点 - 不要用
Math.random()或Date.now()这类非确定性表达式——每次单步都会重算，行为不可控 - 高频循环建议改用日志断点：
Log message to console+ 表达式，只输出不暂停，避免打断执行流
Vue/React 中条件断点设在哪才真正起效
框架的响应式代理、模板编译、生命周期钩子会让变量初始化时机变得模糊，断点容易“挂空挡”。
- 优先设在
setup()（Vue 3）、useEffect或useCallback内部，而非mounted()或模板渲染函数中——后者可能在响应式属性尚未代理完成时就执行了 - 检查变量是否已初始化：比如设
loading === false，但该行执行时loading还是undefined，条件恒为false；先用console.log(loading)确认值再设断点 - Webpack/Vite 热更新后，旧模块仍驻留内存，新断点实际挂在未激活的副本上——此时刷新页面或重启 dev server 才能同步上下文
- TS 项目必须确保
tsconfig.json中"sourceMap": true，且 WebStorm Run Configuration 里勾选Enable source maps，否则变量名映射失败
真正容易被忽略的是：条件断点的表达式会在每次执行到该行时重新求值，包括单步（Step Over/Into）过程中。调试前务必确认它是纯函数式的、无副作用、作用域明确——否则你看到的“不触发”，大概率不是逻辑问题，而是表达式本身就没通过运行时校验。
