条件断点表达式必须返回布尔值，如userId === 123；不可含副作用操作或跨作用域变量，且依赖source map与Remote URL映射正确才能生效。
条件断点表达式必须返回布尔值
条件断点不是“加个 if”，而是整个表达式必须求值为 true 或 false。写成 console.log(userId) 或 data = { id: 1 } 都无效——它们返回 undefined 或赋值结果，调试器直接忽略条件，退化为普通断点。
常见有效写法：
-
userId === 123（严格相等，避免用=） -
items?.length > 0（可选链安全） typeof response === 'object' && response?.code === 200!loading && data != null
别在表达式里调用函数修改状态，比如 updateCache() && id > 100——V8 可能在单步跳过时多次求值，导致缓存被意外更新。
变量必须在当前作用域内可见
你在 function handleUser(user) { ... } 里打的断点，条件里写 user.id === 5 没问题；但写 tempId === 5 就会报 ReferenceError，因为 tempId 是上层作用域或异步回调里声明的，此时还没声明或已销毁。
特别注意 Vue/React 组件中：
- 模板中
v-if="show"对应的 JS 逻辑里，show是响应式变量，但条件断点里不能直接写show === true——它可能只是 ref 或 reactive 包裹的对象属性，得写show.value === true或show.show === true - 箭头函数参数、
let/const声明的块级变量，在外层作用域不可见 - Webpack/Vite HMR 热更新后，旧闭包变量可能已失效，刷新页面再设断点
source map 失效会导致条件断点完全不触发
断点红点亮着，但代码跑过去从不停——大概率是 source map 没映射成功。WebStorm 不靠文件名匹配，它依赖构建产物里的 .map 文件把压缩后的变量名（如 e、t）还原回原始源码中的 userId、response。
检查三件事：
- 启动服务后，打开 Chrome DevTools → Sources → 展开
webpack://，必须能看到真实的.vue或.ts文件路径；如果只看到app.js或乱码变量名，说明 source map 没生成 - Vue CLI 项目确认
vue.config.js没覆盖devtool：必须是'source-map'，不是'eval'或false - Vite 项目检查
vite.config.ts中build.sourcemap是否为true（开发模式默认开启，但自定义 build 配置可能关掉）
顺手查看浏览器 Network 面板，确认 app.js.map 被正常加载且状态码是 200。
Remote URL Mapping 配错，断点永远“Unbound”
WebStorm 不猜路径。你本地文件是 /Users/you/project/src/api/user.ts，浏览器运行的是 webpack:///src/api/user.ts，这两者必须通过 Remote URL Mapping 一对一绑定。配错一个字符，断点就失效。
正确配置方式（Preferences → Debugger → JavaScript → Remote URLs）：
-
Local path：填绝对路径，统一用正斜杠，例如
/Users/you/project/src -
Remote URL：填
webpack:///src（不是http://localhost:3000/src，也不是/src） - 如果用了
@/utils别名，额外加一条：Local path填/Users/you/project/src/utils，Remote URL填webpack:///@/utils
大小写、多一个 /、Windows 下误用反斜杠 \，都会导致映射失败——这时断点显示灰色，鼠标悬停提示 “Unbound breakpoint”。
