断点不生效主因是sourcemap未链上、Chrome插件未启用或启动顺序错误；需确认Sources中存在webpack:///src路径、Remote URL设为webpack:///src、安装启用JetBrains IDE Support插件，并手动先运行npm start再调试。
断点不生效？先确认 sourcemap 和 URL 映射是否对得上
WebStorm 调试 React 时断点“点了没反应”，90% 是 sourcemap 没链上，或者 IDE 找不到你写的源码位置。Create React App 默认启用了 devtool: 'source-map'，但如果你改过 webpack.config.js、用了自定义构建（比如 Vite）、或在 package.json 里加了覆盖配置（如 "GENERATE_SOURCEMAP=false"），就可能悄无声息地关掉了它。
实操建议：
- 打开浏览器开发者工具 → Sources 标签页 → 左侧文件树里找有没有
webpack:///src/开头的路径；没有？说明 sourcemap 没加载成功 - 在 WebStorm 的调试配置中，
Remote URL必须填成webpack:///src（不是http://localhost:3000/src）；路径映射错一格，断点就永远进不来 - 检查项目根目录下是否有
.idea/workspace.xml里残留旧的映射配置，可临时删掉.idea重开项目
Chrome 插件和启动顺序是硬门槛，不能跳过
WebStorm 不是靠“连端口”调试前端，而是靠 Chrome 的 JetBrains IDE Support 插件把浏览器行为转发给 IDE。这个插件必须装，而且必须启用——哪怕你用的是 Edge 或 Firefox，也得用 Chrome 配合调试（其他浏览器支持弱或不稳定）。
常见错误现象：点 Debug 按钮后浏览器一闪而过，断点完全不触发，控制台也没报错。
实操建议：
- 去 Chrome 网上应用店搜
JetBrains IDE Support，安装并确保右上角图标亮起（灰色=未启用） -
不要在 WebStorm 的调试配置里勾选
Before launch: npm start—— 必须手动先运行npm start或点package.json里的start三角按钮，等页面真正跑起来（能看到http://localhost:3000正常渲染），再点虫子图标启动调试 - 如果提示 “Cannot connect to Chrome”，Linux/macOS 用户要进
Edit Configurations → JavaScript Debug → Browser → Configure，手动指定 Chrome 可执行文件路径（比如/usr/bin/google-chrome-stable）
React 函数组件里打不了断点？试试 debugger 语句兜底
某些场景下，比如组件被 React.memo 包裹、或用了动态导入（React.lazy）、甚至只是 WebStorm 暂时没识别出 JSX 文件类型，断点会“看起来存在但不命中”。这时 debugger 就是最简单可靠的验证手段。
使用场景：你想确认某段逻辑是否执行，又不确定断点能不能停住。
实操建议：
- 在函数组件内部任意位置插入一行：
debugger; - 刷新页面，如果 Chrome 暂停在这一行，且 WebStorm 自动跳转到对应源码 —— 说明环境通了，问题出在断点位置本身（比如写在了 JSX 表达式里，或被编译优化掉了）
- 注意：
debugger在生产环境会被移除，仅限开发阶段用；别提交到 git
Vite 创建的 React 项目配置略有不同
现在新项目多用 Vite，它的默认 sourcemap 输出路径是 webpack:///src 还是 app:///src，取决于你是否启用了 build.sourcemap 和 resolve.alias。Vite 官方模板生成的项目，WebStorm 通常能自动识别，但如果你手动改过 vite.config.ts，就得手动对齐。
参数差异：
- Vite 默认 devtool 是
'eval'，不生成外部 .map 文件，WebStorm 可能无法映射；建议改成'source-map'（在vite.config.ts中加build: { sourcemap: true }） - 调试配置中的
Remote URL若填webpack:///src失效，试试app:///src或file:///path/to/your/project/src（需绝对路径） - 确保 WebStorm 插件里启用了
Vite和React支持（Settings → Plugins）
