FireFox中Vite搭建的React项目无法识别React Dev Tools的排查方案

• 确认项目处于开发模式：Vite生产环境会压缩React代码并移除调试标识，必须运行npm run dev启动项目，而非build后部署的静态文件。
• 检查React挂载状态：打开FireFox控制台，输入window.React或window.__REACT_DEVTOOLS_GLOBAL_HOOK__，如果返回undefined，说明React未全局暴露或未正确初始化。检查项目入口文件（如main.jsx），确认ReactDOM.createRoot或React.render是否正常执行。
• 排查Vite配置：查看vite.config.js/ts，确认没有手动设置process.env.NODE_ENV = 'production'，也没启用强制移除调试代码的压缩插件（如@rollup/plugin-terser）。同时确保@vitejs/plugin-react已正确安装并配置，该插件默认保留Dev Tools所需标识。
• 更新React Dev Tools扩展：在FireFox附加组件商店检查扩展版本，旧版本可能不兼容新版React或Vite打包逻辑，直接更新到最新版。
• 清除浏览器缓存：按Ctrl+Shift+Delete打开清除面板，勾选缓存和站点数据后清除，重启浏览器再加载项目，避免旧缓存干扰检测。
• 验证React版本：运行npm list react查看版本，若版本低于16.8，可能和新版Dev Tools不兼容，建议升级到稳定版。
• 禁用其他扩展：临时关闭广告拦截、脚本修改类的浏览器扩展，部分扩展会干扰Dev Tools的检测逻辑，排除后再测试。
• 检查页面环境：如果项目包含iframe，Dev Tools可能无法识别iframe内的React；另外查看控制台是否有CSP（内容安全策略）报错，严格的CSP会阻止Dev Tools注入脚本。

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