断点打不中首要确认Debugger是否连上：右下角必须显示“Debugger connected”或“Connected to Chrome”；运行配置须为JavaScript Debug类型；HTML文件需通过WebStorm内置服务（如http://localhost:63342/）访问。
断点打不中？先看Debugger有没有连上
WebStorm 调试失败，八成不是代码问题，而是 Debugger 根本没连上。右下角状态栏必须出现 Debugger connected 或 Connected to Chrome——没这个提示，所有断点都形同虚设。
常见卡点：
- 运行配置类型选错：必须是
JavaScript Debug，不是Node.js或npm；中文界面里这两个选项挨得很近，容易手滑选错 - HTML 文件路径不对：得通过 WebStorm 内置服务访问，地址类似
http://localhost:63342/your-project/index.html；用双击打开或拖进浏览器的file://路径，断点一律不生效 - Chrome 启动参数缺失：新版 Chrome（119+）默认禁用远程调试，需在 WebStorm 的 Chrome 配置里加命令行选项
--remote-allow-origins=*
F7/F8 按错了？别让调试器带你乱跳
F7（Step Into）和 F8（Step Over）看着像，行为差很多：F7 会钻进函数内部，F8 只执行当前行、不进函数。但真正容易误操作的是——你按着 F8 却停在了 ArrayList.add() 或 React.createElement() 这类框架/库代码里。
解决办法很简单：
- 提前在
Settings → Tools → JavaScript → Debugger → Stepping勾上Ignore libraries，跳过所有 node_modules 和内置 API - 想临时跳到某一行？把光标移到目标行，按
Alt+F9，调试器直接运行到那里，比连按十次 F8 快得多 - 调试中途想查某个表达式值？选中它（比如
items.filter(x => x.active)），按Alt+F8立即求值，不用打断点再悬停
变量值看不准？不是汉化 bug，是作用域限制
中文界面下悬停显示 undefined 或旧值，不是翻译问题，而是 V8 调试器对异步上下文的天然限制。比如 setTimeout 回调、Promise.then 里，闭包变量无法实时读取。
实用对策：
- 别依赖悬停：把光标停在变量名上，按
Alt+Enter → Quick Evaluate Expression，强制刷新当前帧的值 - 查 Promise 中间态？暂停后右键变量 →
Evaluate Expression，输await api.fetchData()（仅限当前暂停帧） - 变量名变成
a、t？构建工具开了mangle（如 Terser），开发阶段务必关掉，否则 WebStorm 无法还原原始命名
source-map 链不上？断点失效的真凶
“断点红点打了，代码跑过去了”——90% 是 source-map 没链上。Chrome DevTools 的 Sources 面板里看不到 webpack:///src/ 或对应源码路径，就说明映射失败。
关键检查项：
- 确认构建配置开了
sourceMap: true；CRA 默认开，但 Vite/Rspack 需手动配build.sourcemap: 'inline'或'true' - WebStorm 的
Remote URL必须和 source-map 里的sources字段完全一致：CRA 填webpack:///src，Vite 项目可能是file:///或http://localhost:5173/，得看实际路径前缀 - 删掉
.idea/workspace.xml里残留的旧映射规则，有时比手动修 XML 更可靠
source-map 不是开关一开就完事，它是一条从浏览器 → 构建产物 → 源码的完整链路，中间任何一环断开，断点就只是个红点而已。
