React生产环境下开放Dev Tools但禁止修改State和Props的方法

1. 先确认生产构建环境是否正确配置 #

React在生产模式下默认会禁用Dev Tools的编辑功能，如果你当前还能编辑，首先检查你的构建配置是否正确设置了生产环境：

• 使用Create React App：确保执行的是npm run build，该命令会自动将process.env.NODE_ENV设为production。
• 使用Vite/Webpack：检查构建配置文件，确保mode设置为production，且没有手动将process.env.NODE_ENV硬编码为development。

如果环境变量正确，但仍能编辑，再尝试下面的手动禁用方案。

2. 手动禁用Dev Tools的编辑功能 #

在项目入口文件（如index.js/main.jsx）中添加以下代码，直接拦截Dev Tools的修改操作：

if (process.env.NODE_ENV === 'production') {
  // 阻止修改组件Props
  if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
    const originalSetProps = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.setProps;
    window.__REACT_DEVTOOLS_GLOBAL_HOOK__.setProps = () => {};
  }

  // 阻止修改组件State
  const ReactDOM = require('react-dom/client');
  if (ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) {
    const { overrideHook } = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
    overrideHook('scheduleUpdate', () => {});
  }
}

这段代码的作用：

• 覆盖Dev Tools的setProps方法，使其无法修改组件属性
• 拦截React的更新调度钩子，阻止State修改后的页面更新

3. 验证效果 #

添加代码后重新构建生产版本并部署，打开React Dev Tools查看：

• Props/State区域会变为置灰的只读状态，无法点击编辑

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