WebStorm断点打不上（红点空心/灰色）主因是未用JavaScript Debug配置或source map未生成/加载；需确保配置指向正确URL、启用JetBrains插件、配准Remote URL mapping，并确认右下角显示“Debugger connected”。
WebStorm 断点调试不是“点一下就停”，而是依赖 Chrome DevTools 协议 + source map 映射 + 正确运行配置三者协同；断点灰掉、不暂停、变量显示 undefined，90% 是这三环中某处断了。
为什么断点打不上（红点是空心/灰色）
空心断点 = WebStorm 没法把你的源码行和浏览器实际执行的代码关联上。核心原因只有两个：
- 没走
JavaScript Debug配置，而是误用了Node.js或npm配置——后者调试的是构建工具（如 Vite）本身，不是你的前端代码 -
source map没生成或没加载：Vite 默认开启，但如果你在vite.config.ts里写了build.sourcemap: false，或者 Vue CLI 项目没在vue.config.js中显式设devtool: 'source-map'，断点就永远“未绑定” - 浏览器 Network 面板搜
.js.map，返回不是200，或响应体不是合法 JSON，说明 map 文件根本没发出来
怎么配 JavaScript Debug 配置才有效
这个配置必须指向一个真实可访问的 URL，不能是本地文件路径（file://），也不能是 IDE 内置服务地址（http://localhost:63342/）——Chrome 安全策略会直接拒绝调试。
- 先手动启动开发服务器：
npm run dev或yarn dev，确认能正常访问http://localhost:5173/（Vite）或http://localhost:8080/（Vue CLI） - Run → Edit Configurations → + →
JavaScript Debug -
URL栏填你刚才访问的那个完整地址，协议、端口、路径一个字符都不能错，比如http://localhost:5173/login - 确保
Browser选的是 Chrome，且已安装并启用JetBrains IDE Support插件（ID:hmhgeddbohgjknpmjagkdomcpobmllji） - 首次运行会自动弹窗装插件；若没弹，手动去 Chrome 商店搜索安装，并检查右上角 JB 图标是否亮起
Remote URL mapping 不配等于白配
WebStorm 不靠猜路径，它靠你手动告诉它：“浏览器里看到的 webpack:///src/composables/useAuth.ts，对应我电脑上哪个文件夹”。配错，断点就找不到人。
- Settings → Tools → Debugger → JavaScript →
Remote URL mapping - 加一条映射：
Local path填你项目里src文件夹的**绝对路径**（macOS/Linux 用/Users/you/project/src，Windows 用/C:/project/src，注意正斜杠） -
Remote URL填webpack:///src（开头三个斜杠，不是http://，也不是/src） - 如果用了别名（如
@/utils），再加一条：Local path填/C:/project/src/utils，Remote URL填webpack:///@/utils - 配完别忘了点
Apply，否则不生效
调试时变量看不准？不是 bug，是作用域限制
悬停看变量显示 undefined 或旧值，大概率不是 WebStorm 问题，而是 V8 调试器的行为边界：
- 异步回调（
Promise.then、setTimeout、事件处理器）里，闭包变量可能还没赋值，或已超出当前执行帧作用域 - 别依赖悬停，改用
console.log打点，或在回调第一行设断点再查 - 构建开了
mangle（如 Terser 把userId压成a），WebStorm 就还原不了原始名——开发阶段关掉minify和mangle - 想查 Promise 中间值？暂停时右键变量 →
Evaluate Expression，输入await someAsyncFn()强制求值（仅限当前暂停位置）
最易被忽略的细节：右下角状态栏没出现 Debugger connected，一切断点操作都无效；它不是装饰，是调试通道真正打通的唯一信号。
