javascript - How to excludedisable React Developer Tools in Production build? - Stack Overflow

admin管理员组

文章数量:1289424

As its name suggests developer tools should be visible or accessible only during development and not in production. I don't want my end users seeing the state and ponent tree, thus knowing what's going on under the hood. Although React Developer Tool in Production neither allows modification of the ponents' state nor does it reveal their names, it doesn't fully hide them or disable the tools altogether. End Users can still see each ponent's state and the whole app tree.

Is there a way to exclude / disable React Developer tools or disconnect it in the production build, like how Augury does for Angular?

As its name suggests developer tools should be visible or accessible only during development and not in production. I don't want my end users seeing the state and ponent tree, thus knowing what's going on under the hood. Although React Developer Tool in Production neither allows modification of the ponents' state nor does it reveal their names, it doesn't fully hide them or disable the tools altogether. End Users can still see each ponent's state and the whole app tree.

Is there a way to exclude / disable React Developer tools or disconnect it in the production build, like how Augury does for Angular?

• javascript
• reactjs
• security
• browser

Share Improve this question Follow asked Apr 4, 2020 at 15:28 PushkinPushkin 3,60411 gold badge1919 silver badges3535 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

While I was searching the internet for answers while this question is still in draft, I found this one. But sadly this didn't work. It did however tell me that it has something to do with __REACT_DEVTOOLS_GLOBAL_HOOK__.

So After playing with it and modifying it, it worked. It successfully disconnected the App from React Developer Tools.

Here is the code to disconnect the App from React Developer Tools.

// disableReactDevTools.ts

// Declare the types if you're using TypeScript
// Ignore this block if you're using JavaScript
declare global {
  interface Window {
    __REACT_DEVTOOLS_GLOBAL_HOOK__: any;
  }
}

export function disableReactDevTools() {
  // Check if the React Developer Tools global hook exists
  if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ !== "object") {
    return;
  }

  for (const prop in window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
    if (prop === "renderers") {
      // initialise this with an empty `Map`,
      // else it will throw an error in console

      window.__REACT_DEVTOOLS_GLOBAL_HOOK__[prop] = new Map()
    } else {
      // Replace all of its properties with a no-op function or a null value
      // depending on their types

      window.__REACT_DEVTOOLS_GLOBAL_HOOK__[prop] =
        typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__[prop] === "function"
          ? () => {}
          : null;
    }
  }
}

// index.tsx
import React from "react";
import ReactDOM from "react-dom";

// ...

if (process.env.NODE_ENV === "production") disableReactDevTools();
// ...

This code will not throw any error or warnings in the console.

本文标签： javascriptHow to excludedisable React Developer Tools in Production buildStack Overflow