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)