禁用 chrome react DevTools 进行生产

Posted 2023-02-22

【中文标题】禁用 chrome react DevTools 进行生产

【英文标题】：Disable chrome react DevTools for production

【发布时间】：2016-02-20 09:34:30

【问题描述】：

我正在尝试使用 gulp 浏览我的 react 应用程序以进行生产，并 envify 设置 NODE_ENV。所以我可以删除反应警告，控制台中的错误报告，甚至我的代码来禁用一些功能，比如 react-addons-perf 的要求。

而且效果很好。当我在我的 app.js 中搜索“生产”以查看是否存在这些典型条件时：

if("development" !== "production") 
    ...

什么都没有，所以，正如我所说，它似乎运作良好。

但是，我仍然可以看到带有所有 react 组件的 chrome 的 react DevTools 选项卡，就像我在开发网站上一样。 如何在 chrome 的开发工具中禁用此选项卡？

这是我的 gulp 任务：

var production  = process.env.NODE_ENV === 'production' ? true : false;
var environment = process.env.NODE_ENV ? process.env.NODE_ENV : 'dev';

...

var bundler = browserify(
    debug: !production,

    // These options are just for Watchify
    cache: , packageCache: , fullPaths: true
)
.require(require.resolve('./dev/client/main.js'),  entry: true )
.transform(envify(global: true, _: 'purge', NODE_ENV: environment), global: true)
.transform(babelify)
.transform(reactify);

var start = Date.now();
bundler.bundle()
    .on('error', function (err) 
        console.log(err.toString());
        this.emit("end");
    )
    .pipe(source('main.js'))
    .pipe(gulpif(options.uglify, streamify(uglify())))
    .pipe(gulpif(!options.debug, streamify(stripDebug())))
    .pipe(gulp.dest(options.dest))
    .pipe(notify(function () 
        console.log('Built in ' + (Date.now() - start) + 'ms');
    ));
;

【问题讨论】：

Chrome 中的实际插件？你为什么想这么做？您的 js 不应包含任何敏感内容。为什么 Chrome 会允许您从网站更改 Chrome 中的内容？想一想 - 这将是一个巨大的安全漏洞，能够使用 javascript 在用户浏览器中打开/关闭东西。

是的，chrome 插件。不用担心，如果用户未通过身份验证，他将无能为力：每个请求都使用服务器端的令牌和强密钥（1024 字符）进行检查。我的问题是，这是否可能以及如何？据我所知，有可能做到这一点，所以我在这里问它如何以及为什么它不适用于我的 gulp 任务。

啊，我明白了，如果没有全局React 或require，它将无法工作，但不确定具体设置

我最近发布了一个包来禁用 React 开发者工具插件：npmjs.com/package/@fvilers/disable-react-devtools

如果有人有兴趣通过此处的任何答案或 NPM 包绕过此“保护”，只需使用 Chrome 中的本地覆盖功能并在美化后删除有问题的行。例如trysmudford.com/blog/chrome-local-overrides

【参考方案1】：

根据 Github 上的一个问题，您可以在加载 react 之前添加 run 单个 javascript 行以防止它。

来自#191 of react-devtools

<script>
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () 
</script>

然后，您可以考虑将其与您的环境条件一起包装，就像您可以在服务器端渲染中执行以下操作一样。比方说哈巴狗（以前称为 Jade）：

#process.env.NODE_ENV == 'production' ? "window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function()" : ""

但是，将业务逻辑和敏感数据放回您的服务器仍然是一个好习惯。

【讨论】：

我收到以下错误：无法设置未定义的属性“注入”

去chrome://extensions/查看“React Developer Tools”是否被激活

@LoveTrivedi 你是通过服务器渲染这个吗？记住 Node 没有窗口对象。将 sn-p 包裹在 if (window) ...

@LoveTrivedi 如果您没有安装 react devtools，这可能会发生。因此，您的代码可能应该检查是否首先定义了 __REACT_DEVTOOLS_GLOBAL_HOOK__。

【参考方案2】：

如果您使用的是redux-devtools-extension，您可以这样做。

const devTools =
  process.env.NODE_ENV === "production"
    ? applyMiddleware(...middlewares)
    : composeWithDevTools(applyMiddleware(...middlewares));

const store = createStore(rootReducer, initialState, devTools);

这将确保您的 devtools 扩展仅适用于开发环境，而不适用于生产环境

【讨论】：

这个答案是引用 redux 开发工具而不是 react-devtools。

【参考方案3】：

只需改进@peteriod 的答案，以确保开发工具已安装或未安装

if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') 
   __REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function() ;

【讨论】：

您可以将其添加到公共文件夹中的 index.html 文件中。

我们如何分配/访问脚本标签内的环境变量？以便仅在生产模式下启用。

@siluverukirankumar 添加此条件"%NODE_ENV%" !== "development"

【参考方案4】：

尝试在你的 store.js 中添加这个

const initialState = ;
const middleware = [thunk];

const devTools =
  process.env.NODE_ENV === "production"
    ? applyMiddleware(...middleware)
    : composeWithDevTools(applyMiddleware(...middleware));

const store = createStore(rootReducer, initialState, devTools);

export default store;

【参考方案5】：

您还可以在构建后通过在 package.json 文件中添加以下命令来删除所有源映射。

"scripts":
     ...,
    "build": "react-scripts build",
    "postbuild": "rimraf build/**/*.map"

导航组件和将它们隐藏在 devtools 上有点困难 - 源代码

【参考方案6】：

你可以检查模式：

---

在 public 文件夹中的 index.html 中为 </body> 添加以下代码

  <input type="hidden" value="%NODE_ENV%" id="node_env_mode" />
<script>
  var mode = document.querySelector("#node_env_mode").value;
  if (
    mode === "production" &&
    typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === "object"
  ) 
    window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () ;
  
</script>

【讨论】：

这不是一个防弹的想法 - 可以创建一个本地代理服务器，从 localhost 为您的网站提供服务，从而欺骗这种机制。

@WojciechMaj 你是对的。我将答案编辑为更好的解决方案。

【参考方案7】：

要删除开发工具，您必须从文件 index.js 中删除以下行：

mainWindow.webContents.openDevTools();

是index.js的一行，即23行。