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

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

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

二、 禁止React Developer Tools

以下是实现的代码

1
2
3
4
5
6
7
// 项目入口文件index.tsx
import {
  disableReactDevTools
} from '@utils/js/other';
if(process.env.NODE_ENV == 'production'){
  disableReactDevTools();
}
1
2
3
4
5
6
7
8
9
10
11
// @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加载完成之前（所以要在入口文件提前执行），执行以下代码
    1
    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方法。

三、禁止Redux DevTools

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

具体实现步骤如下：

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

以下是我的项目代码片断：

1
2
3
4
5
6
7
8
9
10
import {
    composeWithDevTools
} from 'redux-devtools-extension/developmentOnly';

// other code...
const store = createStore(
    rootReducer,
    composeWithDevTools(middlewareEnhancer)
);
// other code...

四、不好的真实项目例子

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

五、参考

[1] Flag to disable devtools
[2] Redux DevTools的README.md