调试CRA应用时Source map无法解析变量问题求助

这不是浏览器或WebStorm的问题，核心原因是CRA的代码编译/压缩流程与Source Map生成配置不匹配，导致变量名映射错位。

问题本质 #

CRA（Create React App）在构建过程中会对代码做编译转换：

• 生产模式默认通过TerserPlugin进行代码混淆，会把有意义的变量名（比如time）重命名为d/a这类短变量名，以减小打包体积。
• 开发模式默认不开启混淆，但Babel等编译工具的转换也可能改变变量的内部表示。

Source Map的作用是将编译后的代码映射回原始源码，但如果Source Map生成时没有完整保留变量名的映射信息，或者代码压缩的配置破坏了映射关联，就会出现「代码能解析但变量名对应不上」的情况——调试工具里显示的是原始源码的变量名（time），但实际运行的是压缩后的变量名（d），自然会提示未定义。

解决方法 #

1. 开发模式下修复

• 检查是否通过react-app-rewired、craco等工具自定义了Webpack配置，不小心开启了代码压缩。如果有，恢复开发模式的默认配置（关闭Terser的变量混淆）。
• 确认Babel插件没有修改变量名的配置，比如某些按需加载插件是否意外开启了变量重命名。

2. 生产模式下调试（临时方案）

生产模式默认生成的Source Map是source-map类型，足够用于调试，但如果出现映射异常：

• 可以在构建命令中显式指定生成完整的Source Map：

  npm run build -- --source-map
  

• 若需要更精准的变量映射，可临时修改CRA的Webpack配置（需借助react-app-rewired），将Source Map类型改为inline-source-map（注意：该类型会将Source Map嵌入打包文件，生产环境部署时务必改回，避免暴露源码）。

3. WebStorm同步修复

WebStorm依赖Chrome的调试引擎，只要解决了Chrome中的Source Map配置问题，WebStorm的调试变量映射也会自动恢复正常。

内容的提问来源于stack exchange，提问作者bemol