断点能停住的前提是WebStorm成功将浏览器运行的JS与编辑器中的src/App.tsx源码映射对齐。核心在于sourcemap必须生成且被识别，Remote URL需填webpack:///src而非http://localhost:3000/src，JetBrains IDE Support插件必须启用并手动先启动服务再调试，同时注意TypeScript需开启"sourceMap": true，避免热更新后断点挂载旧模块。
断点能停住，前提是 WebStorm 能把浏览器里跑的 JS 和你编辑器里打开的 src/App.tsx 对上号——绝大多数“点了没反应”问题，都卡在这一步。
确认 sourcemap 已生成且可被识别
Create React App 默认开启 devtool: 'source-map'，但一旦你在 package.json 里加了 "GENERATE_SOURCEMAP=false"，或用了 Vite、自定义 webpack 配置，这个开关就可能被关掉。不生成 sourcemap，WebStorm 就找不到源码位置。
- 打开 Chrome DevTools → Sources → 左侧文件树，找有没有
webpack:///src/开头的路径；没有？说明 sourcemap 没加载成功 - 用 Vite 的项目要检查
vite.config.ts是否设置了build.sourcemap: true - CRA 项目可运行
npx react-scripts build --info看构建日志里是否输出了Generating sourcemaps...
配置 JavaScript Debug 时 URL 映射必须写对
WebStorm 不认 http://localhost:3000/src/，它只认 webpack:///src 这类协议路径。映射错一个字符，断点就永远进不来。
- 在 Run → Edit Configurations → 新建 JavaScript Debug → Remote URL 填
webpack:///src（不是http://localhost:3000/src） - Working directory 必须设为项目根目录，否则 WebStorm 找不到
src/下的文件 - 如果项目用了 TypeScript，确保
tsconfig.json中"sourceMap": true已启用
Chrome 插件和调试流程不能跳步
JetBrains IDE Support 插件不是“可选”，是硬依赖；而且必须手动先起服务，再点虫子图标——顺序反了，断点一定不触发。
- 去 Chrome Web Store 安装
JetBrains IDE Support，右上角图标必须是蓝色亮起（灰色=未启用） - 不要勾选调试配置里的
Before launch: npm start；必须先手动运行npm start，等页面在http://localhost:3000正常渲染后再点 Debug - 如果用了
React.memo或React.lazy，断点可能被跳过；此时可在对应组件顶部加debugger;强制唤起调试器验证链路是否通
容易被忽略的缓存与状态同步问题
React Fast Refresh 会热更新 JS 模块，但 WebStorm 的断点绑定是静态的——代码变了，旧断点还挂在老模块上，自然不命中。
- 每次改完 JSX 或 hooks 逻辑后，务必在 Chrome 里手动刷新页面，让新模块重新加载
- 遇到断点突然失效，先清 Chrome 缓存（或开隐身窗口），再删掉
.idea/workspace.xml里残留的旧 URL 映射段 - 避免在
node_modules或构建产物（如build/）里设断点；WebStorm 可能读到的是压缩后代码，无法映射回源文件
真正卡住人的往往不是配置多复杂，而是 sourcemap 链路中某一处断了——比如你以为 CRA 没动过配置，结果同事在 craco.config.js 里悄悄改了 devtool；或者你换了 Chrome 版本，插件权限重置了但没注意图标变灰。调试环境不是一劳永逸的，它需要和构建输出保持实时同步。
