Question

如何在开发过程中完全禁用或隐藏“持久性”控制台消息：Download the React DevTools for a better development experience？

Answer 1

从React 16.2.0开始，您可以在Webpack配置中添加这样的行：

  new webpack.DefinePlugin({
    '__REACT_DEVTOOLS_GLOBAL_HOOK__': '({ isDisabled: true })'
  }),

这将禁用有关React DevTools的所有日志。

Answer 2

将此行放在全局范围内的某个位置（如果将其放在捆绑模块中，则无效）：

__REACT_DEVTOOLS_GLOBAL_HOOK__ = true;

以下是来自gist的相关Ryan Florence，这是上述黑客行为的基础：

if (
  process.env.NODE_ENV === 'production' &&
  window.__REACT_DEVTOOLS_GLOBAL_HOOK__ &&
  Object.keys(window.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers).length
) {
  window.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers = {}
}

更新： React 16有一个新的控制台警告，显示为Warning: The installed version of React DevTools is too old and will not work with the current version of React. Please update React DevTools。要禁用它，请将此代码放在全局范围内：

__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
  supportsFiber: true,
  inject: function() {},
  onCommitFiberRoot: function() {},
  onCommitFiberUnmount: function() {},
};

Answer 3

在您的html中放入类似的内容

<script>{`
  (function() {
    var info = console.info
    console.info = function (message) {
      if (!/Download the React DevTools/.test(message)) info.apply(console, arguments) 
    }
  })()
`}</script>

Answer 4

此外，您可以在本地评论该部分代码。

搜索＆＃34; node_modules＆＃34;中的所有文件对于＆＃34; React DevTools＆＃34;，您将获得2个结果，react-dom.js和ReactDOM.js：

react-dom.js，导航到第5430行，将第5430 - 5437行发表评论，保存。
ReactDOM.js，导航到第68行，将第68 - 75行写成评论，保存。

重新启动您的应用服务器。

我希望这种方法不违反React许可证。

禁用/隐藏“下载React DevTools ......”

4 个答案: