Disable chrome react DevTools for production

Question

I'm trying to browserify my react app for production using gulp and envify to setup NODE_ENV. So I can remove react warning, error reporting in the console, and even my code to disable some features like the require of react-addons-perf.

And it's working great. When I search in my app.js for "production" to see if there are theses typical conditions:

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

There is nothing, so, as I said, it seems to work well.

But, I still can see that chrome's react DevTools tab with all react components, like if I was on a development website. How can I disable this tab in chrome's dev tools?

Here is my gulp task:

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

Answer 1

According to an issue on Github, you can add run a single javascript line before react is loaded to prevent it.

From #191 of react-devtools

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

Then, you may consider wrapping this with your environment condition, like that you could do sth like below in your server side rendering. Let's say Pug (formerly known as Jade):

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

However, it would be still a good practice to put the business logic and the sensitive data back to your server.

Answer 2

If you are using redux-devtools-extension you can do this.

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

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

This will make sure your devtools extension only works in the development environment and not in the production environment

Answer 3

Just improve @peteriod answer, to make sure Dev tool has installed or not

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

Answer 4

You could also delete all source map after build by adding the command below on your package.json file.

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

It makes it a bit difficult to navigate the components and hides them on devtools - source

Answer 5

you can check the mode :

---

add below code befor </body> in your index.html in the public folder

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

Answer 6

Try adding this in your 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;

Answer 7

You can use @fvilers/disable-react-devtools package to disable React Developer tool

First, install the package mentioned above

npm i @fvilers/disable-react-devtools

or

yarn add @fvilers/disable-react-devtools

than

Call the disableReactDevTools() method before React is loaded, in your main file.

import React from 'react';
import ReactDOM from 'react-dom';
import { disableReactDevTools } from '@fvilers/disable-react-devtools';
import App from './App';

if (process.env.NODE_ENV === 'production') {
  disableReactDevTools();
}

ReactDOM.render(<App />, document.getElementById('root'));

Answer 8

for my solution that work with npm run build

1. add file .env.production to root project (same place with package.json file)
2. add properties INLINE_RUNTIME_CHUNK=true to file .env.production (recommend add with GENERATE_SOURCEMAP=false to make sure *.map file will not generated after build)
3. final try npm run build enjoy ^^

Answer 9

I always use a 'fvilers/disable-react-devtools' package and it has always worked for me.

All you need to do is install this page by using

npm i @fvilers/disable-react-devtools

and then tell your app you are in production env. Import the package into your app by

import { disableReactDevTools } from '@fvilers/disable-reactdevtools';

and then use the use the following code snippet on top of you app component.

if (process.env.NODE_ENV === 'production') {
  disableReactDevTools();
}
    import { disableReactDevTools } from '@fvilers/disable-react-devtools';

if (process.env.NODE_ENV === 'production') {
  disableReactDevTools();
}

Answer 10

In order to remove the dev tools you have to remove the following line from the file index.js :

mainWindow.webContents.openDevTools();

It is a line of index.js, ie, of line 23 .