Javascript 禁用用于生产的chrome react开发工具

我正在尝试使用gulp和envify设置NODE_ENV浏览我的react应用程序进行生产。因此，我可以删除控制台中的react警告、错误报告，甚至我的代码来禁用一些功能，如react插件性能要求

而且效果很好。当我在app.js中搜索“生产”以查看是否存在以下典型情况：

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

没有什么，所以，正如我所说，它似乎工作得很好

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

以下是我的吞咽任务：

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');
    }));
};

---

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

从

---

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

如果您使用的是

redux devtools extension

，您可以这样做

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

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

---

这将确保您的devtools扩展只在开发环境中工作，而不在生产环境中工作

只需改进@peteriod answer，以确保Dev工具是否已安装

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

---

您还可以通过在package.json文件上添加下面的命令，在构建之后删除所有源映射

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

---

这使得在devtools上导航组件和隐藏组件有点困难-source

您可以检查模式：

---

在您的public文件夹的index.html中的

之前添加以下代码

  <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>

var mode=document.querySelector（“#node_env_mode”）.value；
如果(
模式==“生产”&&
窗口的类型。\uuuu反应\u开发工具\u全局\u挂钩\uuuu==“对象”
) {
window.\uuuu REACT\u DEVTOOLS\u GLOBAL\u HOOK\uuuu.inject=function（）{}；
}

尝试将其添加到您的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;

---

Chrome中的实际插件是什么？你为什么要这么做？你的js不应该包含任何敏感信息。为什么Chrome允许你从一个网站上改变Chrome中的东西？想想看，这将是一个巨大的安全缺陷，能够用javascript在用户浏览器中打开/关闭东西。是的，chrome插件。别担心，如果用户没有经过身份验证，他就什么也做不了：每个请求都会在服务器端用一个带有强密钥（1024字符）的令牌进行检查。我的问题是，这可能吗？如何可能？据我所知，这是可能的，所以我在这里问它如何以及为什么不能与我的吞咽任务一起工作。啊，我明白了，如果没有全局

反应
或
要求
，它将不起作用，但不确定具体的设置我最近发布了一个包来禁用React Developer Tools插件：如果有人有兴趣通过任何答案或NPM包绕过这个“保护”，只需使用Chrome中的本地覆盖功能，并在美化后删除有问题的行。e、 g.我遇到以下错误：无法将undefinedgo的属性“inject”设置为
chrome://extensions/
查看“React Developer Tools”是否可用activated@LoveTrivedi是否通过服务器呈现此内容？请记住，节点没有窗口对象。将代码段包装在
if（window）{…}
@LoveTrivedi中，如果没有安装react devtools，可能会发生这种情况。因此，您的代码可能应该首先检查
\uuuuuuReact\uDevTools\uGlobal\uHook\uuuuUn/code>是否已定义。此答案是引用redux开发工具，而不是REACT-DEVTOOLS。您可以将其添加到公用文件夹中的index.html文件中。如何分配/访问脚本标记中的环境变量？因此，这只能在生产模式下启用。这不是一个防弹的想法-可以创建一个本地代理服务器，从本地主机为您的网站提供服务，愚弄了这个机制。@WojciechMaj您是对的。我编辑了我的答案以找到更好的解决方案。
  <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>

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;