生产模式下禁止React Developer Tools、Redux DevTools的使用

1、React Developer Tools和Redux DevTools的使用思考

React Developer Tools、Redux DevTools 能够给开发人员在研发阶段调试程序带来极大的方便。 可是，不少人忽略了一点：上了生产环境后，把一些代码细节轻易让外部人员获取，并非好事。

解决方案就是：生产环境下，将DevTools禁止使用。

2、 禁止React Developer Tools

如下是实现的代码

// 项目入口文件index.tsx
import {
  disableReactDevTools
} from '@utils/js/other';
if(process.env.NODE_ENV == 'production'){
  disableReactDevTools();
}
复制代码

// @utils/js/other.ts
export const disableReactDevTools = (): void => {
    const noop = (): void => undefined;
    const DEV_TOOLS = (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__;

    if (typeof DEV_TOOLS === 'object') {
        for (const [key, value] of (<any>Object).entries(DEV_TOOLS)) { DEV_TOOLS[key] = typeof value === 'function' ? noop : null; } } }; 复制代码

禁止思路以下：

• 在页面的React加载完成以前（因此要在入口文件提早执行），执行如下代码

window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () {}
复制代码

这样能够阻止devtools访问React上下文

• 在此基础上，遍历全部window.__REACT_DEVTOOLS_GLOBAL_HOOK__下挂载的方法，将其重置为空函数。
• 有些浏览器是访问不到windwo.__REACT_DEVTOOLS_GLOBAL_HOOK__的，因此要进行安全防御。

综合以上3点，就能够得出disableReactDevTools方法。

另外，只在生产环境禁止,则须要读取process.env.NODE_ENV的值，进行判断。符合要求，则执行disableReactDevTools方法。

3、禁止Redux DevTools

Redux DevTools的做者作得比较全面，已经给出了标准的解决方案。

具体实现步骤以下：

• 设置'process.env.NODE_ENV': JSON.stringify('production')
• 使用redux-devtools-extension/developmentOnly引入方法

如下是个人项目代码片段：

import {
    composeWithDevTools
} from 'redux-devtools-extension/developmentOnly';

// other code...
const store = createStore(
    rootReducer,
    composeWithDevTools(middlewareEnhancer)
);
// other code...
复制代码

4、很差的真实项目例子

腾讯云－华佗诊断分析系统

5、参考

[1] Flag to disable devtools

[2] Redux DevTools的README.md

---

喜欢我文章的朋友，能够经过如下方式关注我：

• 「star」 或 「watch」 个人GitHub blog
• RSS订阅个人我的博客：王先生的基地