调试React JS时JavaScript变量被优化消失？如何禁用优化或解决

一、核心原因：开发环境仍存在代码优化/压缩 #

别以为npm run dev就是纯无优化的开发模式——不同React框架（Vite、CRA）的默认配置可能悄悄开启了部分优化：比如变量名混淆、死代码消除、作用域合并，导致调试器无法正确对应源码和运行时的变量，出现明明代码正常运行，但调试窗口显示undefined或空值的情况。

二、彻底关闭代码优化的操作 #

1. Vite项目（React + Vite） #

修改vite.config.js，把所有优化项拉满禁用：

export default defineConfig({
  plugins: [react()],
  build: {
    minify: false, // 关闭代码压缩
  },
  optimizeDeps: {
    disabled: true, // 禁用依赖预构建优化
  },
  server: {
    sourcemap: 'inline' // 强制生成完整内联SourceMap
  }
})

改完重启npm run dev再调试。

2. Create React App（CRA）项目 #

直接在package.json的启动脚本里加环境变量，强制生成完整SourceMap并禁用默认优化：

"scripts": {
  "dev": "GENERATE_SOURCEMAP=true react-scripts start"
}

如果已经eject过项目，打开config/webpack.config.js，找到development模式对应的配置块：

• 设置optimization.minimize = false
• 确保devtool的值是inline-source-map

三、其他可能的问题排查 #

• SourceMap映射错误：打开浏览器调试工具的「Sources」面板，确认你断点的是src/目录下的原始源码，不是static/js里的打包后代码。如果映射错了，调试器自然读不对变量。
• TensorFlow.js的内部调度延迟：dataSync()是同步API，但TensorFlow内部操作可能存在延迟调度，导致调试器暂停时，pcdRef.current还没完成赋值。可以在第10行后面加个debugger;强制暂停，或者用console.log(pcdRef.current)查看实际值——如果控制台能输出正确值，那就是调试器的映射问题。
• 未使用变量被编译器消除：你插入的const val = pcdRef.current被调试器跳过，是因为编译器判定这个变量未被使用，直接在编译阶段删掉了。给临时变量加个无用操作，比如console.log(val)或者void val，让编译器保留它，就能在调试器里正常查看了。

四、临时调试小技巧 #

• 用console.log输出变量实际值，和调试器显示对比，快速判断是调试器的映射问题还是变量真的异常。
• 手动在关键代码行写入debugger;语句，强制触发断点，此时查看变量的准确性比手动点击断点更高。

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