如何在Production mode下用React DevTools查看React组件及状态？为何该模式仍可被检测？

我来帮你拆解这两个日常开发中很常见的React相关问题：

1. 如何在Production模式下通过React DevTools查看应用中的所有React组件及其状态？ #

默认情况下，React的生产构建会隐藏调试相关的标识，所以React DevTools一开始无法识别到生产环境的应用。不过我们可以通过两种方式开启检测：

• 临时手动开启（适合线上排查问题）
  打开浏览器的开发者工具（Console面板），执行以下代码：

  window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () {};
  

  执行完成后刷新页面，React DevTools就能识别到当前的生产环境应用了。不过要注意：生产环境的代码经过了压缩混淆，组件名称、状态变量名会变成a、b这类无意义的短字符，可读性会比开发环境差很多。

• 构建时配置保留DevTools支持（适合自己的项目）
  如果是你负责开发的项目，可以在构建阶段调整配置：

  • 对于Create React App项目，可以在.env.production文件中添加配置，确保React保留DevTools的钩子；或者在Webpack配置中，避免移除__REACT_DEVTOOLS_GLOBAL_HOOK__相关的代码片段。不过这种方式不建议用于正式上线的生产环境，会增加包体积且存在一定的调试信息泄露风险。

2. 为什么Production模式下仍能被React DevTools检测到？ #

首先要纠正一个常见误解：React的生产模式并不是完全移除了所有与React相关的标识，而是做了针对性的优化和隐藏，核心的DevTools检测钩子并没有被彻底删除，具体原因如下：

• 预留的调试钩子：React团队考虑到开发者可能需要在线上紧急排查问题，所以在生产构建中保留了全局的__REACT_DEVTOOLS_GLOBAL_HOOK__基础结构。当浏览器安装了React DevTools插件后，它会主动检测这个钩子是否存在，只要存在就能建立连接，从而识别出这是一个React应用。

• 构建配置的差异：有些项目的生产构建没有严格遵循React的最佳优化实践——比如没有启用完整的代码压缩、没有移除调试相关的代码片段，或者团队为了方便线上调试，刻意保留了DevTools的检测能力。这种情况下，DevTools能直接识别到应用。

• 版本特性差异：不同版本的React对生产环境的调试限制有所不同。较新的版本会对DevTools的检测做更严格的限制，但依然没有完全阻断检测通道，而是通过手动开启的方式给开发者留了排查问题的入口。

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