React-devtools: Flag to disable devtools

[marcovdijk]

Hey guys, the new devtools is really awesome! I was just wondering if there's a flag I can set in a react app to prevent non-developers from viewing or editing the app with the devtools.

[jaredly]

It would probably work to put this at the top of your page (before react is loaded). That would effectively prevent the devtools from accessing React's context.

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

Keep in mind, though, that anybody can see & mess w/ network requests in chrome :) so if you're trying to prevent cheating, make sure you have checks server-side as well

[marcovdijk]

Thanks, this is exactly what I need!

[nomadtechie]

@jaredly I'm wondering if this is still the recommended option if we want to disable react devtools for a given environment?

[jaredly]

yup, it should work

[stueynet]

How are you guys handling mobile browsers which throw:

Uncaught TypeError: Cannot set property 'inject' of undefined

[jtlindsey]

@stueynet

try checking for __REACT_DEVTOOLS_GLOBAL_HOOK__ first

    <script>
        if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {
            __REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function() {};
        }
    </script>

[Venryx]

I'm noticing that even when I run the code above, in a script tag before anything else, the dev-tools is still somehow getting involved and having one of its functions called during each rerender (at 60-fps). (the code above removes most of the extension's functions shown in the Profiler, but one of them still shows up)

Here is a screenshot: (the chrome-extension id shown in the function url matches the React dev-tools)

This is apparently the code that still gets involved:

/**
 * This takes care of patching the renderer to emit events on the global
 * `Hook`. The returned object has a `.cleanup` method to un-patch everything.
 */
function attachRenderer(hook, rid, renderer) {
  [...]
}

[...]

function decorate(obj, attr, fn) {
  var old = obj[attr];
  obj[attr] = function (instance) {              // <<< This is the line of the function shown in the profiler.
    var res = old.apply(this, arguments);
    fn.apply(this, arguments);
    return res;
  };
  return old;
}

[...]

module.exports = attachRenderer;
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(3)))

[Venryx]

Okay, found a way to keep even that function from getting injected/involved.

I just changed the disabler code to this:

// disable react-dev-tools for this project
if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === "object") {
    for (let [key, value] of Object.entries(window.__REACT_DEVTOOLS_GLOBAL_HOOK__)) {
        window.__REACT_DEVTOOLS_GLOBAL_HOOK__[key] = typeof value == "function" ? ()=>{} : null;
    }
}

[pietrofxq]

@Venryx Thanks, your code worked for me!

[scriptex]

@Venryx Thank you very much! This just works :)

For anyone who, like me, uses TypeScript, here is a TS version of the code above (extracted in a function):

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 Object.entries(DEV_TOOLS)) {
            DEV_TOOLS[key] = typeof value === 'function' ? noop : null;
        }
    }
};

And then just call the disableReactDevTools() function before you mount your app.

[sagar-gavhane]

If you want to disable in production then below snippets works fine.

if (!window.location.port && typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {
  window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () {}
}

[fvilers]

Hi there! I just want to let you know, and for future visitors, that I published a package that implements this feature so that I can resure it on all my React projects.

[max77p]

@sagar-gavhane where exactly do you put this piece of code?

[Venryx]

@max77p It should be placed at the start of the first-run script, I believe. (that's where I place my variant anyway)

[fvilers]

@max77p If you want to disable the react devtools, there's an explanation on how to use the package I published here: https://github.com/fvilers/disable-react-devtools#readme

[max77p]

@Venryx do you add anything else to lock down the tools or just this piece of line?

[Venryx]

@max77p No, I use just the (5/6) lines shown in my comment.

[skirankumar7]

How do I make props and state fields not editable

Here if you see isMobile, userLoggedIn, etc. are editalbe in production How do make not to editable.
Why isMobile and userLoggedIn came as checkboxes in devtools.
any thoughts, ideas.
please comment.
Thanks.

[pietrofxq]

@skirankumar7 You can't. If the property of the state is a boolean, it will show as checkbox in the devtools. Your only options are to remove the devtools completely with the code people posted on this issue or live with it

[skirankumar7]

Thanks @pietrofxq